Merge pull request #66 from google/fixes

Various fixes to improve UX, usability.

app/index.html

@@ -56,17 +56,20 @@
         </header>
 
         <nav class="navdrawer-container promote-layer">
+            <h4>Navigation</h4>
             <ul>
-                <li><a href="#">Item 1</a></li>
-                <li><a href="#">Item 2</a></li>
-                <li><a href="#">Item 3</a></li>
-                <li><a href="#">Item 4</a></li>
+                <li><a href="#hello">Hello</a></li>
+                <li><a href="#get-started">Get Started</a></li>
+                <li><a href="styleguide/index.html">Style Guide</a></li>
             </ul>
         </nav>
 
         <main>
-            <h1>Hello.</h1>
-            <p>Welcome to Web Starter Kit. Read how to <a href="http://developers.google.com/web/starter-kit">Get Started</a> or check out the <a href="styleguide/index.html">Style Guide</a>.</p>
+            <h1 id="hello">Hello!</h1>
+            <p>Welcome to Web Starter Kit.</p>
+
+            <h2 id="get-started">Get Started.</h2>
+            <p>Read how to <a href="http://developers.google.com/web/starter-kit">Get Started</a> or check out the <a href="styleguide/index.html">Style Guide</a>.</p>
         </main>
 
         <!-- build:js scripts/main.min.js -->

app/scripts/main.js

@@ -18,18 +18,28 @@
  */
 (function () {
     'use strict';
+
     var navdrawerContainer = document.querySelector('.navdrawer-container');
     var appbarElement = document.querySelector('.app-bar');
     var menuBtn = document.querySelector('.menu');
+    var main = document.querySelector('main');
 
-    menuBtn.addEventListener('click', function () {
-        var isOpen = navdrawerContainer.classList.contains('open');
-        if (isOpen) {
-            appbarElement.classList.remove('open');
-            navdrawerContainer.classList.remove('open');
-        } else {
-            appbarElement.classList.add('open');
-            navdrawerContainer.classList.add('open');
+    function closeMenu() {
+        appbarElement.classList.remove('open');
+        navdrawerContainer.classList.remove('open');
+    }
+
+    function toggleMenu() {
+        appbarElement.classList.toggle('open');
+        navdrawerContainer.classList.toggle('open');
+    }
+
+    main.addEventListener('ontouchstart', closeMenu);
+    main.addEventListener('click', closeMenu);
+    menuBtn.addEventListener('click', toggleMenu);
+    navdrawerContainer.addEventListener('click', function (event) {
+        if (event.target.nodeName === 'A' || event.target.nodeName === 'LI') {
+            closeMenu();
         }
-    }, true);
+    });
 })();

app/styles/main.css

@@ -47,7 +47,8 @@ body {
     margin: 0 auto;
 }
 
-.app-bar.open {
+.app-bar.open,
+.app-bar.open ~ main {
     -webkit-transform: translate(250px, 0);
     transform: translate(250px, 0);
 }
@@ -133,15 +134,22 @@ button.menu img {
     backface-visibility: hidden;
 }
 
+.base, p, ul, ol {
+    font-size: 19px;
+}
+
 .navdrawer-container {
+    z-index: 1;
     position: fixed;
+    top: 0;
+    bottom: 0;
     width: 250px;
     height: 100%;
     background-color: #3367D6;
     color: #fefefe;
     -webkit-transform: translate(-250px, 0);
     transform: translate(-250px, 0);
-    z-index: 1;
+    overflow-y: scroll;
 }
 
 .navdrawer-container.open {
@@ -149,11 +157,23 @@ button.menu img {
     transform: translate(0, 0);
 }
 
-.app-bar, .navdrawer-container {
+.app-bar, .navdrawer-container, main {
     -webkit-transition: -webkit-transform 0.3s ease-out;
     transition: transform 0.3s ease-out;
 }
 
+.navdrawer-container h4,
+.navdrawer-container ul li a {
+    height: 60px;
+    padding: 0 20px;
+    line-height: 60px;
+}
+
+.navdrawer-container h4 {
+    background-color: white;
+    color: #3367D6;
+}
+
 .navdrawer-container ul {
     padding: 0;
     margin: 0;
@@ -162,9 +182,6 @@ button.menu img {
 
 .navdrawer-container ul li a {
     display: block;
-    height: 60px;
-    padding: 0 20px;
-    line-height: 60px;
     text-decoration: none;
     color: white;
     -webkit-transition: background-color 0.2s ease-out;
@@ -199,6 +216,7 @@ main {
     margin: 0 auto;
     /* Height of the header */
     padding: 60px 16px 16px 16px;
+    min-height: 100%;
 }
 
 /** Larger Screens - desktops and tablets **/
@@ -256,6 +274,10 @@ main {
         transition: none;
     }
 
+    .navdrawer-container h4 {
+        display: none;
+    }
+
     .navdrawer-container ul {
         display: -ms-flexbox;
         display: -webkit-flex;
@@ -274,6 +296,7 @@ main {
     main {
         max-width: 864px;
         padding-top: 0;
+        min-height: initial;
     }
 
     body {
@@ -304,7 +327,7 @@ main {
     }
 
     .navdrawer-container {
-        padding: 0 16px 8px 16px;
+        padding: 0 16px;
     }
 
     .navdrawer-container li {