Create dynamics section, move lik to community

app/src/frontend/building/building-view.tsx

@@ -6,7 +6,7 @@ import BuildingNotFound from './building-not-found';
 import AgeContainer from './data-containers/age';
 import CommunityContainer from './data-containers/community';
 import ConstructionContainer from './data-containers/construction';
-import LikeContainer from './data-containers/like';
+import DynamicsContainer from './data-containers/dynamics';
 import LocationContainer from './data-containers/location';
 import PlanningContainer from './data-containers/planning';
 import SizeContainer from './data-containers/size';
@@ -108,7 +108,6 @@ const BuildingView: React.FunctionComponent<BuildingViewProps> = (props) => {
                 title="Community"
                 intro="How does this building work for the local community?"
                 help="https://pages.colouring.london/community"
-                inactive={true}
             />;
         case 'planning':
             return <PlanningContainer
@@ -117,12 +116,13 @@ const BuildingView: React.FunctionComponent<BuildingViewProps> = (props) => {
                 intro="Planning controls relating to protection and reuse."
                 help="https://pages.colouring.london/planning"
             />;
-        case 'like':
-            return <LikeContainer
+        case 'dynamics':
+            return <DynamicsContainer
                 {...props}
-                title="Like Me!"
-                intro="Do you like the building and think it contributes to the city?"
-                help="https://pages.colouring.london/likeme"
+                title="Dynamics"
+                intro="How has the site of this building changed over time?"
+                help="https://pages.colouring.london/buildingcategories"
+                inactive={true}
             />;
         default:
             return <BuildingNotFound mode="view" />;

app/src/frontend/building/categories.css

@@ -44,8 +44,3 @@
   font-size: 1.4em;
   margin: 0 0 0.5em;
 }
-.data-category-list .description {
-  text-align: center;
-  font-size: 0.9em;
-  margin: 0;
-}

app/src/frontend/building/categories.tsx

@@ -12,7 +12,6 @@ const Categories: React.FC<CategoriesProps> = (props) => (
     <ol className="data-category-list">
         <Category
             title="Location"
-            desc="Where's the building?"
             slug="location"
             help="https://pages.colouring.london/location"
             inactive={false}
@@ -20,8 +19,7 @@ const Categories: React.FC<CategoriesProps> = (props) => (
             building_id={props.building_id}
         />
         <Category
-            title="Land Use"
-            desc="What's it used for?"
+            title="Current Use"
             slug="use"
             help="https://pages.colouring.london/use"
             inactive={true}
@@ -29,8 +27,7 @@ const Categories: React.FC<CategoriesProps> = (props) => (
             building_id={props.building_id}
         />
         <Category
-            title="Type"
-            desc="Building type"
+            title="Original Use"
             slug="type"
             help="https://pages.colouring.london/buildingtypology"
             inactive={false}
@@ -39,7 +36,6 @@ const Categories: React.FC<CategoriesProps> = (props) => (
         />
         <Category
             title="Age"
-            desc="Age & history"
             slug="age"
             help="https://pages.colouring.london/age"
             inactive={false}
@@ -48,7 +44,6 @@ const Categories: React.FC<CategoriesProps> = (props) => (
         />
         <Category
             title="Size &amp; Shape"
-            desc="Form & scale"
             slug="size"
             help="https://pages.colouring.london/shapeandsize"
             inactive={false}
@@ -57,7 +52,6 @@ const Categories: React.FC<CategoriesProps> = (props) => (
         />
         <Category
             title="Construction"
-            desc="Methods & materials"
             slug="construction"
             help="https://pages.colouring.london/construction"
             inactive={true}
@@ -66,7 +60,6 @@ const Categories: React.FC<CategoriesProps> = (props) => (
         />
         <Category
             title="Streetscape"
-            desc="Environment"
             slug="streetscape"
             help="https://pages.colouring.london/greenery"
             inactive={true}
@@ -75,34 +68,14 @@ const Categories: React.FC<CategoriesProps> = (props) => (
         />
         <Category
             title="Team"
-            desc="Builder & 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={false}
-            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}
@@ -110,10 +83,25 @@ const Categories: React.FC<CategoriesProps> = (props) => (
             building_id={props.building_id}
         />
         <Category
-            title="Like Me?"
-            desc="Adds to the city?"
-            slug="like"
-            help="https://pages.colouring.london/likeme"
+            title="Sustainability"
+            slug="sustainability"
+            help="https://pages.colouring.london/sustainability"
+            inactive={false}
+            mode={props.mode}
+            building_id={props.building_id}
+        />
+        <Category
+            title="Dynamics"
+            slug="dynamics"
+            help="https://pages.colouring.london/dynamics"
+            inactive={true}
+            mode={props.mode}
+            building_id={props.building_id}
+        />
+        <Category
+            title="Community"
+            slug="community"
+            help="https://pages.colouring.london/community"
             inactive={false}
             mode={props.mode}
             building_id={props.building_id}
@@ -126,7 +114,6 @@ interface CategoryProps {
     building_id?: number;
     slug: string;
     title: string;
-    desc: string;
     help: string;
     inactive: boolean;
 }
@@ -147,7 +134,6 @@ const Category: React.FC<CategoryProps> = (props) => {
             }>
                 <div className="category-title-container">
                     <h3 className="category">{props.title}</h3>
-                    <p className="description">{props.desc}</p>
                 </div>
         </NavLink>
     </li>

app/src/frontend/building/data-containers/community.tsx

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 
 import withCopyEdit from '../data-container';
+import LikeDataEntry from '../data-components/like-data-entry';
 
 import { CategoryViewProps } from './category-view-props';
 
@@ -9,6 +10,12 @@ import { CategoryViewProps } from './category-view-props';
 */
 const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => (
     <Fragment>
+        <LikeDataEntry
+            userLike={props.building_like}
+            totalLikes={props.building.likes_total}
+            mode={props.mode}
+            onLike={props.onLike}
+            />
         <p className="data-intro">{props.intro}</p>
         <ul className="data-list">
             <li>Is this a publicly owned building?</li>

app/src/frontend/building/data-containers/dynamics.tsx

@@ -0,0 +1,24 @@
+import React, { Fragment } from 'react';
+
+import withCopyEdit from '../data-container';
+
+import { CategoryViewProps } from './category-view-props';
+
+/**
+* Dynamics view/edit section
+*/
+const DynamicsView: React.FunctionComponent<CategoryViewProps> = (props) => (
+    <Fragment>
+        <p className="data-intro">{props.intro}</p>
+        <ul className="data-list">
+            <li>Under threat of demolition (partial/complete?</li>
+            <li>Demolition permit no. issued </li>
+            <li>Whole building demolitions for current year</li>
+            <li>Whole building demolitions since 2000</li>
+            <li>Pairs of construction and demolition dates for previous buildings built on any part of the site</li>
+        </ul>
+    </Fragment>
+);
+const DynamicsContainer = withCopyEdit(DynamicsView);
+
+export default DynamicsContainer;

app/src/frontend/building/data-containers/like.tsx

@@ -1,23 +0,0 @@
-import React, { Fragment } from 'react';
-
-import LikeDataEntry from '../data-components/like-data-entry';
-import withCopyEdit from '../data-container';
-
-import { CategoryViewProps } from './category-view-props';
-
-/**
-* Like view/edit section
-*/
-const LikeView: React.FunctionComponent<CategoryViewProps> = (props) => (
-    <Fragment>
-        <LikeDataEntry
-            userLike={props.building_like}
-            totalLikes={props.building.likes_total}
-            mode={props.mode}
-            onLike={props.onLike}
-            />
-    </Fragment>
-);
-const LikeContainer = withCopyEdit(LikeView);
-
-export default LikeContainer;

app/src/frontend/building/sidebar.css

@@ -63,6 +63,10 @@
 .section-header .icon-buttons {
     display: inline-block;
 }
+.section-header .h2 {
+    font-size: 1.5rem;
+    margin: 0.25rem 0;
+}
 .section-header .icon-buttons {
     position: absolute;
     right: 0;
@@ -173,7 +177,7 @@
     margin: 0;
 }
 .data-intro {
-    padding: 0 0.5rem 0 2.25rem;
+    padding: 0 0.5rem 0 0;
     margin-top: 0.5rem;
 }
 .data-section p {
@@ -181,7 +185,7 @@
     margin: 0.5rem 0;
 }
 .data-section ul {
-    padding-left: 3.333rem;
+    padding-left: 1.333rem;
     font-size: 1rem;
 }
 .data-section li {

app/src/frontend/map/legend.tsx

@@ -111,11 +111,11 @@ const LEGEND_CONFIG = {
             { color: '#73ebaf', text: 'within conservation area' },
         ]
     },
-    community: {
-        title: 'Community',
+    dynamics: {
+        title: 'Dynamics',
         elements: []
     },
-    like: {
+    community: {
         title: 'Like Me',
         elements: [
             { color: '#bd0026', text: '👍👍👍👍 100+' },

app/src/frontend/map/map.tsx

@@ -123,7 +123,7 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> {
 
 
         const boundaryStyleFn = () => ({color: '#bbb', fill: false});
-        const boundaryLayer = this.state.boundary && 
+        const boundaryLayer = this.state.boundary &&
                 <GeoJSON data={this.state.boundary} style={boundaryStyleFn}/>;
 
         // colour-data tiles
@@ -132,7 +132,7 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> {
             age: 'date_year',
             size: 'size_height',
             location: 'location',
-            like: 'likes',
+            community: 'likes',
             planning: 'conservation_area',
             sustainability: 'sust_dec',
             type: 'building_attachment_form',

app/src/frontend/styles/colours.css

@@ -80,15 +80,15 @@
 .background-team {
     background-color: #7cbf39;
 }
-.background-sustainability {
+.background-planning {
     background-color: #57c28e;
 }
-.background-community {
+.background-sustainability {
     background-color: #6bb1e3;
 }
-.background-planning {
+.background-dynamics {
     background-color: #aaaaaa;
 }
-.background-like {
+.background-community {
     background-color: #a3916f;
 }