From c1c3797eb8a7fd1e91dc4af01c1c99a53573cc85 Mon Sep 17 00:00:00 2001
From: Paul Bienkowski <pb@opatut.de>
Date: Mon, 12 Sep 2022 17:16:35 +0200
Subject: [PATCH] Improve placement of map controls and popovers (fixes #272)

---
 frontend/src/components/Map/index.tsx              | 9 +++++++--
 frontend/src/pages/MapPage/index.tsx               | 6 +++---
 frontend/src/pages/MapPage/styles.module.less      | 5 ++---
 frontend/src/pages/TrackPage/TrackPage.module.less | 2 +-
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Map/index.tsx b/frontend/src/components/Map/index.tsx
index fd4440a..0ce11a1 100644
--- a/frontend/src/components/Map/index.tsx
+++ b/frontend/src/components/Map/index.tsx
@@ -6,6 +6,7 @@ import ReactMapGl, {
   WebMercatorViewport,
   ScaleControl,
   NavigationControl,
+  AttributionControl,
 } from "react-map-gl";
 import turfBbox from "@turf/bbox";
 import { useHistory, useLocation } from "react-router-dom";
@@ -63,12 +64,14 @@ function Map({
   children,
   boundsFromJson,
   baseMapStyle,
+  hasToolbar,
   ...props
 }: {
   viewportFromUrl?: boolean;
   children: React.ReactNode;
   boundsFromJson: GeoJSON.Geometry;
   baseMapStyle: string;
+  hasToolbar?: boolean;
 }) {
   const [viewportState, setViewportState] = useState(EMPTY_VIEWPORT);
   const [viewportUrl, setViewportUrl] = useViewportFromUrl();
@@ -141,12 +144,14 @@ function Map({
       {...viewport}
       {...props}
       className={classnames(styles.map, props.className)}
+      attributionControl={false}
     >
-      <NavigationControl style={{ left: 10, top: 10 }} />
+      <AttributionControl style={{ top: 0, right: 0 }} />
+      <NavigationControl style={{ left: 16, top: hasToolbar ? 64 : 16 }} />
       <ScaleControl
         maxWidth={200}
         unit="metric"
-        style={{ left: 10, bottom: 10 }}
+        style={{ left: 16, bottom: 16 }}
       />
 
       {children}
diff --git a/frontend/src/pages/MapPage/index.tsx b/frontend/src/pages/MapPage/index.tsx
index 07f510d..0c0ce78 100644
--- a/frontend/src/pages/MapPage/index.tsx
+++ b/frontend/src/pages/MapPage/index.tsx
@@ -211,12 +211,12 @@ function MapPage({ login }) {
           </div>
         )}
         <div className={styles.map}>
-          <Map viewportFromUrl onClick={onClick}>
+          <Map viewportFromUrl onClick={onClick} hasToolbar>
             <Button
               style={{
                 position: "absolute",
-                left: 44,
-                top: 9,
+                left: 16,
+                top: 16,
               }}
               primary
               icon="bars"
diff --git a/frontend/src/pages/MapPage/styles.module.less b/frontend/src/pages/MapPage/styles.module.less
index 8962f4a..66d4b2c 100644
--- a/frontend/src/pages/MapPage/styles.module.less
+++ b/frontend/src/pages/MapPage/styles.module.less
@@ -25,10 +25,9 @@
 
 .mapInfoBox {
   position: absolute;
-  right: 0;
-  top: 0;
+  right: 16px;
+  top: 32px;
   max-height: 100%;
   width: 36rem;
   overflow: auto;
-  margin: 20px;
 }
diff --git a/frontend/src/pages/TrackPage/TrackPage.module.less b/frontend/src/pages/TrackPage/TrackPage.module.less
index fab699f..ad0a1fe 100644
--- a/frontend/src/pages/TrackPage/TrackPage.module.less
+++ b/frontend/src/pages/TrackPage/TrackPage.module.less
@@ -9,7 +9,7 @@
   .details.details {
     position: absolute;
     width: 320px;
-    top: 16px;
+    top: 32px;
     right: 16px;
     max-height: calc(100% - 32px);
   }