EXPLORE DATA
SHARE DATA
@@ -106,10 +128,11 @@ export default class Header extends Component {
return (
diff --git a/src/components/header/header.scss b/src/components/header/header.scss
index 28af1a4..401ec1a 100644
--- a/src/components/header/header.scss
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/src/components/home-banner/home-banner.js b/src/components/home-banner/home-banner.js
index e1dfe6d..ec272ef 100644
--- a/src/components/home-banner/home-banner.js
+++ b/src/components/home-banner/home-banner.js
@@ -1,20 +1,31 @@
import './home-banner.scss'
-import bannerOverlay from '../../assets/home-banner-overlay.png'
+import projects from '../../assets/projects.png'
+import mobility from '../../assets/mobility.png'
+import parking from '../../assets/parking.png'
+import environment from '../../assets/environment.png'
+import energy from '../../assets/energy.png'
+import health from '../../assets/health.png'
+import food from '../../assets/food.png'
+import viz from '../../assets/viz.png'
+import map from '../../assets/map.png'
+import browse from '../../assets/browse.png'
const HomeBanner = _props => {
return (
-
-
+
)
diff --git a/src/components/home-banner/home-banner.scss b/src/components/home-banner/home-banner.scss
index 2665061..55a3f27 100644
--- a/src/components/home-banner/home-banner.scss
+++ b/src/components/home-banner/home-banner.scss
@@ -1,13 +1,97 @@
+.body-dataset-lists home-banner{
+ display:block;
+}
+.body-dataset-detail home-banner{
+ display:none;
+}
home-banner{
- .banner-background {
- background-image: url('../../assets/home-banner-background.jpg');
+ .banner-background{
+ background-image: url('../../assets/home-banner-background.jpg');
+ min-height:160px;
+ margin:0px;
+ padding:0px;
+}
+ .banner-background ul{
+ list-style-type:none;
+ margin:0px;
+ padding:10px;
+ margin:0px auto;
+ width:90%;
}
+ .banner-background li {
+ float:left;
+ display:block;
+ width:9%;
+ text-align:center;
+ padding:20px 4px;
+ position:relative;
+ }
+ .banner-background li img {
+ max-width:60%;
+ position: relative;
+ bottom:0px;
+ }
+ .banner-background li img.projects {
+ max-width:54%;
+ }
+ .banner-background li img.mobility {
+ max-width:80%;
+ }
+ .banner-background li img.parking {
+ max-width:40%;
+ }
+ .banner-background li img.environment {
+ max-width:66%;
+ }
+ .banner-background li img.energy {
+ max-width:36%;
+ }
+ .banner-background li img.health {
+ max-width:67%;
+ }
+ .banner-background li img.food {
+ max-width:61%;
+ }
+ .banner-background li img.browse {
+ margin-top:36px;
+ max-height:80%;
+ max-width:80%;
+ }
+ .banner-background li img.viz {
+ max-width:67%;
+ }
+ .banner-background li img.map {
+ max-width:67%;
+ }
.banner-overlay {
display: block;
margin: 0px auto;
- width: 1140px;
+ width: 100%;
}
-
-
}
+@media only screen and (max-width: 1280px) {
+ home-banner{
+ .banner-background ul{
+ width:90%;
+ }
+ .banner-background{
+ min-height:140px;
+ }
+}
+}
+@media only screen and (max-width: 1000px) {
+ home-banner{
+ .banner-background ul{
+ width:100%;
+ }
+ .banner-background{
+ min-height:120px;
+ }
+ }
+}
+@media only screen and (max-width: 768px) {
+ .body-dataset-lists home-banner {
+ display:none;
+ }
+}
diff --git a/src/index.html b/src/index.html
index 9c488e0..489f4f0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,7 +5,7 @@
-
Datasets
+
Smart Columbus Operating System: Datasets
