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,10 +4,14 @@ import PropTypes from 'prop-types';
 
 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}
@@ -16,6 +20,7 @@ const Categories = (props) => (
             />
             <Category
                 title="Land Use"
+                desc="What's it used for?"
                 slug="use"
                 help="https://pages.colouring.london/use"
                 inactive={true}
@@ -24,6 +29,7 @@ const Categories = (props) => (
             />
             <Category
                 title="Type"
+                desc="Building type"
                 slug="type"
                 help="https://pages.colouring.london/buildingtypology"
                 inactive={true}
@@ -32,6 +38,7 @@ const Categories = (props) => (
             />
             <Category
                 title="Age"
+                desc="Age and history"
                 slug="age"
                 help="https://pages.colouring.london/age"
                 inactive={false}
@@ -40,6 +47,7 @@ const Categories = (props) => (
             />
             <Category
                 title="Size &amp; Shape"
+                desc="Form and scale"
                 slug="size"
                 help="https://pages.colouring.london/shapeandsize"
                 inactive={false}
@@ -48,6 +56,7 @@ const Categories = (props) => (
             />
             <Category
                 title="Construction"
+                desc="Methods and materials"
                 slug="construction"
                 help="https://pages.colouring.london/construction"
                 inactive={true}
@@ -56,6 +65,7 @@ const Categories = (props) => (
             />
             <Category
                 title="Team"
+                desc="Builder and designer"
                 slug="team"
                 help="https://pages.colouring.london/team"
                 inactive={true}
@@ -64,6 +74,7 @@ const Categories = (props) => (
             />
             <Category
                 title="Sustainability"
+                desc="Performance"
                 slug="sustainability"
                 help="https://pages.colouring.london/sustainability"
                 inactive={true}
@@ -72,6 +83,7 @@ const Categories = (props) => (
             />
             <Category
                 title="Greenery"
+                desc="Green context"
                 slug="greenery"
                 help="https://pages.colouring.london/greenery"
                 inactive={true}
@@ -80,6 +92,7 @@ const Categories = (props) => (
             />
             <Category
                 title="Community"
+                desc="Public asset?"
                 slug="community"
                 help="https://pages.colouring.london/community"
                 inactive={false}
@@ -88,6 +101,7 @@ const Categories = (props) => (
             />
             <Category
                 title="Planning"
+                desc="Special controls?"
                 slug="planning"
                 help="https://pages.colouring.london/planning"
                 inactive={true}
@@ -95,13 +109,15 @@ const Categories = (props) => (
                 building_id={props.building_id}
             />
             <Category
-            title="Like Me!"
+                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,8 +127,7 @@ 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
             to={`/${props.mode}/${props.slug}/building/${props.building_id}.html`}
             title={
@@ -120,23 +135,18 @@ const Category = (props) => (
                     'Coming soon… Click the ? for more info.'
                     : 'Show on map'
             }>
-                <h3 className="h3">{props.title}</h3>
+            <h3 className="category">{props.title}</h3>
+            <p className="description">{props.desc}</p>
         </NavLink>
-            <nav className="icon-buttons">
-                {
-                    props.help?
         <a className="icon-button help" href={props.help}>
-                        Info
+            More info
         </a>
-                        : null
+    </li>
-                }
-            </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;
-    }
-}