Squares turn to arrows on hover

Closes #33

app/src/frontend/app.js

@@ -67,6 +67,7 @@ class App extends React.Component {
                                             <Route exact path="/building/:building.html">
                                                 <BuildingView
                                                     {...this.state.building}
+                                                    {...props} // includes route history/match
                                                     user={this.state.user}
                                                     selectBuilding={this.selectBuilding}
                                                     />

app/src/frontend/building-edit.js

@@ -8,7 +8,6 @@ import Sidebar from './sidebar';
 class BuildingEdit extends Component {
     constructor(props) {
         super(props);
-        const user = props.user || {};
         this.state = {
             error: undefined,
             building_id: props.building_id,

app/src/frontend/building-view.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React, { Fragment } from 'react';
+import { Link, NavLink } from 'react-router-dom';
 
 import Sidebar from './sidebar';
 import Tooltip from './tooltip';
@@ -16,37 +16,49 @@ const BuildingView = function(props){
             </Sidebar>
         );
     }
+    const hash = (props.location && props.location.hash)? props.location.hash: undefined;
     return (
         <Sidebar title={`View Building`}>
             <section className="data-section">
-                <h3 className="h3 bullet-prefix location">Location</h3>
-                <p className="data-intro">
+                <NavLink className="bullet-prefix" to="#location">
+                    <h3 className="h3 location">Location</h3>
+                </NavLink>
+                {
+                    ( hash.match('location') )
+                    ? (
+                        <Fragment>
+                        <p className="data-intro">
 
-                    Section introduction of up to roughly 100 characters will take
-                    approx&shy;imately this much space.
+                            Section introduction of up to roughly 100 characters will take
+                            approx&shy;imately this much space.
 
-                    <a href="/">Read more</a>.
-                </p>
-                <dl id="data-list-location" className="data-list collapse show">
-                    <dt>
-                        Building Name
-                        <Tooltip text="Hint tooltip content should be ~40 chars." />
-                    </dt>
-                    <dd>{props.location_name ? props.location_name : '-'}</dd>
-                    <dt>Building Number</dt>
-                    <dd>{props.location_number ? props.location_number : '-'}</dd>
-                    <dt>Street</dt>
-                    <dd>{props.location_street ? props.location_street : '-'}</dd>
-                    <dt>Address line 2</dt>
-                    <dd>{props.location_line_two ? props.location_line_two : '-'}</dd>
-                    <dt>Town</dt>
-                    <dd>{props.location_town ? props.location_town : '-'}</dd>
-                    <dt>Postcode</dt>
-                    <dd>{props.location_postcode ? props.location_postcode : '-'}</dd>
-                </dl>
+                            <a href="/">Read more</a>.
+                        </p>
+                        <dl id="data-list-location" className="data-list collapse show">
+                            <dt>
+                                Building Name
+                                <Tooltip text="Hint tooltip content should be ~40 chars." />
+                            </dt>
+                            <dd>{props.location_name ? props.location_name : '-'}</dd>
+                            <dt>Building Number</dt>
+                            <dd>{props.location_number ? props.location_number : '-'}</dd>
+                            <dt>Street</dt>
+                            <dd>{props.location_street ? props.location_street : '-'}</dd>
+                            <dt>Address line 2</dt>
+                            <dd>{props.location_line_two ? props.location_line_two : '-'}</dd>
+                            <dt>Town</dt>
+                            <dd>{props.location_town ? props.location_town : '-'}</dd>
+                            <dt>Postcode</dt>
+                            <dd>{props.location_postcode ? props.location_postcode : '-'}</dd>
+                        </dl>
+                        </Fragment>
+                    ) : null
+                }
             </section>
             <section className="data-section">
-                <h3 className="h3 bullet-prefix age">Age</h3>
+                <NavLink className="bullet-prefix" to="#age">
+                    <h3 className="h3 age">Age</h3>
+                </NavLink>
                 <dl className="data-list">
                     <dt>Year built (best estimate)</dt>
                     <dd>{props.date_year? props.date_year : '-'}</dd>
@@ -61,7 +73,9 @@ const BuildingView = function(props){
                 </dl>
             </section>
             <section className="data-section">
-                <h3 className="h3 bullet-prefix size">Size</h3>
+                <NavLink className="bullet-prefix" to="#size">
+                    <h3 className="h3 size">Size</h3>
+                </NavLink>
                 <dl className="data-list">
                     <dt>Attic storeys</dt>
                     <dd>{props.size_storeys_attic? props.size_storeys_attic : '-'}</dd>
@@ -72,7 +86,9 @@ const BuildingView = function(props){
                 </dl>
             </section>
             <section className="data-section">
-                <h3 className="h3 bullet-prefix like">Like Me!</h3>
+                <NavLink className="bullet-prefix" to="#like">
+                    <h3 className="h3 like">Like Me!</h3>
+                </NavLink>
                 <dl className="data-list">
                     <dt>Likes</dt>
                     <dd>{props.likes ? props.likes.length : 0}</dd>

app/src/frontend/legend.js

@@ -1,5 +1,5 @@
 import React, { Component, Fragment } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, NavLink } from 'react-router-dom';
 
 import Sidebar from './sidebar';
 
@@ -78,9 +78,9 @@ const LegendSection = (props) => (
 
 const LegendGroup = (props) => (
     <div className="data-section">
-        <Link to={`/map/${ props.slug }.html`}>
-            <h3 className={`h3 bullet-prefix ${ props.slug }`}>{ props.label }</h3>
-        </Link>
+        <NavLink className={`bullet-prefix ${ props.slug }`} to={`/map/${ props.slug }.html`}>
+            <h3 className="h3">{ props.label }</h3>
+        </NavLink>
         <dl className="data-list">
             { props.children }
         </dl>

app/src/frontend/main.css

@@ -12,24 +12,49 @@
     padding-left: 17px;
 }
 .bullet-prefix {
-    position: relative;
-    padding: 0rem 0.5rem 0.5rem 1.5rem;
-    cursor: pointer;
-}
-.bullet-prefix::before {
     display: block;
-    position: absolute;
-    left: 0px;
-    top: 6px;
-    width: 10px;
-    height: 10px;
-    background-color: #7d7d7d;
-    content: ' ';
+    position: relative;
+    padding: 0.5rem 0.5rem 0.5rem 2.25rem;
+    cursor: pointer;
+    text-decoration: none;
+    color: #222;
     transition: background-color 0.2s;
 }
+.bullet-prefix h3 {
+    display: inline-block;
+}
+.bullet-prefix.active,
+.bullet-prefix:hover {
+    color: #222;
+    text-decoration: none;
+    background-color: #eeeeee;
+}
+.bullet-prefix::before {
+    display: inline-block;
+    position: absolute;
+    left: 0.75rem;
+    top: 0.25rem;
+    width: 1rem;
+    height: 1rem;
+    text-align: center;
+    vertical-align: middle;
+    color: #7d7d7d;
+    font-size: 1.2rem;
+    content: '\25A0';
+    transition: color 0.2s;
+}
 .bullet-prefix:hover::before,
-.bullet-prefix.toggled-on::before {
-    background-color: #222;
+.bullet-prefix.active::before {
+    color: #222;
+}
+.bullet-prefix:hover::before {
+    content: '\25BC';
+}
+.bullet-prefix.active:hover::before {
+    content: '\25A0';
+}
+.data-section {
+    border-top: 1px solid #ffffff;
 }
 .data-section .h3 {
     margin: 0;
@@ -39,8 +64,8 @@
     font-size: 0.8333rem;
 }
 .data-list {
-    margin: 0rem 0 1rem;
-    padding-left: 1.5rem;
+    margin: 0;
+    padding-left: 2.25rem;
 }
 .data-list a {
     color: #555;
@@ -52,7 +77,7 @@
 }
 .data-list dt,
 .data-section label {
-    margin: 0;
+    margin: 0.5em 0 0;
     font-size: 0.8333rem;
     font-weight: normal;
     text-transform: uppercase;
@@ -72,8 +97,11 @@
 }
 .data-legend .key {
     display: inline-block;
-    width: 10px;
-    height: 10px;
+    width: 1em;
+    height: 1em;
+    text-indent: -30px;
+    margin-right: 0.2em;
+    vertical-align: text-bottom;
     overflow: hidden;
 }
 

app/src/frontend/sidebar.css

@@ -4,7 +4,7 @@
     left: 0;
     right: 0;
     bottom: 3rem;
-    padding: 0.25em 0.75em;
+    padding: 0.25em 0em;
     background: #fff;
     background-color: rgba(255,255,255,0.95);
     z-index: 1000;
@@ -14,6 +14,7 @@
     margin-bottom: 0.5rem;
     margin-top: 0.5rem;
     margin-left: -0.1em;
+    padding: 0 0.75rem;
 }
 .leaflet-container .leaflet-control-attribution {
     width: 100%;