From 60ad6fb1a448d593bb94b6b7a2a5d030217e19ad Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Mon, 10 Sep 2018 12:41:00 +0100
Subject: [PATCH] Sketch in legend, map on welcome page

---
 app/src/frontend/app.js    |  42 +++++++----
 app/src/frontend/legend.js | 143 +++++++++++++++++++++++++++++++++++++
 2 files changed, 170 insertions(+), 15 deletions(-)
 create mode 100644 app/src/frontend/legend.js

diff --git a/app/src/frontend/app.js b/app/src/frontend/app.js
index 1153ab41..ed9f65e6 100644
--- a/app/src/frontend/app.js
+++ b/app/src/frontend/app.js
@@ -8,6 +8,7 @@ import Login from './login';
 import ColouringMap from './map';
 import SignUp from './signup';
 import Welcome from './welcome';
+import Legend from './legend';
 
 import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
 import './main.css'
@@ -37,21 +38,32 @@ class App extends React.Component {
                 <BetaBanner />
                 <Header user={this.state.user} />
                 <main className="beta">
-                <Switch>
-                    <Route exact path="/" component={Welcome} />
-                    <Route exact path="/about.html" component={AboutPage} />
-                    <Route exact path="/maps.html" component={ColouringMap} />
-                    <Route exact path="/login.html">
-                        <Login user={this.state.user} login={this.login} />
-                    </Route>
-                    <Route exact path="/sign-up.html">
-                        <SignUp user={this.state.user} login={this.login} />
-                    </Route>
-                    <Route exact path="/my-account.html">
-                        <MyAccountPage user={this.state.user} logout={this.logout} />
-                    </Route>
-                    <Route component={NotFound} />
-                </Switch>
+                    <Switch>
+                        <Route exact path="/(maps.html)?">
+                            <Fragment>
+                                <Switch>
+                                    <Route exact path="/">
+                                        <Welcome />
+                                    </Route>
+                                    <Route exact path="/maps.html">
+                                        <Legend />
+                                    </Route>
+                                </Switch>
+                                <ColouringMap />
+                            </Fragment>
+                        </Route>
+                        <Route exact path="/about.html" component={AboutPage} />
+                        <Route exact path="/login.html">
+                            <Login user={this.state.user} login={this.login} />
+                        </Route>
+                        <Route exact path="/sign-up.html">
+                            <SignUp user={this.state.user} login={this.login} />
+                        </Route>
+                        <Route exact path="/my-account.html">
+                            <MyAccountPage user={this.state.user} logout={this.logout} />
+                        </Route>
+                        <Route component={NotFound} />
+                    </Switch>
                 </main>
             </Fragment>
         );
diff --git a/app/src/frontend/legend.js b/app/src/frontend/legend.js
new file mode 100644
index 00000000..dc3ce9ee
--- /dev/null
+++ b/app/src/frontend/legend.js
@@ -0,0 +1,143 @@
+import React from 'react';
+
+const Legend = () => (
+    <div id="legend" className="info-container">
+        <h2 className="h2">Maps</h2>
+        <div className="data-section">
+            <h3 className="h3 bullet-prefix age toggled-on"
+                data-toggle="collapse"
+                data-target="#data-list-age">Age</h3>
+            <dl id="data-list-age" className="data-list collapse show">
+            <dt>
+                <a href="/maps/date_year"
+                    data-map="date_year">Year Built</a></dt>
+            <dd>
+                <ul className="data-legend">
+                <li>
+                    <span className="key" style={{background: '#f0eaba'}}>-</span>
+                    &gt;=2000
+                </li>
+                <li>
+                    <span className="key" style={{background: '#fae269'}}>-</span>
+                    1980-2000
+                </li>
+                <li>
+                    <span className="key" style={{background: '#fbaf27'}}>-</span>
+                    1960-1980
+                </li>
+                <li>
+                    <span className="key" style={{background: '#e6711d'}}>-</span>
+                    1940-1960
+                </li>
+                <li>
+                    <span className="key" style={{background: '#d73d3a'}}>-</span>
+                    1920-1940
+                </li>
+                <li>
+                    <span className="key" style={{background: '#ba221c'}}>-</span>
+                    1900-1920
+                </li>
+                <li>
+                    <span className="key" style={{background: '#bb859b'}}>-</span>
+                    1880-1900
+                </li>
+                <li>
+                    <span className="key" style={{background: '#8b3654'}}>-</span>
+                    1860-1880
+                </li>
+                <li>
+                    <span className="key" style={{background: '#8f5385'}}>-</span>
+                    1840-1860
+                </li>
+                <li>
+                    <span className="key" style={{background: '#56619b'}}>-</span>
+                    1820-1840
+                </li>
+                <li>
+                    <span className="key" style={{background: '#6793b2'}}>-</span>
+                    1800-1820
+                </li>
+                <li>
+                    <span className="key" style={{background: '#83c3b3'}}>-</span>
+                    1780-1800
+                </li>
+                <li>
+                    <span className="key" style={{background: '#adc88f'}}>-</span>
+                    1760-1780
+                </li>
+                <li>
+                    <span className="key" style={{background: '#83a663'}}>-</span>
+                    1740-1760
+                </li>
+                <li>
+                    <span className="key" style={{background: '#77852d'}}>-</span>
+                    1720-1740
+                </li>
+                <li>
+                    <span className="key" style={{background: '#69814e'}}>-</span>
+                    1700-1720
+                </li>
+                <li>
+                    <span className="key" style={{background: '#d0c291'}}>-</span>
+                    1680-1700
+                </li>
+                <li>
+                    <span className="key" style={{background: '#918158'}}>-</span>
+                    1660-1680
+                </li>
+                <li>
+                    <span className="key" style={{background: '#7a5732'}}>-</span>
+                    &lt;1660
+                </li>
+                </ul>
+            </dd>
+            </dl>
+        </div>
+        <div className="data-section">
+            <h3 className="h3 bullet-prefix size"
+                data-toggle="collapse"
+                data-target="#data-list-size">Size</h3>
+            <dl id="data-list-size" className="data-list collapse">
+            <dt>
+                <a href="/maps/size_storeys"
+                data-map="size_storeys">Number of storeys</a>
+            </dt>
+            <dd>
+                <ul className="data-legend">
+                    <li>
+                    <span className="key" style={{background: '#ffc584'}}>-</span>
+                    &gt;20
+                    </li>
+                    <li>
+                    <span className="key" style={{background: '#f46259'}}>-</span>
+                    10-20
+                    </li>
+                    <li>
+                    <span className="key" style={{background: '#da456a'}}>-</span>
+                    5-10
+                    </li>
+                    <li>
+                    <span className="key" style={{background: '#a8327d'}}>-</span>
+                    4
+                    </li>
+                    <li>
+                    <span className="key" style={{background: '#7c2383'}}>-</span>
+                    3
+                    </li>
+                    <li>
+                    <span className="key" style={{background: '#5b167f'}}>-</span>
+                    2
+                    </li>
+                    <li>
+                    <span className="key" style={{background: '#360f69'}}>-</span>
+                    1
+                    </li>
+
+                </ul>
+            </dd>
+            </dl>
+        </div>
+        </div>
+);
+
+export default Legend;