Pull out categories.css

app/src/frontend/building/categories.css

@@ -0,0 +1,27 @@
+/**
+ * Data categories
+ */
+ .data-category-list {
+  padding: 0;
+  text-align: center;
+  list-style: none;
+  margin: 0 -0.75em;
+}
+.data-category-list li {
+  display: inline-block;
+  vertical-align: bottom;
+  width: 9em;
+  height: 9em;
+  margin: 0.375em;
+  padding: 0.1em;
+}
+.data-category-list .category {
+  text-align: center;
+  font-size: 1.5em;
+  margin: 1.4em 0 0.5em;
+}
+.data-category-list .description {
+  text-align: center;
+  font-size: 1em;
+  margin: 0;
+}

app/src/frontend/building/categories.tsx

@@ -4,104 +4,120 @@ import PropTypes from 'prop-types';
 
 import Sidebar from './sidebar';
 
+import './categories.css'
+
 const Categories = (props) => (
     <Sidebar>
-        <Category
+        <nav><ol className="data-category-list">
-            title="Location"
+            <Category
-            slug="location"
+                title="Location"
-            help="https://pages.colouring.london/location"
+                desc="Where's the building?"
-            inactive={false}
+                slug="location"
-            mode={props.mode}
+                help="https://pages.colouring.london/location"
-            building_id={props.building_id}
+                inactive={false}
-        />
+                mode={props.mode}
-        <Category
+                building_id={props.building_id}
-            title="Land Use"
+            />
-            slug="use"
+            <Category
-            help="https://pages.colouring.london/use"
+                title="Land Use"
-            inactive={true}
+                desc="What's it used for?"
-            mode={props.mode}
+                slug="use"
-            building_id={props.building_id}
+                help="https://pages.colouring.london/use"
-        />
+                inactive={true}
-        <Category
+                mode={props.mode}
-            title="Type"
+                building_id={props.building_id}
-            slug="type"
+            />
-            help="https://pages.colouring.london/buildingtypology"
+            <Category
-            inactive={true}
+                title="Type"
-            mode={props.mode}
+                desc="Building type"
-            building_id={props.building_id}
+                slug="type"
-        />
+                help="https://pages.colouring.london/buildingtypology"
-        <Category
+                inactive={true}
-            title="Age"
+                mode={props.mode}
-            slug="age"
+                building_id={props.building_id}
-            help="https://pages.colouring.london/age"
+            />
-            inactive={false}
+            <Category
-            mode={props.mode}
+                title="Age"
-            building_id={props.building_id}
+                desc="Age and history"
-        />
+                slug="age"
-        <Category
+                help="https://pages.colouring.london/age"
-            title="Size &amp; Shape"
+                inactive={false}
-            slug="size"
+                mode={props.mode}
-            help="https://pages.colouring.london/shapeandsize"
+                building_id={props.building_id}
-            inactive={false}
+            />
-            mode={props.mode}
+            <Category
-            building_id={props.building_id}
+                title="Size &amp; Shape"
-        />
+                desc="Form and scale"
-        <Category
+                slug="size"
-            title="Construction"
+                help="https://pages.colouring.london/shapeandsize"
-            slug="construction"
+                inactive={false}
-            help="https://pages.colouring.london/construction"
+                mode={props.mode}
-            inactive={true}
+                building_id={props.building_id}
-            mode={props.mode}
+            />
-            building_id={props.building_id}
+            <Category
-        />
+                title="Construction"
-        <Category
+                desc="Methods and materials"
-            title="Team"
+                slug="construction"
-            slug="team"
+                help="https://pages.colouring.london/construction"
-            help="https://pages.colouring.london/team"
+                inactive={true}
-            inactive={true}
+                mode={props.mode}
-            mode={props.mode}
+                building_id={props.building_id}
-            building_id={props.building_id}
+            />
-        />
+            <Category
-        <Category
+                title="Team"
-            title="Sustainability"
+                desc="Builder and designer"
-            slug="sustainability"
+                slug="team"
-            help="https://pages.colouring.london/sustainability"
+                help="https://pages.colouring.london/team"
-            inactive={true}
+                inactive={true}
-            mode={props.mode}
+                mode={props.mode}
-            building_id={props.building_id}
+                building_id={props.building_id}
-        />
+            />
-        <Category
+            <Category
-            title="Greenery"
+                title="Sustainability"
-            slug="greenery"
+                desc="Performance"
-            help="https://pages.colouring.london/greenery"
+                slug="sustainability"
-            inactive={true}
+                help="https://pages.colouring.london/sustainability"
-            mode={props.mode}
+                inactive={true}
-            building_id={props.building_id}
+                mode={props.mode}
-        />
+                building_id={props.building_id}
-        <Category
+            />
-            title="Community"
+            <Category
-            slug="community"
+                title="Greenery"
-            help="https://pages.colouring.london/community"
+                desc="Green context"
-            inactive={false}
+                slug="greenery"
-            mode={props.mode}
+                help="https://pages.colouring.london/greenery"
-            building_id={props.building_id}
+                inactive={true}
-        />
+                mode={props.mode}
-        <Category
+                building_id={props.building_id}
-            title="Planning"
+            />
-            slug="planning"
+            <Category
-            help="https://pages.colouring.london/planning"
+                title="Community"
-            inactive={true}
+                desc="Public asset?"
-            mode={props.mode}
+                slug="community"
-            building_id={props.building_id}
+                help="https://pages.colouring.london/community"
-        />
+                inactive={false}
-        <Category
+                mode={props.mode}
-            title="Like Me!"
+                building_id={props.building_id}
-            slug="like"
+            />
-            help="https://pages.colouring.london/likeme"
+            <Category
-            inactive={false}
+                title="Planning"
-            mode={props.mode}
+                desc="Special controls?"
-            building_id={props.building_id}
+                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>
 )
 
@@ -111,32 +127,26 @@ Categories.propTypes = {
 }
 
 const Category = (props) => (
-    <section className={(props.inactive? 'inactive ': '') + 'data-section legend'}>
+    <li className={`category-block ${props.slug}`}>
-        <header className={`section-header ${props.mode} ${props.slug}`}>
+        <NavLink
-            <NavLink
+            to={`/${props.mode}/${props.slug}/building/${props.building_id}.html`}
-                to={`/${props.mode}/${props.slug}/building/${props.building_id}.html`}
+            title={
-                title={
+                (props.inactive)?
-                    (props.inactive)?
+                    'Coming soon… Click the ? for more info.'
-                        'Coming soon… Click the ? for more info.'
+                    : 'Show on map'
-                        : 'Show on map'
+            }>
-                }>
+            <h3 className="category">{props.title}</h3>
-                <h3 className="h3">{props.title}</h3>
+            <p className="description">{props.desc}</p>
-            </NavLink>
+        </NavLink>
-            <nav className="icon-buttons">
+        <a className="icon-button help" href={props.help}>
-                {
+            More info
-                    props.help?
+        </a>
-                        <a className="icon-button help" href={props.help}>
+    </li>
-                        Info
-                        </a>
-                        : null
-                }
-            </nav>
-        </header>
-    </section>
 )
 
 Category.propTypes = {
     title: PropTypes.string,
+    desc: PropTypes.string,
     slug: PropTypes.string,
     help: PropTypes.string,
     inactive: PropTypes.bool,

app/src/frontend/pages/about.css

@@ -52,31 +52,3 @@
 .carousel.active .carousel-content li.current {
     display: block;
 }
-
-/**
- * Data categories
- */
-.data-category-list {
-    padding: 0;
-    text-align: center;
-    list-style: none;
-    margin: 0 -0.75em;
-}
-.data-category-list li {
-    display: inline-block;
-    vertical-align: bottom;
-    width: 9em;
-    height: 9em;
-    margin: 0.375em;
-    padding: 0.1em;
-}
-.data-category-list .category {
-    text-align: center;
-    font-size: 1.5em;
-    margin: 1.4em 0 0.5em;
-}
-.data-category-list .description {
-    text-align: center;
-    font-size: 1em;
-    margin: 0;
-}

app/src/frontend/pages/about.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import SupporterLogos from '../components/supporter-logos';
 import './about.css';
+import Categories from '../building/categories';
 
 const AboutPage = () => (
     <article>
@@ -71,56 +72,7 @@ const AboutPage = () => (
         research.
 
             </p>
-            <ol className="data-category-list">
+            <Categories building_id={2503371} mode="view" />
-                <li className="bold-yellow">
-                    <h3 className="category">Location</h3>
-                    <p className="description">Where is it?</p>
-                </li>
-                <li className="bright-yellow">
-                    <h3 className="category">Use</h3>
-                    <p className="description">How is it used?</p>
-                </li>
-                <li className="bold-orange">
-                    <h3 className="category">Type</h3>
-                    <p className="description">How was it first used?</p>
-                </li>
-                <li className="red">
-                    <h3 className="category">Age</h3>
-                    <p className="description">When was it built?</p>
-                </li>
-                <li className="pastel-pink">
-                    <h3 className="category">Size</h3>
-                    <p className="description">How big is it?</p>
-                </li>
-                <li className="pastel-purple">
-                    <h3 className="category">Construction</h3>
-                    <p className="description">How is it built?</p>
-                </li>
-                <li className="blue-grey">
-                    <h3 className="category">Design/Build</h3>
-                    <p className="description">Who built it?</p>
-                </li>
-                <li className="bright-green">
-                    <h3 className="category">Street Front</h3>
-                    <p className="description">How does it relate to the street?</p>
-                </li>
-                <li className="pastel-green">
-                    <h3 className="category">Greenery</h3>
-                    <p className="description">Is it near a tree or park?</p>
-                </li>
-                <li className="bright-blue">
-                    <h3 className="category">Protection</h3>
-                    <p className="description">Is it designated?</p>
-                </li>
-                <li className="pale-grey">
-                    <h3 className="category">Demolitions</h3>
-                    <p className="description">How many rebuilds on the site?</p>
-                </li>
-                <li className="pale-brown">
-                    <h3 className="category">Like Me?</h3>
-                    <p className="description">Do you like it?</p>
-                </li>
-            </ol>
         </div>
         <hr/>
         <div className="main-col">

app/src/frontend/styles/forms.css

@@ -41,17 +41,3 @@ form .btn {
     margin-right: 0;
     text-align: center;
 }
-.btn.btn-half {
-    width: 100%;
-    margin-bottom: 0.25rem;
-}
-@media (min-width: 768px) {
-    .btn.btn-half {
-        width: 49%;
-        margin-left: 0;
-        margin-right: 2%;
-    }
-    .btn.btn-half:nth-child(2n) {
-        margin-right: 0;
-    }
-}