From 8e7eea136911b642d6db9e1f364a03bd45911826 Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Sat, 19 Jan 2019 19:06:26 +0000
Subject: [PATCH] Add click a building... notice to map

---
 app/src/frontend/legend.css         |  4 +++-
 app/src/frontend/map.css            | 16 +++++++++++++++-
 app/src/frontend/map.js             |  9 +++++++++
 app/src/frontend/theme-switcher.css |  2 +-
 4 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/app/src/frontend/legend.css b/app/src/frontend/legend.css
index 3c41c9ef..27beaf72 100644
--- a/app/src/frontend/legend.css
+++ b/app/src/frontend/legend.css
@@ -10,7 +10,9 @@
     float: right;
     background: white;
     border-radius: 4px;
-    padding: 0.25rem 0;
+    padding: 0.5rem 0 0.25rem;
+    border: 1px solid #fff;
+    box-shadow: 0px 0px 1px 1px #222222;
 }
 @media (min-width: 380px){
     .map-legend {
diff --git a/app/src/frontend/map.css b/app/src/frontend/map.css
index b2a67e8b..39950f36 100644
--- a/app/src/frontend/map.css
+++ b/app/src/frontend/map.css
@@ -1,4 +1,14 @@
-
+.map-notice {
+    padding: 0.5rem 0.75rem;
+    background: #fff;
+    border: 1px solid #fff;
+    border-radius: 4px;
+    z-index: 1000;
+    position: absolute;
+    left: 25.5rem;
+    top: 0.5rem;
+    box-shadow: 0px 0px 1px 1px #222;
+}
 .leaflet-container {
     position: absolute;
     top: 0;
@@ -6,3 +16,7 @@
     left: 0;
     right: 0;
 }
+.leaflet-container .leaflet-control-zoom {
+    border: 1px solid #fff;
+    box-shadow: 0 0 1px 1px #222;
+}
diff --git a/app/src/frontend/map.js b/app/src/frontend/map.js
index fe7d4665..2c2d5fe9 100644
--- a/app/src/frontend/map.js
+++ b/app/src/frontend/map.js
@@ -6,6 +6,7 @@ import './map.css'
 import ThemeSwitcher from './theme-switcher';
 import { parseCategoryURL } from '../parse';
 import Legend from './legend';
+import { HelpIcon } from './icons';
 
 const OS_API_KEY = 'NVUxtY5r8eA6eIfwrPTAGKrAAsoeI9E9';
 
@@ -70,6 +71,7 @@ class ColouringMap extends Component {
 
         // colour-data tiles
         const is_building = /building/.test(this.props.match.url);
+        const is_edit = /edit/.test(this.props.match.url);
         const cat = parseCategoryURL(this.props.match.url);
         const tileset_by_cat = {
             age: 'date_year',
@@ -121,6 +123,13 @@ class ColouringMap extends Component {
                     <ZoomControl position="topright" />
                     <AttributionControl prefix="" />
                 </Map>
+                {
+                    !is_building? (
+                        <div class="map-notice">
+                            <HelpIcon /> {is_edit? 'Click a building to edit' : 'Click a building for details'}
+                        </div>
+                    ) : null
+                }
                 <Legend slug={cat} />
                 <ThemeSwitcher onSubmit={this.themeSwitch} currentTheme={this.state.theme} />
             </Fragment>
diff --git a/app/src/frontend/theme-switcher.css b/app/src/frontend/theme-switcher.css
index 7b8a0007..64b7ddae 100644
--- a/app/src/frontend/theme-switcher.css
+++ b/app/src/frontend/theme-switcher.css
@@ -1,7 +1,7 @@
 .theme-switcher {
     z-index: 1000;
     position: absolute;
-    top: 75px;
+    top: 77px;
     right: 10px;
     float: right;
     background: white;