Add logos block to login/register pages (Closes #35)

.gitignore

@@ -5,6 +5,7 @@ node_modules
 *config.json
 *.log
 ecosystem.config.js
+app/start.sh
 
 # Data
 etl/cache/*

app/src/frontend/about.css

@@ -53,24 +53,6 @@
     display: block;
 }
 
-/**
- * Logos
- */
-.logo-list {
-    text-align: center;
-    padding: 0;
-    list-style: none;
-}
-.logo-list li {
-    display: inline-block;
-    width: 8em;
-    padding: 0 0.25em;
-    vertical-align: middle;
-}
-.logo-list li:first-child {
-    width: 4em;
-}
-
 /**
  * Data categories
  */

app/src/frontend/about.js

@@ -1,10 +1,11 @@
 import React from 'react';
 
+import SupporterLogos from './supporter-logos';
 import './about.css';
 
 const AboutPage = () => (
     <article>
-    <div className="main-col">
+    <section className="main-col">
         <h1 className="h2">
         Can you help us capture information on every building in London?
         </h1>
@@ -45,9 +46,9 @@ const AboutPage = () => (
                href="files/colouring-london-online-exhibition.pdf">
                View online exhibition</a>
         </div>
-    </div>
+    </section>
     <hr/>
-    <div className="main-col">
+    <section className="main-col">
         <p>
 
         Colouring London is being designed and built by the Centre for Advanced Spatial
@@ -57,39 +58,8 @@ const AboutPage = () => (
         will launch in 2019.
 
         </p>
-        <ul className="logo-list">
+        <SupporterLogos />
-            <li>
+    </section>
-                <a href="https://www.ucl.ac.uk/bartlett/casa/">
-                    <img src="images/logo-casa.png"
-                         alt="Centre for Advanced Spatial Analysis (CASA)" />
-                </a>
-            </li>
-            <li>
-                <a href="https://www.ucl.ac.uk/">
-                    <img src="images/logo-ucl.png"
-                         alt="University College London" />
-                </a>
-            </li>
-            <li>
-                <a href="https://www.historicengland.org.uk/">
-                    <img src="images/logo-he.png"
-                         alt="Historic England" />
-                </a>
-            </li>
-            <li>
-                <a href="https://www.ordnancesurvey.co.uk/">
-                    <img src="images/logo-os.png"
-                         alt="Ordnance Survey" />
-                </a>
-            </li>
-            <li>
-                <a href="https://www.london.gov.uk/">
-                    <img src="images/logo-gla.png"
-                         alt="Supported by the Mayor of London" />
-                </a>
-            </li>
-        </ul>
-    </div>
     <hr/>
     <div className="main-col">
         <h2 className="h1">Data Categories</h2>
@@ -156,7 +126,7 @@ const AboutPage = () => (
     <div className="main-col">
         <h2 className="h1">Once built, our platform will allow you to:</h2>
     </div>
-    <section className="pale-pink">
+    <section className="pale-pink color-block">
         <div className="main-col">
             <h3 className="h2">View maps</h3>
             <p>
@@ -169,7 +139,7 @@ const AboutPage = () => (
                  alt="Preview of view maps page" />
         </div>
     </section>
-    <section className="pale-yellow">
+    <section className="pale-yellow color-block">
         <div className="main-col">
             <h3 className="h2">Add and edit data</h3>
             <p>
@@ -181,7 +151,7 @@ const AboutPage = () => (
                  alt="Preview of add/edit data page" />
         </div>
     </section>
-    <section className="pale-orange">
+    <section className="pale-orange color-block">
         <div className="main-col">
             <h3 className="h2">See how people are using our data</h3>
             <p>
@@ -196,7 +166,7 @@ const AboutPage = () => (
         </div>
     </section>
 
-    <section className="pale-green">
+    <section className="pale-green color-block">
         <div className="main-col">
             <h3 className="h2">Download, remix and reuse</h3>
             <p>

app/src/frontend/app.js

@@ -2,6 +2,9 @@ import React, { Fragment } from 'react';
 import { Route, Switch, Link } from 'react-router-dom';
 import { TransitionGroup, CSSTransition } from 'react-transition-group'
 
+import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
+import './main.css';
+
 import AboutPage from './about';
 import BetaBanner from './beta-banner';
 import BuildingEdit from './building-edit';
@@ -14,8 +17,6 @@ import MyAccountPage from './my-account';
 import SignUp from './signup';
 import Welcome from './welcome';
 
-import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
-import './main.css'
 
 
 class App extends React.Component {

app/src/frontend/login.js

@@ -3,6 +3,7 @@ import { Redirect, Link } from 'react-router-dom';
 
 import ErrorBox from './error-box';
 import InfoBox from './info-box';
+import SupporterLogos from './supporter-logos';
 
 class Login extends Component {
     constructor(props) {
@@ -105,6 +106,10 @@ class Login extends Component {
 
                     </form>
                 </section>
+                <hr />
+                <section className="main-col">
+                    <SupporterLogos />
+                </section>
             </article>
         )
     }

app/src/frontend/signup.js

@@ -3,6 +3,7 @@ import { Redirect, Link } from 'react-router-dom';
 
 import ErrorBox from './error-box';
 import InfoBox from './info-box';
+import SupporterLogos from './supporter-logos';
 
 class SignUp extends Component {
     constructor(props) {
@@ -139,6 +140,10 @@ class SignUp extends Component {
 
                     </form>
                 </section>
+                <hr />
+                <section className="main-col">
+                    <SupporterLogos />
+                </section>
             </article>
         )
     }

app/src/frontend/styles/content.css

@@ -55,11 +55,11 @@ p a.btn:active {
 h1, h2, h3, h4 {
     font-weight: normal;
 }
-.h1 {
+main .h1 {
     font-size: 2em;
-    margin-bottom: 0.5em;
+    margin: 0.5em 0;
 }
-.h2 {
+main .h2 {
     font-size: 1.5em;
     margin: 0.25em 0 0.5em;
 }

app/src/frontend/styles/layout.css

@@ -23,11 +23,16 @@
 article section {
     overflow: hidden;
     margin: 2.25em 0 4em;
+}
+article .color-block {
     padding: 2em 0 4em;
+    margin-top: 0;
+    margin-bottom: 0;
 }
 .main-col {
-    max-width: 40em;
+    max-width: 48em;
-    margin: 0 auto;
+    margin-left: auto;
+    margin-right: auto;
     padding-left: 1em;
     padding-right: 1em;
 }

app/src/frontend/supporter-logos.css

@@ -0,0 +1,27 @@
+/**
+ * Logos
+ */
+.logo-list {
+    text-align: center;
+    padding: 0;
+    list-style: none;
+}
+.logo-list li {
+    display: inline-block;
+    padding: 0 0.25em;
+    vertical-align: middle;
+}
+.logo-list a {
+    opacity: 1;
+    transition: opacity 0.2s;
+}
+.logo-list a:hover,
+.logo-list a:focus,
+.logo-list a:active {
+    opacity: 0.6;
+    outline: none;
+}
+.logo-list img {
+    width: auto;
+    height: 5.25rem;
+}

app/src/frontend/supporter-logos.js

@@ -0,0 +1,43 @@
+import React, { Fragment } from 'react';
+
+import './supporter-logos.css';
+
+const SupporterLogos = () => (
+    <Fragment>
+        <h2 className="h3">Lead Organisation and Project Partners</h2>
+        <ul className="logo-list">
+            <li>
+                <a href="https://www.ucl.ac.uk/bartlett/casa/">
+                    <img src="images/logo-casa.png"
+                        alt="Centre for Advanced Spatial Analysis (CASA)" />
+                </a>
+            </li>
+            <li>
+                <a href="https://www.ucl.ac.uk/">
+                    <img src="images/logo-ucl.png"
+                        alt="University College London" />
+                </a>
+            </li>
+            <li>
+                <a href="https://www.historicengland.org.uk/">
+                    <img src="images/logo-he.png"
+                        alt="Historic England" />
+                </a>
+            </li>
+            <li>
+                <a href="https://www.ordnancesurvey.co.uk/">
+                    <img src="images/logo-os.png"
+                        alt="Ordnance Survey" />
+                </a>
+            </li>
+            <li>
+                <a href="https://www.london.gov.uk/">
+                    <img src="images/logo-gla.png"
+                        alt="Supported by the Mayor of London" />
+                </a>
+            </li>
+        </ul>
+    </Fragment>
+);
+
+export default SupporterLogos;