Merge pull request #583 from adamkendis/560-FRONT-footerFixes

Front - Footer, misc styling fixes
hackforla · May 6, 2020 · f3ed52f · f3ed52f
2 parents 0c81003 + 6b2ca97
commit f3ed52f
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 36 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,13 +1,14 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'proptypes';
 import { connect } from 'react-redux';
-import { HashRouter as Router } from 'react-router-dom';
+import { HashRouter as Router, Switch, Route } from 'react-router-dom';
 
 import { getMetadataRequest } from '@reducers/metadata';
 
 import Routes from './Routes';
 import Header from './components/main/header/Header';
 import Footer from './components/main/footer/Footer';
+import StaticFooter from './components/main/footer/StaticFooter';
 import { SnapshotRenderer } from './components/export/SnapshotService';
 
 const basename = process.env.NODE_ENV === 'development' ? '/' : process.env.BASE_URL || '/';
@@ -23,7 +24,10 @@ const App = ({
     <Router basename={basename}>
       <Header />
       <Routes />
-      <Footer />
+      <Switch>
+        <Route path="/(about|contact)" component={StaticFooter} />
+        <Route path="/" component={Footer} />
+      </Switch>
       <SnapshotRenderer />
     </Router>
   );

diff --git a/src/components/main/footer/Footer.jsx b/src/components/main/footer/Footer.jsx
@@ -1,46 +1,43 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Switch, Route } from 'react-router-dom';
 import propTypes from 'proptypes';
 import moment from 'moment';
+import clx from 'classnames';
 import HoverOverInfo from '@components/common/HoverOverInfo';
-import StaticFooter from './StaticFooter';
 
 const Footer = ({
   lastUpdated,
   version,
   backendSha,
+  menuIsOpen,
 }) => {
   const frontendSha = process.env.GITHUB_SHA || 'DEVELOPMENT';
   return (
-    <footer className="navbar has-navbar-fixed-bottom">
-      <Switch>
-        <Route path="/(about|contact)" component={StaticFooter} />
-        <Route path="/">
-          { lastUpdated && (
-            <span className="last-updated">
-              Data Updated Through:
-              &nbsp;
-              {moment(1000 * lastUpdated).format('MMMM Do YYYY, h:mm:ss a')}
-            </span>
-          )}
-          { version && backendSha && (
-            <span className="version">
-              <HoverOverInfo
-                position="top"
-                text={[
-                  frontendSha.substr(0, 7),
-                  backendSha.substr(0, 7),
-                ]}
-              >
-                Version
-                &nbsp;
-                { version }
-              </HoverOverInfo>
-            </span>
-          )}
-        </Route>
-      </Switch>
+    <footer
+      className={clx('navbar has-navbar-fixed-bottom', { 'menu-is-open': menuIsOpen })}
+    >
+      { lastUpdated && (
+        <span className="last-updated">
+          Data Updated Through:
+          &nbsp;
+          {moment(1000 * lastUpdated).format('MMMM Do YYYY, h:mm:ss a')}
+        </span>
+      )}
+      { version && backendSha && (
+        <span className="version">
+          <HoverOverInfo
+            position="top"
+            text={[
+              frontendSha.substr(0, 7),
+              backendSha.substr(0, 7),
+            ]}
+          >
+            Version
+            &nbsp;
+            { version }
+          </HoverOverInfo>
+        </span>
+      )}
     </footer>
   );
 };
@@ -49,12 +46,14 @@ const mapStateToProps = state => ({
   lastUpdated: state.metadata.lastPulled,
   version: state.metadata.version,
   backendSha: state.metadata.gitSha,
+  menuIsOpen: state.ui.menu.isOpen,
 });
 
 Footer.propTypes = {
   lastUpdated: propTypes.number,
   version: propTypes.string,
   backendSha: propTypes.string,
+  menuIsOpen: propTypes.bool.isRequired,
 };
 
 Footer.defaultProps = {

diff --git a/src/components/main/footer/StaticFooter.jsx b/src/components/main/footer/StaticFooter.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 const StaticFooter = () => (
-  <>
+  <footer className="navbar has-navbar-fixed-bottom">
     <div className="static-footer level-left">
       &copy;2020 311 Data
       &nbsp;|&nbsp;
@@ -17,7 +17,7 @@ const StaticFooter = () => (
       {/* **** NEED TO REPLACE HREF WITH VALID LINK WHEN AVAILABLE **** */}
       <a href="/">Privacy Policy</a>
     </div>
-  </>
+  </footer>
 );
 
 export default StaticFooter;
diff --git a/src/styles/main/_footer.scss b/src/styles/main/_footer.scss
@@ -6,6 +6,12 @@ footer.navbar {
   background: $brand-main-color;
   color: $brand-bg-color;
   text-align: center;
+  transition: all 0.5s ease 0s;
+
+  &.menu-is-open {
+    width: calc(100vw - #{$menu-width});
+    margin-left: $menu-width;
+  }
 
   .last-updated {
     display: inline-block;

diff --git a/src/styles/main/_header.scss b/src/styles/main/_header.scss
@@ -2,7 +2,6 @@
   font-family: $brand-heading-family;
   font-weight: bold;
   height: $header-height;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
   z-index: $z-navbar;
   background-color: $brand-heading-color;
 

diff --git a/src/styles/menu/_menu.scss b/src/styles/menu/_menu.scss
@@ -4,7 +4,7 @@
   position: absolute;
   left: 0;
   top: 0;
-  bottom: 0;
+  bottom: -$footer-height;
   width: $menu-width;
   z-index: $z-menu;
   background: $brand-bg-color;
@@ -39,6 +39,7 @@
     width: 26px;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
     border-radius: 0;
+    border: none;
   }
 
   .menu-content {