From 7ca7fb59acd67e2090f4671008469ef2a2175443 Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Tue, 22 Jan 2019 21:55:03 +0000
Subject: [PATCH] Shift legend/logo layout

---
 app/src/frontend/legend.css |  8 ++++++--
 app/src/frontend/legend.js  | 30 ++++++++++++++++++------------
 app/src/frontend/logo.css   | 10 +++++-----
 3 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/app/src/frontend/legend.css b/app/src/frontend/legend.css
index 694091fd..7eb669b8 100644
--- a/app/src/frontend/legend.css
+++ b/app/src/frontend/legend.css
@@ -6,7 +6,7 @@
     position: absolute;
     bottom: 55px;
     right: 10px;
-    min-width: 7rem;
+    min-width: 12rem;
     float: right;
     background: white;
     border-radius: 4px;
@@ -24,10 +24,14 @@
         bottom: 24px;
     }
 }
-.map-legend h4,
+.map-legend .h4,
+.map-legend p,
 .data-legend {
     padding: 0 0.5rem;
 }
+.map-legend p {
+    margin: 0.25rem 0 0.5rem;
+}
 .data-legend {
     max-height: 30rem;
     overflow-y: auto;
diff --git a/app/src/frontend/legend.js b/app/src/frontend/legend.js
index 4c4a31b3..eeb3d6cf 100644
--- a/app/src/frontend/legend.js
+++ b/app/src/frontend/legend.js
@@ -106,6 +106,24 @@ const Legend = (props) => {
     const elements = details.elements;
     return (
         <div className="map-legend">
+            <h4 className="h4">{ title }</h4>
+            {
+                details.description?
+                    <p>{details.description}</p>
+                    : null
+            }
+            {
+                elements.length?
+                (<ul className="data-legend">
+                {
+                    elements.map((data_item) => (
+                        <LegendItem {...data_item} key={data_item.color} />
+                    ))
+                }
+                </ul>)
+                : (<p className="data-intro">Coming soon…</p>)
+            }
+
             <div className="logo">
                 <div className="grid">
                     <div className="row">
@@ -132,18 +150,6 @@ const Legend = (props) => {
                     <span>London</span>
                 </h3>
             </div>
-            <h4 className="h4">{ title }</h4>
-            {
-                elements.length?
-                (<ul className="data-legend">
-                {
-                    elements.map((data_item) => (
-                        <LegendItem {...data_item} key={data_item.color} />
-                    ))
-                }
-                </ul>)
-                : (<p className="data-intro">Coming soon…</p>)
-            }
         </div>
     );
 }
diff --git a/app/src/frontend/logo.css b/app/src/frontend/logo.css
index 053be1ca..eabce154 100644
--- a/app/src/frontend/logo.css
+++ b/app/src/frontend/logo.css
@@ -28,17 +28,17 @@
     letter-spacing: 0;
 }
 .map-legend .logo {
-    margin-top: -5px;
-    padding: 0 0.4rem 0.4rem 0.4rem;
+    padding: 0.5rem;
 }
 .map-legend .logo .logotype {
+    font-size: 1.75rem;
     position: relative;
-    top: 6px;
+    top: 3px;
 }
 .map-legend .logo .row .cell {
     background-color: #ccc;
-    height: 11px;
-    width: 11px;
+    height: 10px;
+    width: 10px;
     animation: none !important;
 }
 .logo .grid {