fix(live-doc): adds navigation menu for smaller screens

Author: Alexandre Stanislawski

docs/_includes/header.html

@@ -15,7 +15,7 @@
               <a href="{{ site.baseurl }}{{ link.url }}" title="{{ link.title }}">{{ link.text }}</a>
             </li>
           {% endfor %}
-            <li>
+            <li class="github">
               <a
                 href="http://github.com/algolia/instantsearch.js"
                 title="See more, open issues and get answers in our Github repository">

docs/_layouts/documentation.html

@@ -6,10 +6,13 @@
   <div class="hfull row">
     <div class="col-lg-2 col-md-3 hidden-xs hidden-sm widget-nav hfull">
       <div class="documentation-menu">
-        {{ content | toc_generate }}
+        {{ content | toc_generate}}
       </div>
     </div>
     <div class="col-lg-10 col-md-9 widget-description hfull">
+      <div class="toc-menu hidden-md hidden-lg">
+        {{ content | toc_generate_menu}}
+      </div>
       <div class="code-samples hidden-xs"></div>
       <article class="documentation-content">
         <!-- <h1 class="documentation-title">{{ page.title }}</h1> -->

docs/_plugins/toc_generator.rb

@@ -28,6 +28,23 @@ def toc_generate(html)
 
       html.join
     end
+
+    def toc_generate_menu(html)
+      doc = Nokogiri::HTML(html)
+
+      html = []
+      html << '<select>'
+      current_level = 1
+      doc.css('h1, h2, h3, h4').each do |tag|
+        level = tag.name[1].to_i
+        html << "<option value=\"#{tag['id']}\">#{tag.text}</option>"
+        current_level = level
+      end
+
+      html << '</select>'
+
+      html.join
+    end
   end
 
 end

docs/css/_documentation.scss

@@ -47,6 +47,16 @@ code {
   }
 }
 
+.toc-menu {
+  position: absolute;
+  top:0;
+  left: 0;
+  width:100%;
+  background: #122440;
+  padding: 5px 30px;
+  z-index: 2;
+}
+
 // Main Content
 
 // Left panel
@@ -56,7 +66,7 @@ code {
 
 .main-documentation {
   height: 100%;
-  padding-top: 52px;
+  padding-top: 50px;
   .description {
     min-height: 84px;
   }
@@ -263,6 +273,7 @@ code {
       color: $brand-primary;
       background-color: #0a1724;
       border: none;
+      transition: opacity 0.2s;
       &:hover {
         color: white;
       }
@@ -440,7 +451,7 @@ code {
 
 @media (max-width: $screen-xs-max) {
   .main-documentation {
-    padding: 52px 0 0 0;
+    padding: 57px 0 0 0;
     .row {
       margin: 0; 
     }
@@ -453,6 +464,9 @@ code {
       padding: 0;
     }
   }
+  .toc-menu {
+    padding: 5px 9.5px;
+  }
   .documentation-content{
     padding: 20px 0;
     p, h1, h2, h3, h4, .h4, div[id], ul, .highlight {

docs/css/_header.sass

@@ -7,8 +7,11 @@ header.site-header
     margin-bottom: 0
     .navbar-brand
       font-weight: 600
-    .fa-github
-      font-size: 160%
+    .github
+      a
+        padding: 13px 10px
+        .fa-github
+          font-size: 160%
 
 .main-content
-  margin-top: $navbar-height
+  margin-top: $navbar-height

docs/js/doc.js

@@ -141,9 +141,17 @@
     });
   }
 
+  function tocMenu(){
+    $('.toc-menu select').change(function(){
+      var href = $(this).val();
+      window.location.hash = href;
+    });
+  }
+
   search();
   codeTabs();
   htmlTabs();
   anchorableTitles();
   copyButtons();
+  tocMenu();
 })(window.jQuery);