improve mobile experience

Evan You · Evan You · commit 083685c771c0 · 2014-09-29T19:07:28.000-04:00
diff --git a/themes/vue/layout/layout.ejs b/themes/vue/layout/layout.ejs
@@ -15,19 +15,29 @@
         <script src="/js/vue.min.js"></script>
     </head>
     <body>
+        <div id="mobile-bar">
+            <a class="menu-button"></a>
+            <a class="logo" href="/"></a>
+        </div>
+        
         <% if (page.index) { %>
             <%- partial('partials/index') %>
         <% } else { %>
             <%- partial('partials/header') %>
         <% } %>
+
         <div id="main">
-        <% if (page.blog_index) { %>
-            <%- partial('partials/blog') %>
-        <% } else { %>
-            <%- body %>
-        <% } %>
+            <% if (page.blog_index) { %>
+                <%- partial('partials/blog') %>
+            <% } else { %>
+                <%- body %>
+            <% } %>
         </div>
-        <script src="/js/smooth-scroll.min.js"></script>
-        <script src="/js/common.js"></script>
+
+        <% if (!page.index) { %>
+            <script src="/js/smooth-scroll.min.js"></script>
+            <script src="/js/common.js"></script>
+        <% } %>
+
     </body>
 </html>
diff --git a/themes/vue/layout/partials/blog.ejs b/themes/vue/layout/partials/blog.ejs
@@ -1,3 +1,8 @@
+<div class="sidebar">
+  <ul class="main-menu">
+      <%- partial('partials/main_menu') %>
+  </ul>
+</div>
 <div class="content blog">
 <h1 style="text-align: center; margin-bottom:.5em">The Vue.js Blog</h1>
 <% site.posts.sort('date', -1).each(function (post) { %>
diff --git a/themes/vue/layout/partials/header.ejs b/themes/vue/layout/partials/header.ejs
@@ -4,11 +4,6 @@
         <span>Vue.js</span>
     </a>
     <ul id="nav">
-        <li><a href="/guide/" class="nav-link<%- page.path.match(/guide/) ? ' current' : '' %>">Guide</a></li>
-        <li><a href="/api/" class="nav-link<%- page.path.match(/api/) ? ' current' : '' %>">API Reference</a></li>
-        <br class="break" />
-        <li><a href="/examples/" class="nav-link<%- page.path.match(/examples/) ? ' current' : '' %>">Examples</a></li>
-        <li><a href="/blog/" class="nav-link<%- (page.path.match(/blog/) || is_post()) ? ' current' : '' %>">Blog</a></li>
-        <li><a href="https://github.com/yyx990803/vue" target="_blank" class="nav-link">GitHub</a></li>
+        <%- partial('partials/main_menu') %>
     </ul>
 </div>
diff --git a/themes/vue/layout/partials/main_menu.ejs b/themes/vue/layout/partials/main_menu.ejs
@@ -0,0 +1,5 @@
+<li><a href="/guide/" class="nav-link<%- page.path.match(/guide/) ? ' current' : '' %>">Guide</a></li>
+<li><a href="/api/" class="nav-link<%- page.path.match(/api/) ? ' current' : '' %>">API Reference</a></li>
+<li><a href="/examples/" class="nav-link<%- page.path.match(/examples/) ? ' current' : '' %>">Examples</a></li>
+<li><a href="/blog/" class="nav-link<%- (page.path.match(/blog/) || is_post()) ? ' current' : '' %>">Blog</a></li>
+<li><a href="https://github.com/yyx990803/vue" target="_blank" class="nav-link">GitHub</a></li>
diff --git a/themes/vue/layout/partials/sidebar.ejs b/themes/vue/layout/partials/sidebar.ejs
@@ -1,16 +1,18 @@
 <div class="sidebar">
-    <div class="toggle">···</div>
+    <ul class="main-menu">
+        <%- partial('partials/main_menu') %>
+    </ul>
     <div class="list">
         <h2><%- type.charAt(0).toUpperCase() + type.slice(1) %></h2>
         <ul class="menu-root">
-        <% site.pages.find({type: type}).sort('order').each(function (p) { %>
-            <li><a href="/<%- p.path %>" class="sidebar-link<%- page.title === p.title ? ' current' : '' %>"><%- p.title %></a></li>
-        <% }) %>
-        <li style="margin:10px 0 3px">
-          <script data-gittip-username="yyx990803"
-            data-gittip-widget="button"
-            src="//gttp.co/v1.js"></script>
-        </li>
+            <% site.pages.find({type: type}).sort('order').each(function (p) { %>
+                <li><a href="/<%- p.path %>" class="sidebar-link<%- page.title === p.title ? ' current' : '' %>"><%- p.title %></a></li>
+            <% }) %>
+            <li style="margin:10px 0 3px">
+              <script data-gittip-username="yyx990803"
+                data-gittip-widget="button"
+                src="//gttp.co/v1.js"></script>
+            </li>
         </ul>
     </div>
 </div>
diff --git a/themes/vue/layout/post.ejs b/themes/vue/layout/post.ejs
@@ -1,11 +1,13 @@
 <div class="sidebar blog">
-    <div class="toggle">···</div>
+    <ul class="main-menu">
+        <%- partial('partials/main_menu') %>
+    </ul>
     <div class="list">
         <h2>Recent Posts</h2>
         <ul>
         <% site.posts.sort('date', -1).limit(10).each(function (post) { %>
             <li>
-                <a href="/<%- post.path %>" class="sidebar-link"><%- post.title %></a>
+                <a href="/<%- post.path %>" class="sidebar-link<%- page.title === post.title ? ' current' : '' %>"><%- post.title %></a>
             </li>
         <% }) %>
         <li style="margin:10px 0 3px">
diff --git a/themes/vue/source/css/_common.styl b/themes/vue/source/css/_common.styl
@@ -99,6 +99,7 @@ a.button
     position relative
     z-index 1
     padding 0 60px 30px
+    overflow-x hidden
 
 #ad
     width 130px
diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl
@@ -8,6 +8,8 @@ $header-height = 40px
     background-color #fff
     box-shadow 0 0 4px rgba(0,0,0,.25)
     padding 25px 60px
+    position relative
+    z-index 0
 
 #nav
     list-style-type none
@@ -23,6 +25,7 @@ $header-height = 40px
     li
         display inline-block
         margin 0 .6em
+
 .nav-link
     padding-bottom 3px
     &:hover, &.current
@@ -40,8 +43,37 @@ $header-height = 40px
         width $header-height
         height $header-height
 
+#mobile-bar
+    position fixed
+    top 0
+    left 0
+    width 100%
+    height 40px
+    background-color #fff
+    z-index 9
+    display none
+    box-shadow 0 0 4px rgba(0,0,0,.25)
+    .menu-button
+        position absolute
+        width 24px
+        height 24px
+        top 8px
+        left 12px
+        background url(../images/menu.png) center center no-repeat
+        background-size 24px
+    .logo
+        position absolute
+        width 30px
+        height 30px
+        background url(../images/logo.png) center center no-repeat
+        top 5px
+        left 50%
+        margin-left -15px
+        background-size 30px
+
 .sidebar
     position absolute
+    z-index 10
     top 0
     left 60px
     bottom 0
@@ -50,22 +82,16 @@ $header-height = 40px
     width 260px
     margin-right 20px
     -webkit-overflow-scrolling touch
-    .toggle
-        font-size 1.5em
-        cursor pointer
-        display none
-        color $light
     h2
         margin-top .2em
     ul
         list-style-type none
         margin 0
-        padding-left 1em
         line-height 1.8em
-    .menu-root
         padding-left 0
     .menu-sub
         font-size .85em
+        padding-left 1em
     .sidebar-link
         color $light
         &.current
@@ -77,6 +103,9 @@ $header-height = 40px
         &.active
             font-weight bold
             color $green
+    .main-menu
+        margin-bottom 20px
+        display none
 
 .content
     padding 2.2em 0
@@ -162,7 +191,7 @@ $header-height = 40px
 
 @media screen and (max-width: 1200px)
     #ad
-        z-index 9
+        z-index 8
         position relative
         width auto
         height 100px
@@ -186,41 +215,33 @@ $header-height = 40px
         -webkit-text-size-adjust none
         font-size 14px
     #header
-        text-align center
-        padding 18px 0
-    #nav
-        position static
-        margin-top .4em
-        height 55px
-        line-height 2.2em
-        .break
-            display inline-block
+        display none
+    #logo
+        display none
     .nav-link
         padding-bottom 1px
         &:hover, &.current
             border-bottom 2px solid $green
-    #logo
+    #mobile-bar
         display block
-        img
-            margin-right 0
-        span
-            display none
     #main
-        padding 0 1.4em
+        padding 2em 1.4em 0
     .highlight pre
         padding 1.2em 1em
     .sidebar
         position fixed
-        background-color #fff
-        z-index 10
+        background-color #f9f9f9
         height 100%
         top 0
         left 0
-        padding 20px 30px
+        padding 60px 30px 20px
         box-shadow 0 0 10px rgba(0,0,0,.2)
         box-sizing border-box
+        transition transform .4s cubic-bezier(0.4, 0, 0, 1), -webkit-transform .4s cubic-bezier(0.4, 0, 0, 1)
         transform translate(-110%,0)
         -webkit-transform translate(-110%,0)
+        .main-menu
+            display block
         &.open
             transform translate(0,0)
             -webkit-transform translate(0,0)
diff --git a/themes/vue/source/images/menu.png b/themes/vue/source/images/menu.png
diff --git a/themes/vue/source/js/common.js b/themes/vue/source/js/common.js
@@ -6,69 +6,81 @@
   var body = document.body
   var header = document.getElementById('header')
   var menu = document.querySelector('.sidebar')
-  var menuToggle = document.querySelector('.sidebar .toggle')
   var content = document.querySelector('.content')
+  var mobileBar = document.getElementById('mobile-bar')
 
-  if (!menu) return
-
-  menuToggle.addEventListener('click', function () {
+  var menuButton = mobileBar.querySelector('.menu-button')
+  menuButton.addEventListener('click', function () {
     menu.classList.toggle('open')
   })
 
+  body.addEventListener('click', function (e) {
+    if (e.target !== menuButton && !menu.contains(e.target)) {
+      menu.classList.remove('open')
+    }
+  })
+
   // build sidebar
-  var allLinks = []
   var currentPageAnchor = menu.querySelector('.sidebar-link.current')
-  var sectionContainer = document.createElement('ul')
-  sectionContainer.className = 'menu-sub'
-  currentPageAnchor.parentNode.appendChild(sectionContainer)
-  var h2s = content.querySelectorAll('h2')
-  if (h2s.length) {
-    each.call(h2s, function (h) {
-      sectionContainer.appendChild(makeLink(h))
-      var h3s = collectH3s(h)
-      allLinks.push(h)
-      allLinks.push.apply(allLinks, h3s)
-      if (h3s.length) {
-        sectionContainer.appendChild(makeSubLinks(h3s))
+  if (currentPageAnchor) {
+    var allLinks = []
+    var sectionContainer = document.createElement('ul')
+    sectionContainer.className = 'menu-sub'
+    currentPageAnchor.parentNode.appendChild(sectionContainer)
+    var h2s = content.querySelectorAll('h2')
+    if (h2s.length) {
+      each.call(h2s, function (h) {
+        sectionContainer.appendChild(makeLink(h))
+        var h3s = collectH3s(h)
+        allLinks.push(h)
+        allLinks.push.apply(allLinks, h3s)
+        if (h3s.length) {
+          sectionContainer.appendChild(makeSubLinks(h3s))
+        }
+      })
+    } else {
+      h2s = content.querySelectorAll('h3')
+      each.call(h2s, function (h) {
+        sectionContainer.appendChild(makeLink(h))
+        allLinks.push(h)
+      })
+    }
+
+    var animating = false
+    sectionContainer.addEventListener('click', function (e) {
+      e.preventDefault()
+      if (e.target.classList.contains('section-link')) {
+        menu.classList.remove('open')
+        setActive(e.target)
+        animating = true
+        setTimeout(function () {
+          animating = false
+        }, 400)
       }
-    })
-  } else {
-    h2s = content.querySelectorAll('h3')
-    each.call(h2s, function (h) {
-      sectionContainer.appendChild(makeLink(h))
-      allLinks.push(h)
+    }, true)
+
+    // init smooth scroll
+    smoothScroll.init({
+      speed: 400,
+      offset: window.innerWidth > 720
+        ? 40
+        : 58
     })
   }
 
-  // init smooth scroll
-  smoothScroll.init({
-    speed: 400
-  })
-
-  var animating = false
-  sectionContainer.addEventListener('click', function (e) {
-    e.preventDefault()
-    if (e.target.classList.contains('section-link')) {
-      setActive(e.target)
-      animating = true
-      setTimeout(function () {
-        animating = false
-      }, 400)
-    }
-  }, true)
-
   // listen for scroll event to do positioning & highlights
   window.addEventListener('scroll', updateSidebar)
   window.addEventListener('resize', updateSidebar)
 
   function updateSidebar () {
     var top = doc && doc.scrollTop || body.scrollTop
-    if (top > header.offsetHeight) {
+    var headerHeight = header.offsetHeight
+    if (top > headerHeight) {
       main.className = 'fix-sidebar'
     } else {
       main.className = ''
     }
-    if (animating) return
+    if (animating || !allLinks) return
     var last
     for (var i = 0; i < allLinks.length; i++) {
       var link = allLinks[i]
