From 4c2aecd73d9bfc7c2da91c6c983fbec222b343ff Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Thu, 13 Sep 2018 22:13:53 +0100
Subject: [PATCH] Welcome/sidebar transitions

---
 app/package-lock.json        | 26 +++++++++++++++++-----
 app/package.json             |  1 +
 app/src/frontend/app.js      | 43 ++++++++++++++++++++----------------
 app/src/frontend/main.css    | 41 ++++++++++++++++++++++++++++++++++
 app/src/frontend/sidebar.css |  8 -------
 app/src/frontend/welcome.css | 10 ++-------
 app/src/frontend/welcome.js  |  2 +-
 7 files changed, 90 insertions(+), 41 deletions(-)

diff --git a/app/package-lock.json b/app/package-lock.json
index 8ddc11b1..6177c4c4 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -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",
diff --git a/app/package.json b/app/package.json
index 6ccb7b65..69607aec 100644
--- a/app/package.json
+++ b/app/package.json
@@ -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": {
diff --git a/app/src/frontend/app.js b/app/src/frontend/app.js
index 8c5885d1..449b7cbd 100644
--- a/app/src/frontend/app.js
+++ b/app/src/frontend/app.js
@@ -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}
diff --git a/app/src/frontend/main.css b/app/src/frontend/main.css
index cb7ac5f2..48065cbe 100755
--- a/app/src/frontend/main.css
+++ b/app/src/frontend/main.css
@@ -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;
+}
diff --git a/app/src/frontend/sidebar.css b/app/src/frontend/sidebar.css
index 46d47b90..8de693e5 100644
--- a/app/src/frontend/sidebar.css
+++ b/app/src/frontend/sidebar.css
@@ -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;
     }
diff --git a/app/src/frontend/welcome.css b/app/src/frontend/welcome.css
index dc18edb9..0726c443 100644
--- a/app/src/frontend/welcome.css
+++ b/app/src/frontend/welcome.css
@@ -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 {
diff --git a/app/src/frontend/welcome.js b/app/src/frontend/welcome.js
index 85a21aca..7193b752 100644
--- a/app/src/frontend/welcome.js
+++ b/app/src/frontend/welcome.js
@@ -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>