Add Hero block (gdg-x#262)

* Add initial code for hero block

* Add hero reducer

* Remove .vscode settings

* Add .vscode folder to .gitignore

* Replace bower and npm with yarn for travis

* Fix route reducer

* Update header

* Add hero reducer

* Update hero

* Add support of gradient for hero background. Make adaptive height of a hero

* Add missing files to previous commit

* Try to fix travis build

* One more try on travis

* Add one more try

* Fix uiReducer. Update header layout on hero change

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "dev": "hoverboard-dev"
+  }
+}

.gitignore

@@ -4,3 +4,4 @@ node_modules
 build
 .idea/
 .temp/
+.vscode/

.travis.yml

@@ -1,6 +1,7 @@
 language: node_js
 node_js: 7
 cache:
+  yarn: true
   directories:
   - node_modules
   - bower_components
@@ -14,9 +15,7 @@ addons:
     packages:
     - g++-4.8
 install:
-- npm install -g bower
-- bower install
-- npm install
+- yarn
 script: echo "Deploying!"
 before_deploy: npm run build
 deploy:

bower.json

@@ -9,16 +9,22 @@
   "dependencies": {
     "app-route": "PolymerElements/app-route#^2.0.0",
     "app-layout": "PolymerElements/app-layout#^2.0.0",
-    "polymer": "Polymer/polymer#^2.0.1",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.1",
     "paper-icon-button": "PolymerElements/paper-icon-button#^2.0.0",
     "iron-image": "PolymerElements/iron-image#^2.0.0",
-    "paper-tabs": "PolymerElements/paper-tabs#^2.0",
-    "polymer-redux": "tur-nr/polymer-redux",
+    "iron-pages": "PolymerElements/iron-pages#2.0.0",
+    "paper-tabs": "PolymerElements/paper-tabs#^2.0.0",
+    "polymer-redux": "tur-nr/polymer-redux#^1.0.1",
     "paper-input": "PolymerElements/paper-input#^2.0.0",
-    "paper-fab": "PolymerElements/paper-fab#^2.0.0"
+    "paper-fab": "PolymerElements/paper-fab#^2.0.0",
+    "plastic-image": "mlisook/plastic-image#^1.0.4",
+    "polymer": "Polymer/polymer#^2.0.1"
   },
   "devDependencies": {
     "web-component-tester": "Polymer/web-component-tester#^6.0.0"
+  },
+  "resolutions": {
+    "polymer": "^2.0.1",
+    "webcomponentsjs": "^1.0.1"
   }
 }

data/hoverboard.config.json

@@ -21,7 +21,7 @@
   "hashtag": "DevFest17",
   "navigation": [
     {
-      "route": "",
+      "route": "home",
       "permalink": "/",
       "title": "Home"
     },
@@ -46,6 +46,47 @@
       "title": "Team"
     }
   ],
+  "heroSettings": {
+    "home": {
+      "description": "The biggest Google tech conference in CEE. All about Android, Web, and Cloud.",
+      "background": {
+        "color": "#673ab7",
+        "image": "/images/backgrounds/home.jpg"
+      },
+      "fontColor": "#FFF"
+    },
+    "blog": {
+      "title": "Blog",
+      "background": {
+        "color": "#FFF"
+      },
+      "fontColor": "#424242"
+    },
+    "speakers": {
+      "title": "Speakers",
+      "description": "Hear from the Googlers, Partners, and Guest Speakers who are building the future of cloud. Check back often as we add more speakers, including our customers and partners.",
+      "background": {
+        "color": "#FFF"
+      },
+      "fontColor": "#424242"
+    },
+    "schedule": {
+      "title": "Schedule",
+      "background": {
+        "color": "rgba(33, 147, 176, 0.1)",
+        "gradient": "linear-gradient(to right, #2193b0, #6dd5ed)"
+      },
+      "fontColor": "#fff"
+    },
+    "team": {
+      "title": "Team",
+      "background": {
+        "color": "rgba(0, 198, 255, 0.1)",
+        "gradient": "linear-gradient(to right, #00c6ff, #0072ff)"
+      },
+      "fontColor": "#fff"
+    }
+  },
   "mediaQueries": {
     "xs": {
       "max": "639px"

gulpfile.js

@@ -67,7 +67,6 @@ function build() {
         const sourcesHtmlSplitter = new HtmlSplitter();
         const sourcesStream = polymerProject.sources()
           .pipe(sourcesHtmlSplitter.split())
-          // splitHtml doesn't split CSS https://github.com/Polymer/polymer-build/issues/32
           .pipe(gulpif(/\.js$/, uglify()))
           .pipe(gulpif(/\.(html|css)$/, cssSlam()))
           .pipe(gulpif(/\.html$/, html.minify()))

package.json

@@ -11,27 +11,27 @@
   },
   "devDependencies": {
     "bower": "^1.8.0",
-    "browser-sync": "^2.18.0",
+    "browser-sync": "^2.18.12",
     "connect-history-api-fallback": "^1.3.0",
-    "css-slam": "^1.2.0",
-    "del": "^2.2.0",
+    "css-slam": "^1.2.1",
+    "del": "^2.2.2",
     "eslint": "^3.19.0",
-    "eslint-config-google": "^0.7.1",
+    "eslint-config-google": "^0.8.0",
     "eslint-plugin-html": "^2.0.3",
     "gulp": "github:gulpjs/gulp#4.0",
-    "gulp-cli": "^1.2.0",
+    "gulp-cli": "^1.3.0",
     "gulp-htmlmin": "^3.0.0",
-    "gulp-if": "^2.0.0",
-    "gulp-imagemin": "^3.1.0",
+    "gulp-if": "^2.0.2",
+    "gulp-imagemin": "^3.3.0",
     "gulp-nunjucks": "^3.0.0",
-    "gulp-replace": "^0.5.0",
+    "gulp-replace": "^0.5.4",
     "gulp-uglify": "^3.0.0",
-    "merge-stream": "^1.0.0",
+    "merge-stream": "^1.0.1",
     "plylog": "^0.5.0",
-    "polymer-build": "^1.5.0",
-    "require-uncached": "^1.0.0",
-    "sw-precache": "^5.0.0",
-    "uglify-es": "^3.0.13"
+    "polymer-build": "^1.5.1",
+    "require-uncached": "^1.0.3",
+    "sw-precache": "^5.1.1",
+    "uglify-es": "^3.0.15"
   },
   "engines": {
     "node": ">=4.0"

scripts/redux/actions.js

@@ -0,0 +1,22 @@
+const uiActions = {
+  toggleDrawer: (value = null) => {
+    store.dispatch({
+      type: TOGGLE_DRAWER,
+      value
+    });
+  }
+};
+
+const routeActions = {
+  setRoute: routeFromAction => {
+    const route = routeFromAction || 'home';
+    store.dispatch({
+      type: SET_ROUTE,
+      route
+    });
+    store.dispatch({
+      type: SET_HERO,
+      hero: heroSettings[route]
+    });
+  }
+};

scripts/redux/constants.js

@@ -0,0 +1,3 @@
+const TOGGLE_DRAWER = 'TOGGLE_DRAWER';
+const SET_ROUTE = 'SET_ROUTE';
+const SET_HERO = 'SET_HERO';

scripts/redux/reducer.js

@@ -0,0 +1,29 @@
+const uiReducer = (state = initialState.ui, action) => {
+  switch (action.type) {
+    case TOGGLE_DRAWER:
+      return Object.assign({}, state, {
+        isDrawerOpened: action.value || !state.isDrawerOpened
+      });
+    default:
+      return state;
+  }
+};
+
+const routeReducer = (state = initialState.route, action) => {
+  switch (action.type) {
+    case SET_ROUTE:
+      return action.route;
+    default:
+      return state;
+  }
+};
+
+
+const heroReducer = (state = initialState.hero, action) => {
+  switch (action.type) {
+    case SET_HERO:
+      return action.hero;
+    default:
+      return state;
+  }
+};

src/elements/footer-nav.html

@@ -1,5 +1,5 @@
 <link rel="import" href="../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../bower_components/iron-image/iron-image.html">
+<link rel="import" href="../../bower_components/plastic-image/plastic-image.html">
 
 
 <dom-module id="footer-nav">
@@ -68,12 +68,12 @@
     <div class="nav-inline" layout flex>
 
       <a href="{$ organizer.url $}" target="_blank" rel="noopener noreferrer">
-        <iron-image
+        <plastic-image
           class="footer-logo"
-          src="../../images/organizer-logo.svg"
+          srcset="../../images/organizer-logo.svg"
           sizing="contain"
           alt="{$ organizer.name $}">
-        </iron-image>
+        </plastic-image>
       </a>
 
       <div class="copyright">

src/elements/shared-styles.html

@@ -32,6 +32,10 @@
         -webkit-font-smoothing: antialiased;
       }
 
+      .highlight-font {
+        font-family: "Product Sans", arial, sans-serif;
+      }
+
       h1,
       h2,
       h3,
@@ -41,7 +45,6 @@
         margin: 0;
         font-family: "Product Sans", arial, sans-serif;
         font-weight: normal;
-        color: var(--primary-text-color);
       }
 
       h1 {
@@ -60,6 +63,12 @@
 
       body {
         text-rendering: optimizeLegibility;
+        color: var(--primary-text-color);
+      }
+
+      .content {
+        margin: 0 auto;
+        max-width: 1024px;
       }
 
     </style>