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

Move welcome float to sidebar

Browse Source
This commit is contained in:
Tom Russell 2020-04-09 15:57:17 +01:00
parent 3649f92d4c
commit f4d18f7bda
4 changed files with 32 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/src/frontend/map-app.tsx
View File

@ -224,7 +224,9 @@ class MapApp extends React.Component<MapAppProps, MapAppState> {
<Fragment>
<Switch>
<Route exact path="/">
<Welcome />
<Sidebar>
<Welcome />
</Sidebar>
</Route>
<Route exact path="/:mode/categories/:building?">
<Sidebar>

40
app/src/frontend/pages/welcome.css
View File

@ -1,42 +1,6 @@
/**
* Welcome jumbotron
*/
.welcome-float {
position: absolute;
z-index: 10000;
top: 100px;
width: 100%;
max-height: 95%;
max-height: calc(100%-2em);
overflow-y: auto;
}
.welcome-float.jumbotron {
padding: 1em 2.5em 1.5em;
background: #fff;
background-color: rgba(255,255,255,0.9);
box-shadow: #000 0px 0px 2px -1px;
}
@media (min-width: 990px) and (max-width: 1199px){
.welcome-float {
right: 5%;
width: 30em;
max-height: 80vh;
}
}
@media (min-width: 1200px){
.welcome-float {
left: 50%;
margin-left: -120px; /* 480 -360 */
width: 45em;
}
}
.welcome-float .lead {
font-size: 1.2em;
}
.welcome-float .lead a {
color: #333;
border-bottom-color: #333;
.welcome.section-body {
padding-bottom: 1rem;
}

36
app/src/frontend/pages/welcome.tsx
View File

@ -4,23 +4,41 @@ import { Link } from 'react-router-dom';
import './welcome.css';
const Welcome = () => (
<div className="jumbotron welcome-float">
<h1 className="h1">Welcome to Colouring London</h1>
<p className="lead">
Colouring London is a knowledge exchange platform set up by University College London to help make the city more sustainable. It provides open statistical data on the characteristics of the city's buildings and on the dynamic behaviour of the stock. We're working to collate, collect, generate, verify over fifty types of data and to visualise many of these datasets.
<div className="section-body welcome">
<h1 className="h2">Welcome to Colouring London!</h1>
<p>
Colouring London is a knowledge exchange platform set up by University College
London to help make the city more sustainable. It provides open statistical data
on the characteristics of the city's buildings and on the dynamic behaviour of the
stock. We're working to collate, collect, generate, verify over fifty types of
data and to visualise many of these datasets.
</p>
<p className="lead">
Our information comes from many different sources. As we are unable to vouch for data accuracy, we are currently experimenting with a range of features including 'data source', 'edit history', and 'entry verification', to assist you in checking reliability and judging how suitable the data are for your intended use. Your help in checking and adding data is very much appreciated.
<p>
Our information comes from many different sources. As we are unable to vouch for
data accuracy, we are currently experimenting with a range of features including
'data source', 'edit history', and 'entry verification', to assist you in checking
reliability and judging how suitable the data are for your intended use. Your help
in checking and adding data is very much appreciated.
</p>
<p className="lead">
All data we collect are made <Link to="/data-extracts.html">openly available</Link>. We just ask you to credit Colouring London and read our <a href="https://www.pages.colouring.london/data-ethics">data ethics policy</a> when using or sharing our data, maps or <a href="https://github.com/tomalrussell/colouring-london">code</a>.
<p>
All data we collect are made <Link to="/data-extracts.html">openly
available</Link>. We just ask you to credit Colouring London and read our <a
href="https://www.pages.colouring.london/data-ethics">data ethics policy</a> when
using or sharing our data, maps or <a
href="https://github.com/colouring-london/colouring-london">code</a>.
</p>
<Link to="/view/categories"
className="btn btn-outline-dark btn-lg btn-block">
Start Colouring Here!
</Link>
<p>
<img src="images/supporter-logos.png" alt="Colouring London collaborating organisations: The Bartlett UCL, Ordnance Survey, Historic England, Greater London Authority" />
<img src="images/supporter-logos.png" alt="Colouring London collaborating organisations: The Bartlett UCL, Ordnance Survey, Historic England, Greater London Authority" />
</p>
</div>
);

1
app/src/frontend/styles/typography.css
View File

@ -8,7 +8,6 @@ body {
}
.h2 {
font-weight: normal;
margin: 0;
}
.h3, .h4, .h5 {
font-weight: normal;