From c4fad364381976dce339a9542a69a7fd9e336562 Mon Sep 17 00:00:00 2001
From: Daniel Aschwanden <daniel.aschwanden@f-eld.ch>
Date: Tue, 15 Oct 2024 10:23:31 +0200
Subject: [PATCH] feat(map): improve Map layout to have more space

---
 ui/src/App.tsx                |  6 ++--
 ui/src/components/Spinner.tsx |  2 +-
 ui/src/views/Layout.tsx       | 52 +++++++++++++++++++++++++----------
 ui/src/views/map/Map.scss     |  5 ++--
 ui/src/views/map/Map.tsx      |  7 +++--
 5 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index f7d00110..0dfb07a2 100644
--- 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
index 908acc89..cfebfc11 100644
--- 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
index a988d2a9..fe57ad5f 100644
--- 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
index 78db129b..dc1adf1a 100644
--- 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
index 342f62aa..9e3a4de5 100644
--- 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}