From 1a8e035feac28cd79927dc898df96957ffd6d6de Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Mon, 3 Feb 2020 22:35:32 +0000
Subject: [PATCH] Categories everywhere

---
 app/src/frontend/building/building-view.tsx   |  4 +-
 app/src/frontend/building/categories.css      | 33 ++++++++----
 .../frontend/building/container-header.tsx    |  6 ---
 app/src/frontend/building/multi-edit.tsx      | 52 +++++++++----------
 app/src/frontend/building/sidebar.css         | 26 +++++-----
 app/src/frontend/header.css                   |  3 ++
 app/src/frontend/header.tsx                   |  3 ++
 app/src/frontend/map-app.tsx                  | 12 +++--
 8 files changed, 75 insertions(+), 64 deletions(-)

diff --git a/app/src/frontend/building/building-view.tsx b/app/src/frontend/building/building-view.tsx
index b6b72eb2..69ee1d77 100644
--- a/app/src/frontend/building/building-view.tsx
+++ b/app/src/frontend/building/building-view.tsx
@@ -44,7 +44,7 @@ const BuildingView: React.FunctionComponent<BuildingViewProps> = (props) => {
             return <UseContainer
                 {...props}
                 inactive={false}
-                title="Land Use"
+                title="Current Use"
                 intro="How are buildings used, and how does use change over time? Coming soon…"
                 help="https://pages.colouring.london/use"
             />;
@@ -52,7 +52,7 @@ const BuildingView: React.FunctionComponent<BuildingViewProps> = (props) => {
             return <TypeContainer
                 {...props}
                 inactive={false}
-                title="Type"
+                title="Original Use"
                 intro="How were buildings previously used?"
                 help="https://www.pages.colouring.london/buildingtypology"
             />;
diff --git a/app/src/frontend/building/categories.css b/app/src/frontend/building/categories.css
index ca5878d3..9400ecfe 100644
--- a/app/src/frontend/building/categories.css
+++ b/app/src/frontend/building/categories.css
@@ -1,25 +1,36 @@
 /**
  * Data categories
  */
- .data-category-list {
-  padding: 0 0 0.75rem;
-  text-align: center;
+.data-category-list {
+  padding: 0px 0 10px 9px;
   list-style: none;
-  margin: 0 0 0 0.2rem;
-  text-align: center;
+  margin: 0;
+  text-align: left;
+  max-width: 480px;
+}
+.navbar .data-category-list {
+  padding: 0px 0 0px 15px;
 }
 .data-category-list li {
   position: relative;
   display: inline-block;
   vertical-align: bottom;
-  width: 10rem;
-  height: 10rem;
-  margin: 0.375rem;
-  box-shadow: 0 0 2px 5px #ffffff;
+  width: 110px;
+  height: 110px;
+  margin: 2px;
+  box-shadow: 0 0 2px 3px #ffffff;
   transition: box-shadow 0.2s;
 }
+.navbar .data-category-list li {
+  width: 105px;
+  height: 105px;
+}
+.data-category-list li:nth-child(4n) {
+  margin-right: 0;
+}
 .data-category-list li:hover {
-  box-shadow: 0 0 2px 5px #00ffff;
+  box-shadow: 0 0 2px 3px #00ffff;
+  z-index: 1;
 }
 .data-category-list a {
   color: #222;
@@ -41,6 +52,6 @@
 
 .data-category-list .category {
   text-align: center;
-  font-size: 1.4em;
+  font-size: 1em;
   margin: 0 0 0.5em;
 }
diff --git a/app/src/frontend/building/container-header.tsx b/app/src/frontend/building/container-header.tsx
index 9513a91b..b40bdd39 100644
--- a/app/src/frontend/building/container-header.tsx
+++ b/app/src/frontend/building/container-header.tsx
@@ -1,7 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
-
-import { BackIcon }from '../components/icons';
 
 interface ContainerHeaderProps {
     cat?: string;
@@ -11,9 +8,6 @@ interface ContainerHeaderProps {
 
 const ContainerHeader: React.FunctionComponent<ContainerHeaderProps> = (props) => (
     <header className={`section-header view ${props.cat ? props.cat : ''} ${props.cat ? `background-${props.cat}` : ''}`}>
-        <Link className="icon-button back" to={props.backLink}>
-            <BackIcon />
-        </Link>
         <h2 className="h2">{props.title}</h2>
         <nav className="icon-buttons">
             {props.children}
diff --git a/app/src/frontend/building/multi-edit.tsx b/app/src/frontend/building/multi-edit.tsx
index 19f7a397..ecc39e98 100644
--- a/app/src/frontend/building/multi-edit.tsx
+++ b/app/src/frontend/building/multi-edit.tsx
@@ -1,16 +1,15 @@
-import { parse } from 'query-string';
 import React from 'react';
-import { Link, Redirect, RouteComponentProps } from 'react-router-dom';
+import { Link, Redirect } from 'react-router-dom';
 
 import { parseJsonOrDefault } from '../../helpers';
 import ErrorBox from '../components/error-box';
-import { BackIcon } from '../components/icons';
 import InfoBox from '../components/info-box';
 import { dataFields } from '../data_fields';
 import { User } from '../models/user';
 
 import DataEntry from './data-components/data-entry';
 import Sidebar from './sidebar';
+import Categories from './categories';
 
 interface MultiEditProps {
     user?: User;
@@ -26,6 +25,7 @@ const MultiEdit: React.FC<MultiEditProps> = (props) => {
         // special case for likes
         return (
             <Sidebar>
+                <Categories mode={'view'} />
                 <section className='data-section'>
                     <header className={`section-header view ${props.category} background-${props.category}`}>
                         <h2 className="h2">Like me!</h2>
@@ -54,39 +54,37 @@ const MultiEdit: React.FC<MultiEditProps> = (props) => {
 
     return (
         <Sidebar>
+            <Categories mode={'view'} />
             <section className='data-section'>
                 <header className={`section-header view ${props.category} background-${props.category}`}>
-                    <Link
-                        className="icon-button back"
-                        to={`/edit/${props.category}`}>
-                        <BackIcon />
-                    </Link>
                     <h2 className="h2">Copy {props.category} data</h2>
                 </header>
-                <form>
+                <div className="section-body">
+                    <form>
                     {
                         error ?
                             <ErrorBox msg={error} /> :
                             <InfoBox msg='Click buildings one at a time to colour using the data below' />
                     }
-                {
-                    Object.keys(data).map((key => {
-                        const info = dataFields[key] || {};
-                        return (
-                        <DataEntry
-                            title={info.title || `Unknown field (${key})`}
-                            slug={key}
-                            disabled={true}
-                            value={data[key]}
-                            />
-                        );
-                    }))
-                }
-                </form>
-                <form className='buttons-container'>
-                    <Link to={`/view/${props.category}`} className='btn btn-secondary'>Back to view</Link>
-                    <Link to={`/edit/${props.category}`} className='btn btn-secondary'>Back to edit</Link>
-                </form>
+                    {
+                        Object.keys(data).map((key => {
+                            const info = dataFields[key] || {};
+                            return (
+                            <DataEntry
+                                title={info.title || `Unknown field (${key})`}
+                                slug={key}
+                                disabled={true}
+                                value={data[key]}
+                                />
+                            );
+                        }))
+                    }
+                    </form>
+                    <form className='buttons-container'>
+                        <Link to={`/view/${props.category}`} className='btn btn-secondary'>Back to view</Link>
+                        <Link to={`/edit/${props.category}`} className='btn btn-secondary'>Back to edit</Link>
+                    </form>
+                </div>
             </section>
         </Sidebar>
     );
diff --git a/app/src/frontend/building/sidebar.css b/app/src/frontend/building/sidebar.css
index ff74fe4d..75b209b9 100644
--- a/app/src/frontend/building/sidebar.css
+++ b/app/src/frontend/building/sidebar.css
@@ -8,6 +8,7 @@
     bottom: 0;
     width: 95%;
     width: calc(100% - 40px);
+    border-right: 1px solid #000;
     z-index: 1001;
     transition: transform 0.3s;
     transform: translateX(0);
@@ -49,15 +50,10 @@
     clear: both;
     text-decoration: none;
     color: #222;
-    padding: 0.75rem 0.25rem 0.5rem 0;
+    padding: 0.75rem 0.25rem 0.5rem 0.75rem;
     z-index: 1000;
-}
-
-@media (min-width: 990px) {
-    .section-header {
-        position: sticky;
-        top: 0;
-    }
+    position: sticky;
+    top: 0;
 }
 .section-header h2,
 .section-header .icon-buttons {
@@ -168,11 +164,11 @@
 /**
  * Data list sections
  */
-
- .section-body {
-     margin-top: 0.75em;
-     padding: 0 0.75em;
- }
+.section-body {
+    margin-top: 0.75em;
+    padding: 0 0.75em 5em 0.75em;
+    min-height: 100vh;
+}
 .data-section .h3 {
     margin: 0;
 }
@@ -218,6 +214,10 @@
 .data-section select {
     margin: 0 0 0.5em 0;
 }
+.data-section input[type="checkbox"] {
+    position: static;
+    margin-right: 0.5em;
+}
 .data-list dd {
     margin: 0 0 0.5rem;
     line-height: 1.5;
diff --git a/app/src/frontend/header.css b/app/src/frontend/header.css
index 9d9dc16d..650b94a5 100644
--- a/app/src/frontend/header.css
+++ b/app/src/frontend/header.css
@@ -53,6 +53,9 @@
     background: #fff;
     border-right: 1px solid #000;
 }
+.main-header .navbar-collapse > ul:last-child {
+    padding-bottom: 5rem;
+}
 .navbar-collapse.collapse {
     transform: translateY(-100vh);
 }
diff --git a/app/src/frontend/header.tsx b/app/src/frontend/header.tsx
index 21478915..195795d4 100644
--- a/app/src/frontend/header.tsx
+++ b/app/src/frontend/header.tsx
@@ -5,6 +5,7 @@ import './header.css';
 
 import { Logo } from './components/logo';
 import { User } from './models/user';
+import Categories from './building/categories';
 
 
 interface HeaderProps {
@@ -132,6 +133,8 @@ class Header extends React.Component<HeaderProps, HeaderState> {
                         </li>
                     </ul>
                     <hr />
+                    <Categories mode='view' />
+                    <hr />
                     <ul className="navbar-nav flex-column">
                         <li className="nav-item">
                             <NavLink to="/contact.html" className="nav-link" onClick={this.handleNavigate}>
diff --git a/app/src/frontend/map-app.tsx b/app/src/frontend/map-app.tsx
index d1923093..69854e77 100644
--- a/app/src/frontend/map-app.tsx
+++ b/app/src/frontend/map-app.tsx
@@ -66,7 +66,7 @@ class MapApp extends React.Component<MapAppProps, MapAppState> {
     async fetchLatestRevision() {
         try {
             const {latestRevisionId} = await apiGet(`/api/buildings/revision`);
-            
+
             this.increaseRevision(latestRevisionId);
         } catch(error) {
             console.error(error);
@@ -74,7 +74,7 @@ class MapApp extends React.Component<MapAppProps, MapAppState> {
     }
 
     /**
-     * Fetches building data if a building is selected but no data provided through 
+     * Fetches building data if a building is selected but no data provided through
      * props (from server-side rendering)
      */
     async fetchBuildingData() {
@@ -173,13 +173,13 @@ class MapApp extends React.Component<MapAppProps, MapAppState> {
      */
     colourBuilding(building: Building) {
         const cat = this.props.match.params.category;
-        
+
         if (cat === 'like') {
             this.likeBuilding(building.building_id);
         } else {
             const data = parseJsonOrDefault(this.getMultiEditDataString());
 
-            
+
             if (data != undefined && !Object.values(data).some(x => x == undefined)) {
                 this.updateBuilding(building.building_id, data);
             }
@@ -240,6 +240,7 @@ class MapApp extends React.Component<MapAppProps, MapAppState> {
                     )} />
                     <Route exact path="/:mode/:cat/:building?">
                         <Sidebar>
+                            <Categories mode={mode || 'view'} building_id={building_id} />
                             <BuildingView
                                 mode={viewEditMode}
                                 cat={category}
@@ -252,11 +253,12 @@ class MapApp extends React.Component<MapAppProps, MapAppState> {
                     </Route>
                     <Route exact path="/:mode/:cat/:building/history">
                         <Sidebar>
+                            <Categories mode={mode || 'view'} building_id={building_id} />
                             <EditHistory building={this.state.building} />
                         </Sidebar>
                     </Route>
                     <Route exact path="/:mode(view|edit|multi-edit)"
-                        render={props => (<Redirect to={`/${props.match.params.mode}/categories`} />)} 
+                        render={props => (<Redirect to={`/${props.match.params.mode}/categories`} />)}
                     />
                 </Switch>
                 <ColouringMap