a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Tom Russell 2018-09-17 21:27:52 +01:00
parent 84cc616d06
commit 9a06d35bd8
15 changed files with 104 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

BIN
app/public/images/logo-casa.png Executable file → Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 47 KiB

BIN
app/public/images/logo-gla.png Executable file → Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.7 KiB

After

Width:  |  Height:  |  Size: 25 KiB

BIN
app/public/images/logo-he.png Executable file → Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 23 KiB

BIN
app/public/images/logo-os.png Executable file → Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 57 KiB

BIN
app/public/images/logo-ucl.png Executable file → Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 29 KiB

18
app/src/frontend/about.css
View File

@ -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
*/

50
app/src/frontend/about.js
View File

@ -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">
<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>
</div>
<SupporterLogos />
</section>
<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>

5
app/src/frontend/app.js
View File

@ -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 {

5
app/src/frontend/login.js
View File

@ -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>
)
}

5
app/src/frontend/signup.js
View File

@ -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>
)
}

6
app/src/frontend/styles/content.css
View File

@ -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;
}

9
app/src/frontend/styles/layout.css
View File

@ -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;
margin: 0 auto;
max-width: 48em;
margin-left: auto;
margin-right: auto;
padding-left: 1em;
padding-right: 1em;
}

27
app/src/frontend/supporter-logos.css Normal file
View File

@ -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;
}

43
app/src/frontend/supporter-logos.js Normal file
View File

@ -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;