Fix site navigation on touch devices and make smaller on smaller devices

admin/static/css/theme.styl

@@ -92,7 +92,8 @@ span.label
     .icon
       top: 10px
 
-    &:hover
+    html.no-touch &:hover
+    html.touch &:active
       background: lighten($faintGrey, 50%)
 
   ul.site-selector
@@ -113,7 +114,8 @@ span.label
       padding: 10px 10px
       cursor: pointer
 
-      &:hover
+      html.no-touch &:hover
+      html.touch &:active
         background: lighten($faintGrey, 50%)
 
       &.selected
@@ -172,7 +174,8 @@ span.label
       &.button
         background: darken($primaryColor, 5%)
 
-        &:hover
+        html.no-touch &:hover
+        html.touch &:active
           background: darken($primaryColor, 10%)
 
   > ul
@@ -189,7 +192,8 @@ span.label
         font-weight: $boldFont
         color: #fff
 
-        &:hover, &:active
+        html.no-touch &:hover
+        html.touch &:active
           background: darken($primaryColor, 5%)
 
         &.active
@@ -319,7 +323,8 @@ span.label
           line-height: 44px
           text-align: center
           cursor: pointer
-          &:hover
+          html.no-touch &:hover
+          html.touch &:active
             color: #fff
             background: $alertColor
 
@@ -376,7 +381,8 @@ span.label
           display: block
           font-size: 1.5em
           line-height: 1.2em
-          &:hover
+          html.no-touch &:hover
+          html.touch &:active
             color: $textDarkColor
           &.site-name
             font-size: 2em
@@ -406,7 +412,8 @@ span.label
 
           a
             color: $lightGrey
-            &:hover
+            html.no-touch &:hover
+            html.touch &:active
               text-decoration: underline
 
         .actions
@@ -423,7 +430,8 @@ span.label
 
           a
             color: $lightGrey
-            &:hover
+            html.no-touch &:hover
+            html.touch &:active
               text-decoration: underline
 
     .no-data
@@ -602,7 +610,8 @@ span.label
           border: 0
           z-index: 100
 
-          &:hover
+          html.no-touch &:hover
+          html.touch &:active
             background: darken($primaryColor, 10%)
         
         button.fullscreen-button
@@ -651,7 +660,8 @@ ul.ui-multi-select
     ellipsis()
     cursor: pointer
 
-    &:hover
+    html.no-touch &:hover
+    html.touch &:active
       background: lighten($faintGrey, 50%)
 
     &.selected
@@ -678,7 +688,8 @@ ul.ui-multi-select
       width: 95%
       border: 1px solid darken($faintGrey, 10%)
 
-      &:hover
+      html.no-touch &:hover
+      html.touch &:active
         background: lighten($faintGrey, 10%)
 
       &.selected

site/lib/app.coffee

@@ -30,6 +30,7 @@ setupNavMenus = ->
   $collectionNav = $('.collection-nav')
   $collectionNavIcon = $collectionNav.find('> .icon')
   $collectionNavList = $collectionNav.find('> ul')
+  collectionDocs = []
   
   $articleView = $('.container > article.view')
 
@@ -66,6 +67,11 @@ setupNavMenus = ->
       heading.attr('id', headingId)
       $tocNavList.append "<li><a href=\"##{headingId}\">#{text}</a></li>"
 
+    # Decide if we should show the TOC
+    if $tocNavList.children().length > 2
+      $tocNav.show()
+      $collectionNav.addClass('third')
+
     $tocNavIcon.on 'click', (e) ->
       e.stopPropagation()
       hidePopups($tocNavList)
@@ -86,9 +92,11 @@ setupNavMenus = ->
             data = JSON.parse(data)
             for row in data.rows
               doc = row.doc
+              collectionDocs.push(doc)
               url = "/#{doc.type}/#{doc.slug}"
               selectedClass = if window.location.pathname is url then 'active' else ''
-              $collectionNavList.append "<li><a href=\"#{url}\" class=\"#{selectedClass}\">#{doc.title}</a></li>"
+              $collectionNavList.append "<li><a href=\"#{url}\" class=\"#{selectedClass}\" data-id=\"#{doc._id}\">#{doc.title}</a></li>"
+            setupCollectionDocsNav(collectionDocs)
 
     $collectionNavIcon.on 'click', (e) ->
       e.stopPropagation()
@@ -97,6 +105,13 @@ setupNavMenus = ->
       $collectionNavIcon.toggleClass('open')
 
 
+setupCollectionDocsNav = (docs) ->
+  $(document).on 'keydown', (e) ->
+    if e.which is 37
+      console.log docs[1].title
+    else if e.which is 39
+      console.log docs[1]._id
+
 setupSmoothScrolling = ->
   smoothScroll = (hash) ->
     $target = $(hash)

site/static/css/responsive.styl

@@ -6,7 +6,7 @@
     font-size: 14px
 
   .container
-    padding: 14px
+    padding: 50px 14px 14px 14px
     border-left-width: 8px
 
   h1
@@ -25,11 +25,6 @@
   .site-tagline
     margin-bottom: 2em
 
-  .main-nav
-  .toc-nav
-  .collection-nav
-    margin: 4px 4px 0 0
-
   article
 
     > .photo
@@ -48,12 +43,72 @@
           margin: 1em auto
 
 
-@media (max-width: 650px)
+@media (max-width: 640px)
 
+  // NAVIGATION
+  .main-nav
   .toc-nav
   .collection-nav
-    display: none
-  
+    $iconSize = 40px
+
+    > .icon
+      width: $iconSize+4
+      height: $iconSize
+      padding: 7px
+
+      &.open
+        height: $iconSize+11
+
+      span
+        height: 4px
+        margin-bottom: 4px
+
+    > ul
+      top: $iconSize+10px
+
+  .main-nav
+    > .icon
+      i
+        top: -10px
+
+  .toc-nav
+  .collection-nav
+    right: 50px
+
+    > .icon
+      right: 50px
+
+      div
+        height: 20px
+        padding: 3px 3px 0px 3px
+        margin-bottom: 2px
+        span
+          height: 2px
+          margin-bottom: 2px
+
+    > ul
+      right: 50px
+
+  .collection-nav
+    $iconWidth = 110px
+
+    > .icon
+      width: $iconWidth
+      padding: 5px 0
+
+      div
+        height: 22px
+        font-size: 14px
+        line-height: @height
+
+    &.third
+      right: 100px
+      > .icon
+        right: 100px
+      > ul
+        right: 100px
+  //-- END NAVIGATION
+ 
   article
     
     .body
@@ -109,11 +164,6 @@
   .site-tagline
     margin-bottom: 2.5em
 
-  .main-nav
-  .toc-nav
-  .collection-nav
-    margin: 8px 8px 0 0
-
   article
 
     > .photo

site/static/css/setup-theme.styl

@@ -18,7 +18,8 @@ setupTheme($primaryColor = $blueColor, $secondaryColor = $lightGrey, $linkColor
 
   button, .button
     background: $primaryColor
-    &:hover, &:active
+    html.no-touch &:hover
+    html.touch &:active
       background: darken($primaryColor, 5%)
     &.plain
       color: $primaryColor
@@ -36,9 +37,10 @@ setupTheme($primaryColor = $blueColor, $secondaryColor = $lightGrey, $linkColor
   .main-nav
   .toc-nav
   .collection-nav
-    .icon
+    > .icon
       background: $primaryColor
-      &:hover, &:active
+      html.no-touch &:hover
+      html.touch &:active
         background: darken($primaryColor, 10%)
     > ul
       background: $primaryColor
@@ -46,7 +48,8 @@ setupTheme($primaryColor = $blueColor, $secondaryColor = $lightGrey, $linkColor
         background: $primaryColor
       > li
         a
-          &:hover, &:active
+          html.no-touch &:hover
+          html.touch &:active
             background: darken($primaryColor, 5%)
           &.active
             background: darken($primaryColor, 10%)
@@ -54,7 +57,8 @@ setupTheme($primaryColor = $blueColor, $secondaryColor = $lightGrey, $linkColor
   article
     h3, h4
       a
-        &:hover, &:active
+        html.no-touch &:hover
+        html.touch &:active
           color: darken($linkColor, 10%)
     .sponsor
       .label
@@ -68,7 +72,8 @@ setupTheme($primaryColor = $blueColor, $secondaryColor = $lightGrey, $linkColor
           .updated
             background: $primaryColor
             border-color: $primaryColor
-          &:hover, &:active
+          html.no-touch &:hover
+          html.touch &:active
             border-color: $primaryColor
             a
               background: $primaryColor
@@ -84,5 +89,6 @@ setupTheme($primaryColor = $blueColor, $secondaryColor = $lightGrey, $linkColor
     .social-icons
       a
         color: $primaryColor
-        &:hover, &:active
+        html.no-touch &:hover
+        html.touch &:active
           color: darken($primaryColor, 10%)

site/static/css/theme.styl

@@ -22,7 +22,6 @@
     color: $primaryColor
 
 .site-tagline
-  width: 70%
   color: #C4C4C4
   font-size: 1.1em
   line-height: 1em
@@ -36,19 +35,18 @@
 .main-nav
 .toc-nav
 .collection-nav
-  position: fixed
+  position: absolute
   top: 0
   right: 0
   padding: 0
-  margin: 0 10px 0 0
   -webkit-user-select: none
   -webkit-tap-highlight-color: rgba(0,0,0,0)
   z-index: 20
 
   $iconSize = 60px
 
-  .icon
-    position: absolute
+  > .icon
+    position: fixed
     top: 0
     right: 0
     width: $iconSize
@@ -60,7 +58,8 @@
     white-space: nowrap
     overflow: hidden
 
-    &:hover, &:active
+    html.no-touch &:hover
+    html.touch &:active
       background: darken($primaryColor, 10%)
 
     &.open
@@ -85,7 +84,7 @@
 
   > ul
     display: none
-    position: absolute
+    position: fixed
     top: $iconSize+10px
     right: 0
     min-width: 260px
@@ -100,15 +99,6 @@
     overflow-x: hidden
     -webkit-overflow-scrolling: touch
 
-    // &:before
-    //   content: ''
-    //   position: absolute
-    //   top: -11px
-    //   right: 0
-    //   width: $iconSize
-    //   height: 12px
-    //   background: $primaryColor
-
     > li
       padding: 0
 
@@ -119,7 +109,8 @@
         font-weight: $normalFont
         color: #fff
 
-        &:hover, &:active
+        html.no-touch &:hover
+        html.touch &:active
           background: darken($primaryColor, 5%)
 
         &.active
@@ -163,28 +154,38 @@
   // see above
   right: 70px
 
-  .icon
+  > .icon
+    right: 70px
 
-    // OLD for the TOC icon <div>TOC</div><span></span>
+    // For the TOC icon <div>TOC</div><span></span>
     // div
     //   width: 48px
     //   height: 24px
     //   color: #fff
-    //   font-size: 22px
-    //   font-weight: $heavyFont
-    //   line-height: 1em
+    //   font-size: 20px
+    //   line-height: @font-size
+    //   font-weight: $boldFont
     //   text-align: center
+    //   text-transform: uppercase
     //   margin-left: -4px
     //   overflow: hidden
 
+    // For the rectangle icon <div><span></span><span></span><span></span></div>
     div
       height: 31px
       background: transparent
-      border: 5px solid white
-      padding: 7px 5px 0 5px
+      border: 2px solid white
+      padding: 3px 3px 0px 3px
       margin-bottom: 5px
+      span
+        height: 5px
+        margin-bottom: 3px
+        opacity: 0.5
+        &:nth-child(2n)
+          opacity: 1
 
   > ul
+    right: 70px
 
     > li
 
@@ -192,35 +193,39 @@
         font-size: 1em
         line-height: 1.15em
 
+.toc-nav
+  // Let's make it hidden by default
+  display: none
+
 .collection-nav
   // see above
-  right: 140px
-
-  &.second
-    right: 70px
 
   $iconWidth = 146px
 
-  .icon
+  > .icon
     width: $iconWidth
+    padding: 10px 0
 
     div
       width: auto
-      height: 30px
+      height: 36px
       color: #fff
-      font-size: 26px
+      font-size: 20px
+      line-height: @height
       font-weight: $normalFont
-      line-height: 1em
       text-align: center
-      margin: 3px 0
+      text-transform: uppercase
+      margin: 0
       border: 0
       padding: 0
       overflow: hidden
 
-  > ul
-
-    &:before
-      width: $iconWidth
+  &.third
+    right: 140px
+    > .icon
+      right: 140px
+    > ul
+      right: 140px
 
 
 article
@@ -229,7 +234,8 @@ article
     margin: 1em 0
 
     a
-      &:hover, &:active
+      html.no-touch &:hover
+      html.touch &:active
         color: darken($linkColor, 10%)
 
   ol, ul
@@ -431,7 +437,8 @@ article.home
           &.fresh-true
             display: block
 
-        &:hover, &:active
+        html.no-touch &:hover
+        html.touch &:active
           border-color: $primaryColor
 
           a
@@ -530,7 +537,8 @@ footer
       color: $primaryColor
       overflow: hidden
 
-      &:hover, &:active
+      html.no-touch &:hover
+      html.touch &:active
         color: darken($primaryColor, 10%)
 
   .footer-html

site/templates/doc.html

@@ -55,7 +55,7 @@
 
 <nav class="toc-nav {{doc.type}}">
   <div class="icon" data-track-click="Document Nav Icon">
-    <div><span></span></div><i class="icon-down-open"></i>
+    <div><span></span><span></span><span></span></div><i class="icon-down-open"></i>
   </div>
   <ul>
     <li class="heading">{{doc.type_tc}}'s Table of Contents</li>