feat(map): improve Map layout to have more space

f-eld-ch · Oct 15, 2024 · c4fad36 · c4fad36
1 parent 7f1a437
commit c4fad36
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 23 deletions.
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -22,7 +22,7 @@ import { useTranslation } from "react-i18next";
 import { UserState } from "types";
 import { UserContext } from "utils";
 import MessageSheet from "views/journal/MessageSheet";
-import { Layout } from "views/Layout";
+import { Layout, LayoutMarginLess } from "views/Layout";
 import { default as client } from "./client";
 
 const Map = lazy(() => import("views/map"));
@@ -149,11 +149,11 @@ function App() {
                 <Route
                   path="map"
                   element={
-                    <Layout>
+                    <LayoutMarginLess>
                       <Suspense fallback={<Spinner />}>
                         <Map />
                       </Suspense>
-                    </Layout>
+                    </LayoutMarginLess>
                   }
                 />
                 <Route

diff --git a/ui/src/components/Spinner.tsx b/ui/src/components/Spinner.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 function Spinner() {
   return (
-    <div className="has-text-centered">
+    <div className="container is-flex is-justify-content-center is-align-items-center has-text-centered">
       <FontAwesomeIcon icon={faSpinner} spin size="4x" />
     </div>
   );

diff --git a/ui/src/views/Layout.tsx b/ui/src/views/Layout.tsx
@@ -23,19 +23,43 @@ export const Layout = (props: LayoutProps) => {
   if (!userState.isLoggedin) return <Login />;
 
   return (
-    <section className="columns is-mobile is-flex-direction-column is-gapless is-fullheight-with-navbar">
-      <div className="column is-narrow is-hidden-print">
-        <Navbar />
-      </div>
-      <div className="column is-narrow is-hidden-print">
-        <ReloadPrompt />
-      </div>
-      <div className="column">
-        <section className="section">{props.children}</section>
-      </div>
-      <div className="column is-narrow is-hidden-print">
-        <Footer />
-      </div>
-    </section>
+    <>
+      <Navbar />
+      <ReloadPrompt />
+      <section className="columns is-mobile is-flex-direction-column is-gapless is-fullheight-with-navbar">
+        <div className="column">
+          <section className="section">{props.children}</section>
+        </div>
+        <div className="column is-narrow is-hidden-print">
+          <Footer />
+        </div>
+      </section>
+    </>
+  );
+};
+
+export const LayoutMarginLess = (props: LayoutProps) => {
+  const [searchParams] = useSearchParams();
+  const { i18n } = useTranslation();
+  const userState = useContext(UserContext);
+
+  const lang = searchParams.get("lang");
+  useEffect(() => {
+    i18n.changeLanguage(lang || undefined);
+  }, [lang, searchParams, i18n]);
+
+  if (!userState.isLoggedin) return <Login />;
+
+  return (
+    <>
+      <Navbar />
+      <ReloadPrompt />
+      <section className="columns is-mobile is-flex-direction-column is-gapless is-fullheight-with-navbar">
+        <div className="column is-flex">{props.children}</div>
+        <div className="column is-narrow is-hidden-print">
+          <Footer />
+        </div>
+      </section>
+    </>
   );
 };
diff --git a/ui/src/views/map/Map.scss b/ui/src/views/map/Map.scss
@@ -1,7 +1,8 @@
 @import "maplibre-gl/dist/maplibre-gl";
 
-.maplibregl-map {
-  min-height: 79vh;
+.maplibregl-canvas {
+  @extend .maplibregl-canvas !optional;
+  outline: none !important;
 }
 
 .maplibregl-ctrl-bottom-right .maplibregl-ctrl {

diff --git a/ui/src/views/map/Map.tsx b/ui/src/views/map/Map.tsx
@@ -51,13 +51,14 @@ function MapView() {
   maplibregl.setWorkerCount(6);
 
   const mapClass = classNames({
-    maplibre: true,
-    "container-flex": true,
+    "is-flex-grow-1": true,
+    "is-align-items-stretch": true,
+    "is-align-self-strech": true,
+    "mt-3": true,
   });
 
   return (
     <>
-      <h3 className="title is-size-3 is-capitalized">Lage</h3>
       <div className={mapClass}>
         <Map
           mapLib={maplibregl}