Welcome/sidebar transitions
This commit is contained in:
Tom Russell
parent
9fb4fa052a
commit
4c2aecd73d
26
app/package-lock.json
generated
26
app/package-lock.json
generated
@ -3447,6 +3447,11 @@
|
||||
"esutils": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"dom-helpers": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.3.1.tgz",
|
||||
"integrity": "sha512-2Sm+JaYn74OiTM2wHvxJOo3roiq/h25Yi69Fqk269cNUwIXsCvATB6CRSFC9Am/20G2b28hGv/+7NiWydIrPvg=="
|
||||
},
|
||||
"domain-browser": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
|
||||
@ -8320,11 +8325,6 @@
|
||||
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
|
||||
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
|
||||
},
|
||||
"path-to-regexp": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.4.0.tgz",
|
||||
"integrity": "sha512-G6zHoVqC6GGTQkZwF4lkuEyMbVOjoBKAEybQUypI1WTkqinCOrq2x6U2+phkJ1XsEMTy4LjtwPI7HW+NVrRR2w=="
|
||||
},
|
||||
"path-type": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
|
||||
@ -10212,6 +10212,11 @@
|
||||
"resolved": "https://registry.npmjs.org/react-leaflet-universal/-/react-leaflet-universal-1.2.0.tgz",
|
||||
"integrity": "sha512-Wl0p9HonxGnyTly+gfiotj5f0Su/ZD7omZ5ko0ji3lEuJe4nsokbz9UcLt9CaR/C33Ha4OmzPn8I/XqwKJUs7g=="
|
||||
},
|
||||
"react-lifecycles-compat": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||
},
|
||||
"react-router": {
|
||||
"version": "4.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
|
||||
@ -10254,6 +10259,17 @@
|
||||
"warning": "^4.0.1"
|
||||
}
|
||||
},
|
||||
"react-transition-group": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.4.0.tgz",
|
||||
"integrity": "sha512-Xv5d55NkJUxUzLCImGSanK8Cl/30sgpOEMGc5m86t8+kZwrPxPCPcFqyx83kkr+5Lz5gs6djuvE5By+gce+VjA==",
|
||||
"requires": {
|
||||
"dom-helpers": "^3.3.1",
|
||||
"loose-envify": "^1.3.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-lifecycles-compat": "^3.0.4"
|
||||
}
|
||||
},
|
||||
"read-pkg": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
|
||||
|
||||
@ -25,6 +25,7 @@
|
||||
"react-leaflet": "^1.0.1",
|
||||
"react-leaflet-universal": "^1.2.0",
|
||||
"react-router-dom": "4.3.1",
|
||||
"react-transition-group": "^2.4.0",
|
||||
"serialize-javascript": "^1.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { Route, Switch, Link } from 'react-router-dom';
|
||||
import { TransitionGroup, CSSTransition } from 'react-transition-group'
|
||||
|
||||
import AboutPage from './about';
|
||||
import BetaBanner from './beta-banner';
|
||||
@ -50,26 +51,30 @@ class App extends React.Component {
|
||||
<Header user={this.state.user} />
|
||||
<main className="beta">
|
||||
<Switch>
|
||||
<Route path="/(map|building)?(/\w+)?(.html)?" render={props => (
|
||||
<Route path="/(map|building)?(/\w+)?(.html)?" render={(props) => (
|
||||
<Fragment>
|
||||
<Switch>
|
||||
<Route exact path="/">
|
||||
<Welcome />
|
||||
</Route>
|
||||
<Route exact path="/map/:map.html" component={Legend} />
|
||||
<Route exact path="/building/:building.html">
|
||||
<BuildingView {...this.state.building}
|
||||
user={this.state.user}
|
||||
selectBuilding={this.selectBuilding}
|
||||
/>
|
||||
</Route>
|
||||
<Route exact path="/building/:building/edit.html">
|
||||
<BuildingEdit {...this.state.building}
|
||||
user={this.state.user}
|
||||
selectBuilding={this.selectBuilding}
|
||||
/>
|
||||
</Route>
|
||||
</Switch>
|
||||
<TransitionGroup>
|
||||
<CSSTransition timeout={3000} classNames='fade' key={props.location.key}>
|
||||
<Switch location={props.location}>
|
||||
<Route exact path="/">
|
||||
<Welcome />
|
||||
</Route>
|
||||
<Route exact path="/map/:map.html" component={Legend} />
|
||||
<Route exact path="/building/:building.html">
|
||||
<BuildingView {...this.state.building}
|
||||
user={this.state.user}
|
||||
selectBuilding={this.selectBuilding}
|
||||
/>
|
||||
</Route>
|
||||
<Route exact path="/building/:building/edit.html">
|
||||
<BuildingEdit {...this.state.building}
|
||||
user={this.state.user}
|
||||
selectBuilding={this.selectBuilding}
|
||||
/>
|
||||
</Route>
|
||||
</Switch>
|
||||
</CSSTransition>
|
||||
</TransitionGroup>
|
||||
<ColouringMap {...props}
|
||||
building={this.state.building}
|
||||
selectBuilding={this.selectBuilding}
|
||||
|
||||
@ -76,3 +76,44 @@
|
||||
height: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* Animations for welcome-float and sidebar
|
||||
*/
|
||||
.fade-enter {
|
||||
opacity: 0;
|
||||
z-index: 1001;
|
||||
}
|
||||
.fade-enter.fade-enter-active {
|
||||
opacity: 1;
|
||||
transition: opacity 500ms;
|
||||
}
|
||||
.fade-exit {
|
||||
opacity: 1;
|
||||
}
|
||||
.fade-exit.fade-exit-active {
|
||||
opacity: 0;
|
||||
transition: 500ms;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sidebar could slide in, hard to make it natural if navigating between views with sidebars
|
||||
*/
|
||||
.info-container.fade-enter {
|
||||
/* transform: translateX(-100%); */
|
||||
opacity: 0;
|
||||
z-index: 1001;
|
||||
}
|
||||
.info-container.fade-enter.fade-enter-active {
|
||||
/* transform: translateX(0); */
|
||||
opacity: 1;
|
||||
transition: transform opacity 300ms;
|
||||
}
|
||||
.info-container.fade-exit {
|
||||
opacity: 1;
|
||||
}
|
||||
.info-container.fade-exit.fade-exit-active {
|
||||
opacity: 0;
|
||||
transition: 400ms;
|
||||
transition-delay: 100ms;
|
||||
}
|
||||
|
||||
@ -9,11 +9,6 @@
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
z-index: 1000;
|
||||
overflow-y: auto;
|
||||
transform: translateX(0);
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.info-container.offscreen {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
width: 100%;
|
||||
@ -39,9 +34,6 @@
|
||||
width: 20rem;
|
||||
bottom: 0;
|
||||
}
|
||||
.info-container.offscreen {
|
||||
transform: translateX(-20rem);
|
||||
}
|
||||
.leaflet-right{
|
||||
left: 20rem;
|
||||
}
|
||||
|
||||
@ -7,16 +7,10 @@
|
||||
top: 0;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
.welcome-float.jumbotron {
|
||||
background: #fff;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
opacity: 1;
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
.welcome-float.offscreen {
|
||||
opacity: 0;
|
||||
}
|
||||
.welcome-float.remove {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 768px){
|
||||
.welcome-float {
|
||||
|
||||
@ -8,7 +8,7 @@ const Welcome = () => (
|
||||
<h1 className="h1">Welcome to Colouring London</h1>
|
||||
<p className="lead">Colour in, view and download data on London's buildings</p>
|
||||
<Link to="/map/date_year.html"
|
||||
className="btn btn-outline-dark btn-lg btn-block">
|
||||
className="btn btn-outline-dark btn-lg btn-block">
|
||||
Start Colouring
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user