From 05238b5963f605a7a6f148045bf6b430088d80cb Mon Sep 17 00:00:00 2001
From: Maciej Ziarkowski <maciej.ziarkowski@gmail.com>
Date: Wed, 4 Sep 2019 17:18:45 +0100
Subject: [PATCH] Restyle map and controls

---
 app/src/frontend/map/map.css        | 23 ++++++++++++++++-------
 app/src/frontend/map/map.tsx        |  4 ++--
 app/src/frontend/map/search-box.css |  5 -----
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/app/src/frontend/map/map.css b/app/src/frontend/map/map.css
index 1a8204c3..d5b91e3a 100644
--- a/app/src/frontend/map/map.css
+++ b/app/src/frontend/map/map.css
@@ -8,25 +8,34 @@
     box-shadow: 0px 0px 1px 1px #222;
     visibility: hidden;
 }
+
+.map-container {
+    flex: 1;
+    position: relative;
+}
 .leaflet-container {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    height: 100%;
+    width: 100%;
 }
 .leaflet-container .leaflet-control-zoom {
     border: 1px solid #fff;
     box-shadow: 0 0 1px 1px #222;
 }
+
+.leaflet-container .leaflet-control-attribution {
+    width: 100%;
+    background: #fff;
+    background: rgba(255, 255, 255, 0.7);
+}
+
 .leaflet-grab {
     cursor: crosshair;
 }
 @media (min-width: 768px){
     /* Only show the "Click a building ..." notice for larger screens */
     .map-notice {
-        left: 25.5rem;
-        top: 0.5rem;
+        left: 0.5rem;
+        top: 3.5rem;
         visibility: visible;
     }
 }
diff --git a/app/src/frontend/map/map.tsx b/app/src/frontend/map/map.tsx
index 5d48e1f0..e667bed3 100644
--- a/app/src/frontend/map/map.tsx
+++ b/app/src/frontend/map/map.tsx
@@ -143,7 +143,7 @@ class ColouringMap extends Component<any, ColouringMapState> { // TODO: add prop
             : '/tiles/base_night/{z}/{x}/{y}.png'
 
         return (
-            <Fragment>
+            <div className="map-container">
                 <Map
                     center={position}
                     zoom={this.state.zoom}
@@ -177,7 +177,7 @@ class ColouringMap extends Component<any, ColouringMapState> { // TODO: add prop
                         </Fragment>
                     ) : null
                 }
-            </Fragment>
+            </div>
         );
     }
 }
diff --git a/app/src/frontend/map/search-box.css b/app/src/frontend/map/search-box.css
index 0e13308a..7d51397c 100644
--- a/app/src/frontend/map/search-box.css
+++ b/app/src/frontend/map/search-box.css
@@ -46,11 +46,6 @@
    margin-right: 0.1rem;
 }
 @media (min-width: 768px) {
-    /* for large screens adopt the conventional search box position */
-    .search-box{
-        top: 3.625rem;
-        left: 25.5rem;
-    }
     /* The following is a fix (?) for the truncation of the "Search for postcode" text  */
     .form-inline .form-control {
         width: 200px;