Categories everywhere

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"
             />;

app/src/frontend/building/categories.css

@@ -2,24 +2,35 @@
  * Data categories
  */
 .data-category-list {
-  padding: 0 0 0.75rem;
+  padding: 0px 0 10px 9px;
-  text-align: center;
   list-style: none;
-  margin: 0 0 0 0.2rem;
+  margin: 0;
-  text-align: center;
+  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;
+  width: 110px;
-  height: 10rem;
+  height: 110px;
-  margin: 0.375rem;
+  margin: 2px;
-  box-shadow: 0 0 2px 5px #ffffff;
+  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;
 }

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}

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,15 +54,12 @@ 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>
+                <div className="section-body">
                     <form>
                     {
                         error ?
@@ -87,6 +84,7 @@ const MultiEdit: React.FC<MultiEditProps> = (props) => {
                         <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>
     );

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,16 +50,11 @@
     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;
 }
-}
 .section-header h2,
 .section-header .icon-buttons {
     display: inline-block;
@@ -168,10 +164,10 @@
 /**
  * Data list sections
  */
-
 .section-body {
     margin-top: 0.75em;
-     padding: 0 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;

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);
 }

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}>

app/src/frontend/map-app.tsx

@@ -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,6 +253,7 @@ 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>