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

Welcome/sidebar transitions

Browse Source
This commit is contained in:
Tom Russell 2018-09-13 22:13:53 +01:00
parent 9fb4fa052a
commit 4c2aecd73d
7 changed files with 90 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/package-lock.json generated
View File

@ -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",

1
app/package.json
View File

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

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

@ -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,9 +51,11 @@ 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>
<TransitionGroup>
<CSSTransition timeout={3000} classNames='fade' key={props.location.key}>
<Switch location={props.location}>
<Route exact path="/">
<Welcome />
</Route>
@ -70,6 +73,8 @@ class App extends React.Component {
/>
</Route>
</Switch>
</CSSTransition>
</TransitionGroup>
<ColouringMap {...props}
building={this.state.building}
selectBuilding={this.selectBuilding}

41
app/src/frontend/main.css
View File

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

8
app/src/frontend/sidebar.css
View File

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

10
app/src/frontend/welcome.css
View File

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