Mobile fixes (#120)

* mobile changes for discovery UI

Co-authored-by: Timothy Regan <[email protected]>

package.json

@@ -21,9 +21,11 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.22",
     "@fortawesome/free-brands-svg-icons": "^5.10.2",
     "@fortawesome/react-fontawesome": "^0.1.4",
-    "@smartcitiesdata/react-discovery-ui": "^1.3.7",
+    "@smartcitiesdata/react-discovery-ui": "^1.4.0",
     "react": "~16.8.6",
-    "react-dom": "~16.8.6"
+    "react-dom": "~16.8.6",
+    "react-hamburger-button": "0.0.1",
+    "react-hamburger-menu": "^1.1.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.5.5",

src/banner.html

@@ -0,0 +1,11 @@
+      <ul className="banner-background">
+		<li><a href={`https://www.${window.BASE_URL}/about/smart-city-projects`}><img src="assets/projects.png"/></a></li>
+		<li><a href="/?q=transportation&amp;facets%5Bkeywords%5D%5B%5D=Transportation"><img src="assets/mobility.png"/></a></li>
+		<li><a href="/?q=parking"><img src="assets/parking.png"/></a></li>
+		<li><a href="/?q=environment"><img src="assets/environment.png"/></a></li>
+		<li><a href="/?q=energy"><img src="assets/energy.png"/></a></li>
+		<li><a href="/?q=health"><img src="assets/health.png"/></a></li>
+		<li><a href="/?q=food"><img src="assets/food.png"/></a></li>
+		<li><a href="/?q=&facets%5Bkeywords%5D%5B%5D=visualized-datasets&apiAccessible=false"><img src="assets/food.png"/></a></li> 
+		<li><a href={`https://www.${window.BASE_URL}/tools/datasets-curated-for-visualization`}><img src="assets/map.png"/></a></li>  
+      </ul>

src/components/footer/footer.js

@@ -23,7 +23,7 @@ const Footer = props => {
           </div>
           <div className="footerRight">< img src={smartStart} /></div>
         </div >
-        <div className="copyright">Smart Columbus Copyright ©2020. All rights reserved.</div>
+        <div className="copyright"> © 2020 Smart Columbus Operating System. All rights reserved.</div>
       </div >
     </footer>
   )

src/components/footer/footer.scss

@@ -21,10 +21,10 @@ footer {
     display:block;
     float:left;
     clear:right;
-    padding:0 50px 20px 0;
+    padding:0 30px 20px 0;
     text-align:left;
     width:25%;
-    font-size:15px;
+    font-size:13px;
   }
 
   .footer-wrapper{
@@ -42,23 +42,41 @@ footer {
   }
 
   .copyright{
-    margin-top: 50px;
-    padding:14px;
+    margin-top:20px;
+    padding:4% 0 0 0;
     display:inline-block;
+    text-align:center;
+    width:92%;
   }
 
   .footerLeft{
-    width:50%;
+    width:70%;
     float:left;
     margin:0px;
   }
 
   .footerRight{
-    width:46%;
+    width:26%;
     text-align:right;
     padding:20px 0px 0 0;
     float:left;
     margin:0px;
   }
 
+  @media only screen and (max-width: 600px) {
+    .footer-wrapper {
+      background-image: none;
+    }
+    .footerLeft {
+      width:100%;
+      clear:both;
+    }
+    .footerRight {
+      display:none;
+    }
+    .footerLeft li {
+      width:100%;
+    }
+  }
+
 }

src/components/header/header.js

@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTwitter, faFacebookF, faLinkedinIn } from "@fortawesome/free-brands-svg-icons"
 import cbusLogo from '../../assets/columbus-city-logo.png'
 import smrtLogo from '../../assets/smrt-logo.png'
+import { HamburgerButton } from 'react-hamburger-button';
 
 export default class Header extends Component {
   static defaultProps = {
@@ -33,6 +34,12 @@ export default class Header extends Component {
     });
   }
 
+  handleClick() {
+    this.setState({
+      open: !this.state.open
+    });
+  }
+
   infoRow() {
     return (
       <div>
@@ -61,6 +68,21 @@ export default class Header extends Component {
     )
   }
 
+  hamBurger() {
+    return (
+      <div className="hamburger">
+      <HamburgerButton
+      open={this.state.open}
+      onClick={this.handleClick.bind(this)}
+      width={18}
+      height={15}
+      strokeWidth={2}
+      color='white'
+      animationDuration={0.5}
+     /></div>
+    )
+  }
+
   navBar() {
     const aboutData = {
       title: 'ABOUT',
@@ -91,7 +113,7 @@ export default class Header extends Component {
 
 
     return (
-      <div className={`nav-wrapper ${this.state.collapsed ? 'pinned' : ''}`}>
+      <div className={`nav-wrapper ${this.state.collapsed ? 'pinned' : ''} ${this.state.open ? 'open' : ''}`}>
         <NavDropdown data={aboutData} />
         <a className='nav-element highlighted' href="/">EXPLORE DATA</a>
         <a className='nav-element' href={`https://www.${window.BASE_URL}/share-your-data`}>SHARE DATA</a>
@@ -106,10 +128,11 @@ export default class Header extends Component {
     return (
       <header>
         <div className={`logo ${this.state.collapsed ? 'scale-down' : 'rescale'}`}>
-          <a href={`https://www.${window.BASE_URL}`}><img src={smrtLogo} height='140'></img></a>
+          <a href={`https://www.${window.BASE_URL}`}><img src={smrtLogo} height='96'></img></a>
         </div>
         <div className="wrapper">
           {this.infoRow()}
+          {this.hamBurger()}
           {this.navBar()}
         </div>
       </header>

src/components/header/header.scss

@@ -1,9 +1,18 @@
+body {
+  overflow-x: hidden;
+}
+.body-dataset-lists header .nav-wrapper{
+  border-bottom:none;
+}
+.body-dataset-detail main-app-element {
+  margin-top:100px;
+}
 header {
   background-color: white;
   padding: 0;
   z-index: 1000;
   position: relative;
-  margin-bottom: 75px;
+  margin-bottom: 57px;
 
   a {
     text-decoration: none;
@@ -21,12 +30,17 @@ header {
     top: 0;
     z-index: 100;
     margin-left: 20px;
-    padding-top: 7px;
-    padding-left: 7px;
-    padding-right: 7px;
-    background-color: white;
   }
-
+  .hamburger {
+    float:right;
+    display:none;
+    padding:16px;
+    background:#1a1a1a;
+    position:fixed;
+    top:8px;
+    right:10px;
+    z-index:1;
+  }
   .nav-wrapper{
     background-color: white;
     width: 100%;
@@ -35,7 +49,13 @@ header {
     padding-right: 20px;
     padding-bottom: 10px;
     text-align: right;
-    box-shadow: 0 6px 7px 0 rgba(0,0,0,.15);
+    border-bottom: 1px solid #e2e0e0;
+    box-shadow: 0 6px 7px 0 rgba(0,0,0,.25);
+  }
+
+  .nav-wrapper.pinned {
+    box-shadow: 0 6px 7px 0 rgba(0,0,0,.25);
+    border-bottom:none;
   }
 
   .nav-element{
@@ -73,8 +93,8 @@ header {
   }
 
   .rescale {
-    -webkit-animation: scale-up 0.4s ease forwards;
-            animation: scale-up 0.4s ease forwards;
+    -webkit-animation: scale-up 0.2s ease forwards;
+            animation: scale-up 0.2s ease forwards;
   }
 
   .right {
@@ -84,8 +104,8 @@ header {
   }
 
   .scale-down {
-    -webkit-animation: scale-down 0.4s ease forwards;
-            animation: scale-down 0.4s ease forwards;
+    -webkit-animation: scale-down 0.2s ease forwards;
+            animation: scale-down 0.2s ease forwards;
   }
 
   .slogan, .slogan a {
@@ -164,3 +184,154 @@ header {
     }
   }
 }
+@media only screen and (max-width: 980px) {
+  header .nav-element {
+    font-size:12px;
+    padding: 10px 10px;
+  }
+}  
+@media only screen and (max-width: 768px) {
+  dataset-list-view {
+    min-width:auto;
+  } 
+  .hamburger {
+    display:block !important;
+  }
+  header .title, .social, .right {
+    display:none;
+  }
+  header .nav-element {
+    display:block;
+    font-size:16px;
+  } 
+  header .nav-wrapper {
+    padding:0px;
+    padding-right:0;
+    padding-bottom:0;
+    width:50%;
+    height:100%;
+    position:fixed;
+    background-color:rgba(26,26,26,1);
+    top:0;
+    right:0px;
+    transition: 1s;
+  }
+  header .nav-element {
+    border:0;
+    color:#fff;
+    font-weight:normal;
+    text-align:left;
+  }
+  header .highlighted {
+    background-color:#1a1a1a;
+  }
+  header .nav-wrapper {
+    display:none;
+  }
+  header .nav-wrapper.open {
+    display:block;
+  }
+  nav-dropdown .dropdown-contents {
+    position:relative !important;
+    z-index: inherit 0 !important;
+    width:100%; 
+    min-width:100%; 
+    margin-top:0 !important;
+    padding-left:20px;
+  } 
+  nav-dropdown .no-bottom:hover {
+    border-bottom: none !important;
+  }
+  nav-dropdown li {
+    line-height:1.2
+}
+  header .nav-element:hover {
+    background-color: #1a1a1a;
+    color: white;
+    border: none;
+  }
+}    
+    @media only screen and (max-width: 600px) {
+      main-app-element {
+        margin-top:60px;
+      }
+      header {
+        box-shadow: 0 6px 7px 0 rgba(0,0,0,.25);
+        top:0px;
+        height:60px;
+        width:100%;
+        margin-bottom:10px;
+        position:fixed;
+      }
+      header .wrapper {
+        margin:0px;
+        background:#ffffff;
+      }
+      .hamburger {
+        display:block !important;
+      }
+      header .logo {
+        margin-left:16px;
+      }
+      header .logo img{
+        height:60px;
+      }
+      header .scale-down {
+      animation:none;
+      }
+      header .rescale {
+        animation:none;
+        }
+      header .title, .social, .right {
+        display:none;
+      }
+      header .nav-element {
+        display:block;
+        font-size:16px;
+      } 
+      header .nav-wrapper {
+        padding:0px;
+        padding-right:0;
+        padding-bottom:0;
+        width:50%;
+        height:100%;
+        position:fixed;
+        background-color:rgba(26,26,26,1);
+        top:0;
+        right:0px;
+        transition: 1s;
+        display:none;
+      }
+      header .nav-element {
+        border:0;
+        color:#fff;
+        font-weight:normal;
+        text-align:left;
+      }
+      header .highlighted {
+        background-color:#1a1a1a;
+      }
+
+      header .nav-wrapper.open {
+        display:block;
+      }
+      nav-dropdown .dropdown-contents {
+        position:relative !important;
+        z-index: inherit 0 !important;
+        width:100%; 
+        min-width:100%; 
+        margin-top:0 !important;
+        padding-left:20px;
+      } 
+      nav-dropdown .no-bottom:hover {
+        border-bottom: none !important;
+      }
+      nav-dropdown li {
+        line-height:1.2
+    }
+      header .nav-element:hover {
+        background-color: #1a1a1a;
+        color: white;
+        border: none;
+      }
+}