From dec4801688f962511cc41aede36a08f007343176 Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Wed, 14 Aug 2019 13:06:07 +0100
Subject: [PATCH] Category sidebar block styles

---
 app/src/frontend/app.tsx                 |  21 ++-
 app/src/frontend/building/categories.css |  46 ++++-
 app/src/frontend/building/categories.tsx | 229 +++++++++++------------
 app/src/frontend/building/sidebar.css    |  84 ---------
 app/src/frontend/styles/colours.css      |  40 ++++
 5 files changed, 207 insertions(+), 213 deletions(-)

diff --git a/app/src/frontend/app.tsx b/app/src/frontend/app.tsx
index 4b210c6a..8e1562e9 100644
--- a/app/src/frontend/app.tsx
+++ b/app/src/frontend/app.tsx
@@ -12,6 +12,7 @@ import ColouringMap from './map/map';
 import Header from './header';
 import MultiEdit from './building/multi-edit';
 import Categories from './building/categories';
+import Sidebar from './building/sidebar';
 
 import AboutPage from './pages/about';
 import ContributorAgreementPage from './pages/contributor-agreement';
@@ -207,16 +208,20 @@ class App extends React.Component<any, any> { // TODO: add proper types
                             <Welcome />
                         </Route>
                         <Route exact path="/view/categories.html">
-                            <Categories
-                                mode="view"
-                                building_id={building_id}
-                            />
+                            <Sidebar>
+                                <Categories
+                                    mode="view"
+                                    building_id={building_id}
+                                />
+                            </Sidebar>
                         </Route>
                         <Route exact path="/edit/categories.html">
-                            <Categories
-                                mode="edit"
-                                building_id={building_id}
-                            />
+                            <Sidebar>
+                                <Categories
+                                    mode="edit"
+                                    building_id={building_id}
+                                />
+                            </Sidebar>
                         </Route>
                         <Route exact path="/multi-edit/:cat.html" render={(props) => (
                             <MultiEdit
diff --git a/app/src/frontend/building/categories.css b/app/src/frontend/building/categories.css
index 17ce1a25..98bac7c5 100644
--- a/app/src/frontend/building/categories.css
+++ b/app/src/frontend/building/categories.css
@@ -2,18 +2,52 @@
  * Data categories
  */
  .data-category-list {
-  padding: 0;
+  padding: 0 0 0.75rem;
   text-align: center;
   list-style: none;
-  margin: 0 -0.75em;
+  margin: 0 0 0 0.2rem;
+  text-align: center;
+  width: 100%;
 }
 .data-category-list li {
   display: inline-block;
   vertical-align: bottom;
-  width: 9em;
-  height: 9em;
-  margin: 0.375em;
+  width: 11rem;
+  height: 11rem;
+  margin: 0.375rem;
+  box-shadow: 0 0 2px 5px #ffffff;
+  transition: box-shadow 0.2s;
+}
+.data-category-list li:hover {
+  box-shadow: 0 0 2px 5px #00ffff;
+}
+.data-category-list a {
+  color: #222;
+  text-decoration: none;
+}
+.data-category-list .category-link {
+  display: block;
   padding: 0.1em;
+  width: 100%;
+  height: 7rem;
+}
+.data-category-list .category-link:hover,
+.data-category-list .category-link:active,
+.data-category-list .category-link:focus {
+  color: #222;
+}
+.data-category-list .help {
+  height: 4rem;
+  padding: 1.5em 0;
+  width: 100%;
+  background-color: rgba(255,255,255,0.2);
+  transition: background-color 0.2s;
+}
+.data-category-list .help:hover,
+.data-category-list .help:active,
+.data-category-list .help:focus {
+  color: #222;
+  background-color: rgba(255,255,255,0.3);
 }
 .data-category-list .category {
   text-align: center;
@@ -23,5 +57,5 @@
 .data-category-list .description {
   text-align: center;
   font-size: 1em;
-  margin: 0;
+  margin: 0 0 1em;
 }
diff --git a/app/src/frontend/building/categories.tsx b/app/src/frontend/building/categories.tsx
index 645a9262..fef0e1e7 100644
--- a/app/src/frontend/building/categories.tsx
+++ b/app/src/frontend/building/categories.tsx
@@ -7,118 +7,116 @@ import Sidebar from './sidebar';
 import './categories.css'
 
 const Categories = (props) => (
-    <Sidebar>
-        <nav><ol className="data-category-list">
-            <Category
-                title="Location"
-                desc="Where's the building?"
-                slug="location"
-                help="https://pages.colouring.london/location"
-                inactive={false}
-                mode={props.mode}
-                building_id={props.building_id}
-            />
-            <Category
-                title="Land Use"
-                desc="What's it used for?"
-                slug="use"
-                help="https://pages.colouring.london/use"
-                inactive={true}
-                mode={props.mode}
-                building_id={props.building_id}
-            />
-            <Category
-                title="Type"
-                desc="Building type"
-                slug="type"
-                help="https://pages.colouring.london/buildingtypology"
-                inactive={true}
-                mode={props.mode}
-                building_id={props.building_id}
-            />
-            <Category
-                title="Age"
-                desc="Age and history"
-                slug="age"
-                help="https://pages.colouring.london/age"
-                inactive={false}
-                mode={props.mode}
-                building_id={props.building_id}
-            />
-            <Category
-                title="Size &amp; Shape"
-                desc="Form and scale"
-                slug="size"
-                help="https://pages.colouring.london/shapeandsize"
-                inactive={false}
-                mode={props.mode}
-                building_id={props.building_id}
-            />
-            <Category
-                title="Construction"
-                desc="Methods and materials"
-                slug="construction"
-                help="https://pages.colouring.london/construction"
-                inactive={true}
-                mode={props.mode}
-                building_id={props.building_id}
-            />
-            <Category
-                title="Team"
-                desc="Builder and designer"
-                slug="team"
-                help="https://pages.colouring.london/team"
-                inactive={true}
-                mode={props.mode}
-                building_id={props.building_id}
-            />
-            <Category
-                title="Sustainability"
-                desc="Performance"
-                slug="sustainability"
-                help="https://pages.colouring.london/sustainability"
-                inactive={true}
-                mode={props.mode}
-                building_id={props.building_id}
-            />
-            <Category
-                title="Greenery"
-                desc="Green context"
-                slug="greenery"
-                help="https://pages.colouring.london/greenery"
-                inactive={true}
-                mode={props.mode}
-                building_id={props.building_id}
-            />
-            <Category
-                title="Community"
-                desc="Public asset?"
-                slug="community"
-                help="https://pages.colouring.london/community"
-                inactive={false}
-                mode={props.mode}
-                building_id={props.building_id}
-            />
-            <Category
-                title="Planning"
-                desc="Special controls?"
-                slug="planning"
-                help="https://pages.colouring.london/planning"
-                inactive={true}
-                mode={props.mode}
-                building_id={props.building_id}
-            />
-            <Category
-                title="Like Me?"
-                desc="Adds to the city?"
-                slug="like"
-                help="https://pages.colouring.london/likeme"
-                inactive={false}
-                mode={props.mode}
-                building_id={props.building_id}
-            />
-        </ol></nav>
-    </Sidebar>
+    <ol className="data-category-list">
+        <Category
+            title="Location"
+            desc="Where's the building?"
+            slug="location"
+            help="https://pages.colouring.london/location"
+            inactive={false}
+            mode={props.mode}
+            building_id={props.building_id}
+        />
+        <Category
+            title="Land Use"
+            desc="What's it used for?"
+            slug="use"
+            help="https://pages.colouring.london/use"
+            inactive={true}
+            mode={props.mode}
+            building_id={props.building_id}
+        />
+        <Category
+            title="Type"
+            desc="Building type"
+            slug="type"
+            help="https://pages.colouring.london/buildingtypology"
+            inactive={true}
+            mode={props.mode}
+            building_id={props.building_id}
+        />
+        <Category
+            title="Age"
+            desc="Age and history"
+            slug="age"
+            help="https://pages.colouring.london/age"
+            inactive={false}
+            mode={props.mode}
+            building_id={props.building_id}
+        />
+        <Category
+            title="Size &amp; Shape"
+            desc="Form and scale"
+            slug="size"
+            help="https://pages.colouring.london/shapeandsize"
+            inactive={false}
+            mode={props.mode}
+            building_id={props.building_id}
+        />
+        <Category
+            title="Construction"
+            desc="Methods and materials"
+            slug="construction"
+            help="https://pages.colouring.london/construction"
+            inactive={true}
+            mode={props.mode}
+            building_id={props.building_id}
+        />
+        <Category
+            title="Team"
+            desc="Builder and designer"
+            slug="team"
+            help="https://pages.colouring.london/team"
+            inactive={true}
+            mode={props.mode}
+            building_id={props.building_id}
+        />
+        <Category
+            title="Sustainability"
+            desc="Performance"
+            slug="sustainability"
+            help="https://pages.colouring.london/sustainability"
+            inactive={true}
+            mode={props.mode}
+            building_id={props.building_id}
+        />
+        <Category
+            title="Greenery"
+            desc="Green context"
+            slug="greenery"
+            help="https://pages.colouring.london/greenery"
+            inactive={true}
+            mode={props.mode}
+            building_id={props.building_id}
+        />
+        <Category
+            title="Community"
+            desc="Public asset?"
+            slug="community"
+            help="https://pages.colouring.london/community"
+            inactive={false}
+            mode={props.mode}
+            building_id={props.building_id}
+        />
+        <Category
+            title="Planning"
+            desc="Special controls?"
+            slug="planning"
+            help="https://pages.colouring.london/planning"
+            inactive={true}
+            mode={props.mode}
+            building_id={props.building_id}
+        />
+        <Category
+            title="Like Me?"
+            desc="Adds to the city?"
+            slug="like"
+            help="https://pages.colouring.london/likeme"
+            inactive={false}
+            mode={props.mode}
+            building_id={props.building_id}
+        />
+    </ol>
 )
 
 Categories.propTypes = {
@@ -127,13 +125,14 @@ Categories.propTypes = {
 }
 
 const Category = (props) => (
-    <li className={`category-block ${props.slug}`}>
+    <li className={`category-block ${props.slug} background-${props.slug}`}>
         <NavLink
+            className="category-link"
             to={`/${props.mode}/${props.slug}/building/${props.building_id}.html`}
             title={
                 (props.inactive)?
-                    'Coming soon… Click the ? for more info.'
-                    : 'Show on map'
+                    'Coming soon… Click more info for details.'
+                    : 'View/Edit Map'
             }>
             <h3 className="category">{props.title}</h3>
             <p className="description">{props.desc}</p>
diff --git a/app/src/frontend/building/sidebar.css b/app/src/frontend/building/sidebar.css
index 2c63e677..edaae672 100644
--- a/app/src/frontend/building/sidebar.css
+++ b/app/src/frontend/building/sidebar.css
@@ -98,90 +98,6 @@
 .data-section:first-of-type .section-header {
     border-top-color: #fff;
 }
-.section-header.active.location {
-    border-bottom-color: #edc40b;
-}
-.section-header.location:hover > a::before,
-.section-header.location.active > a::before {
-    color: #edc40b;
-}
-.section-header.active.use {
-    border-bottom-color: #f0ee0c;
-}
-.section-header.use:hover > a::before,
-.section-header.use.active > a::before {
-    color: #f0ee0c;
-}
-.section-header.active.type {
-    border-bottom-color: #ff9100;
-}
-.section-header.type:hover > a::before,
-.section-header.type.active > a::before {
-    color: #ff9100;
-}
-.section-header.active.age {
-    border-bottom-color: #ee5f63;
-}
-.section-header.age:hover > a::before,
-.section-header.age.active > a::before {
-    color: #ee5f63;
-}
-.section-header.active.size {
-    border-bottom-color: #ee91bf;
-}
-.section-header.size:hover > a::before,
-.section-header.size.active > a::before {
-    color: #ee91bf;
-}
-.section-header.active.construction {
-    border-bottom-color: #aa7fa7;
-}
-.section-header.construction:hover > a::before,
-.section-header.construction.active > a::before {
-    color: #aa7fa7;
-}
-.section-header.active.team {
-    border-bottom-color: #6f879c;
-}
-.section-header.team:hover > a::before,
-.section-header.team.active > a::before {
-    color: #6f879c;
-}
-.section-header.active.sustainability {
-    border-bottom-color: #5ec232;
-}
-.section-header.sustainability:hover > a::before,
-.section-header.sustainability.active > a::before {
-    color: #5ec232;
-}
-.section-header.active.greenery {
-    border-bottom-color: #6dbb8b;
-}
-.section-header.greenery:hover > a::before,
-.section-header.greenery.active > a::before {
-    color: #6dbb8b;
-}
-.section-header.active.community {
-    border-bottom-color: #65b7ff;
-}
-.section-header.community:hover > a::before,
-.section-header.community.active > a::before {
-    color: #65b7ff;
-}
-.section-header.active.planning {
-    border-bottom-color: #a1a3a9;
-}
-.section-header.planning:hover > a::before,
-.section-header.planning.active > a::before {
-    color: #a1a3a9;
-}
-.section-header.active.like {
-    border-bottom-color: #9c896d;
-}
-.section-header.like:hover > a::before,
-.section-header.like.active > a::before {
-    color: #9c896d;
-}
 
 .section-header > a::before {
     display: block;
diff --git a/app/src/frontend/styles/colours.css b/app/src/frontend/styles/colours.css
index 23ccbbec..91a9f189 100644
--- a/app/src/frontend/styles/colours.css
+++ b/app/src/frontend/styles/colours.css
@@ -52,3 +52,43 @@
 .pale-brown {
     background-color: #918e6e;
 }
+
+/**
+ * Category colours
+ */
+.background-location {
+    background-color: #edc40b;
+}
+.background-use {
+    background-color: #f0ee0c;
+}
+.background-type {
+    background-color: #ff9100;
+}
+.background-age {
+    background-color: #ee5f63;
+}
+.background-size {
+    background-color: #ee91bf;
+}
+.background-construction {
+    background-color: #aa7fa7;
+}
+.background-team {
+    background-color: #6f879c;
+}
+.background-sustainability {
+    background-color: #5ec232;
+}
+.background-greenery {
+    background-color: #6dbb8b;
+}
+.background-community {
+    background-color: #65b7ff;
+}
+.background-planning {
+    background-color: #a1a3a9;
+}
+.background-like {
+    background-color: #9c896d;
+}