diff --git a/app/.eslintrc b/app/.eslintrc index 8f94e0c1..6780c75f 100644 --- a/app/.eslintrc +++ b/app/.eslintrc @@ -21,7 +21,8 @@ "no-console": "off", "strict": ["error", "global"], "curly": "warn", - "quotes": ["warn", "single"] + "quotes": ["warn", "single"], + "indent": ["warn", 4] }, "plugins": [ "react" diff --git a/app/src/client.js b/app/src/client.js index 4c73671b..bfc90364 100644 --- a/app/src/client.js +++ b/app/src/client.js @@ -11,12 +11,12 @@ import App from './frontend/app'; const data = window.__PRELOADED_STATE__; hydrate( - - - , - document.getElementById('root') + + + , + document.getElementById('root') ); if (module.hot) { - module.hot.accept(); + module.hot.accept(); } diff --git a/app/src/frontend/about.js b/app/src/frontend/about.js index 8d7fc774..5a7bc14f 100644 --- a/app/src/frontend/about.js +++ b/app/src/frontend/about.js @@ -5,51 +5,51 @@ import './about.css'; const AboutPage = () => (
-
-

+
+

Can you help us capture information on every building in London? -

-

+

+

How many buildings are there in London? What are their characteristics? Where are they located and how do they contribute to the city? How adaptable are they? How long will they last, and what are the environmental and socio-economic implications of demolition? -

-

+

+

Colouring London is being designed to address these questions by crowdsourcing and visualising information on London’s buildings. We’re releasing the prototype for testing in the late summer. See the slideshow below for what it will look like. -

-
- Sign up for updates -
-
- -
    -
  • Welcome
    • -
  • Categories
    • -
  • Add/edit data
    • -
  • View maps
    • -
  • Download data
    • -
  • Showcase
    • -
  • Partners
    • -
- -
-
- +

+
+ Sign up for updates +
+
+ +
    +
  • Welcome
    • +
  • Categories
    • +
  • Add/edit data
    • +
  • View maps
    • +
  • Download data
    • +
  • Showcase
    • +
  • Partners
    • +
+ +
+
+ View online exhibition -
-
-
-
-

+ +

+
+
+

Colouring London is being designed and built by the Centre for Advanced Spatial Analysis (CASA), University College London and funded by Historic England. @@ -57,159 +57,159 @@ const AboutPage = () => ( facilitated by the GLA, and giving access to its API and technical support. It will launch in 2019. -

- -
-
-
-

Data Categories

-

+

+ + +
+
+

Data Categories

+

12 categories have been chosen in consultation with specialists working in a range of areas, from energy analysis and sustainable urban planning and design to building conservation, community planning, architecture and historical research. -

-
    -
  1. -

    Location

    -

    Where is it?

    -
    2. -
  2. -

    Use

    -

    How is it used?

    -
    3. -
  3. -

    Type

    -

    How was it first used?

    -
    4. -
  4. -

    Age

    -

    When was it built?

    -
    5. -
  5. -

    Size

    -

    How big is it?

    -
    6. -
  6. -

    Construction

    -

    How is it built?

    -
    7. -
  7. -

    Design/Build

    -

    Who built it?

    -
    8. -
  8. -

    Street Front

    -

    How does it relate to the street?

    -
    9. -
  9. -

    Greenery

    -

    Is it near a tree or park?

    -
    10. -
  10. -

    Protection

    -

    Is it designated?

    -
    11. -
  11. -

    Demolitions

    -

    How many rebuilds on the site?

    -
    12. -
  12. -

    Like Me?

    -

    Do you like it?

    -
    13. -
-
-
-
-

Once built, our platform will allow you to:

-
-
+

+
    +
  1. +

    Location

    +

    Where is it?

    +
    2. +
  2. +

    Use

    +

    How is it used?

    +
    3. +
  3. +

    Type

    +

    How was it first used?

    +
    4. +
  4. +

    Age

    +

    When was it built?

    +
    5. +
  5. +

    Size

    +

    How big is it?

    +
    6. +
  6. +

    Construction

    +

    How is it built?

    +
    7. +
  7. +

    Design/Build

    +

    Who built it?

    +
    8. +
  8. +

    Street Front

    +

    How does it relate to the street?

    +
    9. +
  9. +

    Greenery

    +

    Is it near a tree or park?

    +
    10. +
  10. +

    Protection

    +

    Is it designated?

    +
    11. +
  11. +

    Demolitions

    +

    How many rebuilds on the site?

    +
    12. +
  12. +

    Like Me?

    +

    Do you like it?

    +
    13. +
+
+
-

View maps

-

+

Once built, our platform will allow you to:

+
+
+
+

View maps

+

To view the data, navigate to the ‘View Maps’ page and find the category that interests you. -

- Preview of view maps page -
-
-
-
-

Add and edit data

-

+

+ Preview of view maps page +
+
+
+
+

Add and edit data

+

Find a building and add or edit data for any of the 12 core categories. -

- Preview of add/edit data page -
-
-
-
-

See how people are using our data

-

+

+ Preview of add/edit data page +
+
+
+
+

See how people are using our data

+

Find links to visualisations and analysis, art projects and applications relating to the evolution of London, housing, energy, planning, heritage and history—or something we haven’t imagined yet. -

- Preview of data showcase page -
-
+

+ Preview of data showcase page + + -
-
-

Download, remix and reuse

-

+

+
+

Download, remix and reuse

+

Access bulk downloads of data created through the project to use and reuse under a liberal open data license. Let us know and we’ll feature showcase projects on the Colouring London site. -

- Preview of download page -
-
+

+ Preview of download page +
+
-
+
-
-

Keep in touch

-

+

Keep in touch

+

Receive occasional newsletters about the project as it develops. You can read previous newsletters in our newsletter archive. + href="https://tinyletter.com/colouringlondon/archive">newsletter archive. -

- - - - - +

+ + + + + powered by TinyLetter. We’ll never share your email address. - -
- + +
+ +
+
- -
); diff --git a/app/src/frontend/app.js b/app/src/frontend/app.js index 52033d0f..d0ac4f3f 100644 --- a/app/src/frontend/app.js +++ b/app/src/frontend/app.js @@ -59,11 +59,11 @@ class App extends React.Component { } selectBuilding(building) { - // get UPRNs and update + // get UPRNs and update fetch(`/building/${building.building_id}/uprns.json`, { method: 'GET', headers:{ - 'Content-Type': 'application/json' + 'Content-Type': 'application/json' }, credentials: 'same-origin' }).then( @@ -84,7 +84,7 @@ class App extends React.Component { fetch(`/building/${building.building_id}/like.json`, { method: 'GET', headers:{ - 'Content-Type': 'application/json' + 'Content-Type': 'application/json' }, credentials: 'same-origin' }).then( @@ -114,13 +114,13 @@ class App extends React.Component { + /> ) } /> ( + /> ) } /> ( + /> ) } /> ( + /> ) } /> @@ -146,7 +146,7 @@ class App extends React.Component { {...props} building={this.state.building} selectBuilding={this.selectBuilding} - /> + /> ) } /> @@ -160,7 +160,7 @@ class App extends React.Component { user={this.state.user} updateUser={this.updateUser} logout={this.logout} - /> + /> diff --git a/app/src/frontend/app.test.js b/app/src/frontend/app.test.js index 03cbefe9..30223eee 100644 --- a/app/src/frontend/app.test.js +++ b/app/src/frontend/app.test.js @@ -5,13 +5,13 @@ import { MemoryRouter } from 'react-router-dom'; import App from './app'; describe('', () => { - test('renders without exploding', () => { - const div = document.createElement('div'); - ReactDOM.render( - - - , - div - ); - }); + test('renders without exploding', () => { + const div = document.createElement('div'); + ReactDOM.render( + + + , + div + ); + }); }); diff --git a/app/src/frontend/building-edit.js b/app/src/frontend/building-edit.js index 93e25b80..1c7f28e8 100644 --- a/app/src/frontend/building-edit.js +++ b/app/src/frontend/building-edit.js @@ -121,7 +121,7 @@ class EditForm extends Component { fetch(`/building/${this.props.building_id}/like.json`, { method: 'POST', headers:{ - 'Content-Type': 'application/json' + 'Content-Type': 'application/json' }, credentials: 'same-origin', body: JSON.stringify({like: like}) @@ -149,7 +149,7 @@ class EditForm extends Component { method: 'POST', body: JSON.stringify(this.state), headers:{ - 'Content-Type': 'application/json' + 'Content-Type': 'application/json' }, credentials: 'same-origin' }).then( @@ -179,82 +179,82 @@ class EditForm extends Component {

{this.props.title}

{ - match? ( - !this.props.inactive? -
- { - this.props.slug === 'location'? - - : null - } - - { - this.props.fields.map((props) => { - switch (props.type) { - case 'text': - return + { + this.props.slug === 'location'? + + : null + } + + { + this.props.fields.map((props) => { + switch (props.type) { + case 'text': + return - case 'text_list': - return - case 'text_long': - return - case 'number': - return - case 'year_estimator': - return - case 'text_multi': - return - case 'checkbox': - return - case 'like': - return - default: - return null + default: + return null + } + }) } - }) - } - + - { - (this.props.slug === 'like')? // special-case for likes - null : -
- -
- } - - :
- ) : null - } + { + (this.props.slug === 'like')? // special-case for likes + null : +
+ +
+ } + + :
+ ) : null + } ) } @@ -270,7 +270,7 @@ const TextInput = (props) => ( disabled={props.disabled} placeholder={props.placeholder} onChange={props.handleChange} - /> + /> ); @@ -327,30 +327,30 @@ class MultiTextInput extends Component { render() { const values = this.getValues(); return ( - - + ) } } @@ -382,7 +382,7 @@ const NumberInput = (props) => ( value={props.value || ''} disabled={props.disabled} onChange={props.handleChange} - /> + /> ); @@ -403,7 +403,7 @@ class YearEstimator extends Component { render() { return ( + value={this.props.value} key={this.props.slug} /> ) } } @@ -415,7 +415,7 @@ const CheckboxInput = (props) => ( checked={!!props.value} disabled={props.disabled} onChange={props.handleChange} - /> + />