Make site nav popups scroll when long

admin/static/css/common.styl

@@ -75,7 +75,7 @@ span.label
 blockquote
   position: relative
   border-right: 10px solid $primaryColor
-  padding: 0 1.5em 0 2.5em
+  padding: 0 1.5em 0 3em
   margin: 1.5em 0
   text-align: right
   font-size: 1.125em

site/lib/app.coffee

@@ -34,9 +34,15 @@ setupNavMenus = ->
   $articleView = $('.container > article.view')
 
   hidePopups = (exceptMe) ->
-    $mainNavList.hide() unless $mainNavList is exceptMe
-    $tocNavList.hide() unless $tocNavList is exceptMe
-    $collectionNavList.hide() unless $collectionNavList is exceptMe
+    unless $mainNavList is exceptMe
+      $mainNavList.hide()
+      $mainNavIcon.removeClass('open')
+    unless $tocNavList is exceptMe
+      $tocNavList.hide()
+      $tocNavIcon.removeClass('open')
+    unless $collectionNavList is exceptMe
+      $collectionNavList.hide()
+      $collectionNavIcon.removeClass('open')
 
   $('html').on 'click', (e) ->
     hidePopups()
@@ -46,6 +52,7 @@ setupNavMenus = ->
     e.stopPropagation()
     hidePopups($mainNavList)
     $mainNavList.toggle()
+    $mainNavIcon.toggleClass('open')
 
   $mainNavSearchInput.on 'click', (e) ->
     e.stopPropagation()
@@ -55,7 +62,7 @@ setupNavMenus = ->
     $articleView.find('h3').each ->
       heading = $(@)
       text = heading.text()
-      headingId = 'TOC-' + text.replace(/[\ \'\"]/g, '-').replace(/[\.\?\#\:\,]/g, '')
+      headingId = 'TOC-' + text.replace(/[\ \_]/g, '-').replace(/[\'\"\.\?\#\:\,\;\@\=]/g, '')
       heading.attr('id', headingId)
       $tocNavList.append "<li><a href=\"##{headingId}\">#{text}</a></li>"
 
@@ -63,6 +70,7 @@ setupNavMenus = ->
       e.stopPropagation()
       hidePopups($tocNavList)
       $tocNavList.toggle()
+      $tocNavIcon.toggleClass('open')
 
   # Setup the Collection menu
   if $collectionNav
@@ -86,6 +94,7 @@ setupNavMenus = ->
       e.stopPropagation()
       hidePopups($collectionNavList)
       $collectionNavList.toggle()
+      $collectionNavIcon.toggleClass('open')
 
 
 setupSmoothScrolling = ->

site/static/css/responsive.styl

@@ -1,10 +1,5 @@
 /* Responsive styles */
 
-// Portrait phones and down
-// @media (max-width: 320px)
-
-
-// Larger phones to smaller landscape phones, and down
 @media (max-width: 480px)
 
   body
@@ -52,7 +47,7 @@
           float: none
           margin: 1em auto
 
-// Odd one
+
 @media (max-width: 650px)
 
   .toc-nav
@@ -91,7 +86,7 @@
       float: none
       margin: 0 0 1em 0
 
-// Landscape on larger phone to smaller tablet
+
 @media (min-width: 481px) and (max-width: 767px)
   
   .container
@@ -127,10 +122,10 @@
       left: -20px
 
 
-// Portrait tablet to landscape and desktop
-// @media (min-width: 768px) and (max-width: 979px)
-
-
-// Large desktop
-// @media (min-width: 1200px)
-
+// Heights
+@media (min-height: 768px)
+  .main-nav
+  .toc-nav
+  .collection-nav
+    > ul
+      max-height: 600px

site/static/css/theme.styl

@@ -40,7 +40,7 @@
   top: 0
   right: 0
   padding: 0
-  margin: 20px 20px 0 0
+  margin: 0 10px 0 0
   -webkit-user-select: none
   -webkit-tap-highlight-color: rgba(0,0,0,0)
   z-index: 20
@@ -56,13 +56,16 @@
     padding: 10px
     background: $primaryColor
     cursor: pointer
-    outline: 5px solid rgba(255,255,255,0.9)
+    // outline: 5px solid rgba(255,255,255,0.9)
     white-space: nowrap
     overflow: hidden
 
     &:hover, &:active
       background: darken($primaryColor, 10%)
 
+    &.open
+      height: $iconSize+11
+
     span
       display: block
       height: 7px
@@ -87,20 +90,24 @@
     right: 0
     min-width: 260px
     max-width: 400px
+    max-height: 400px
     list-style-type: none
     padding: 0
     margin: 0
     background: $primaryColor
     box-shadow(-4px 4px 0 rgba(0, 0, 0, 0.1))
-
-    &:before
-      content: ''
-      position: absolute
-      top: -10px
-      right: 0
-      width: $iconSize
-      height: 10px
-      background: $primaryColor
+    overflow-y: scroll
+    overflow-x: hidden
+    -webkit-overflow-scrolling: touch
+
+    // &:before
+    //   content: ''
+    //   position: absolute
+    //   top: -11px
+    //   right: 0
+    //   width: $iconSize
+    //   height: 12px
+    //   background: $primaryColor
 
     > li
       padding: 0

site/templates/doc.html

@@ -58,7 +58,7 @@
     <div><span></span></div><i class="icon-down-open"></i>
   </div>
   <ul>
-    <li class="heading">{{doc.type_tc}}'s Table of Content</li>
+    <li class="heading">{{doc.type_tc}}'s Table of Contents</li>
     <li><a href="#TOC-Introduction">Introduction</a></li>
   </ul>
 </nav>