Improve placement of map controls and popovers (fixes #272)

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}

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"

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;
 }

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);
   }