fix(website): doc layout responsive

Author: Shipow

docs/_layouts/documentation.html

@@ -3,14 +3,14 @@
 ---
 
 <div class="container-fluid main-documentation">
-  <div class="hfull row">
-    <div class="col-lg-2 col-md-3 hidden-xs hidden-sm widget-nav hfull">
+  <div class="row">
+    <div class="col-lg-2 col-md-3 hidden-xs hidden-sm widget-nav">
       <div class="documentation-menu">
         {{ content | toc_generate}}
       </div>
     </div>
-    <div class="col-lg-10 col-md-9 widget-description hfull">
-      <div class="toc-menu hidden-md hidden-lg">
+    <div class="col-lg-offset-2 col-md-offset-3 col-lg-10 col-md-9 widget-description clearfix">
+      <div class="toc-menu visible-xs visible-sm">
         {{ content | toc_generate_menu}}
       </div>
       <div class="code-samples hidden-xs"></div>

docs/_plugins/toc_generator.rb

@@ -38,7 +38,7 @@ def toc_generate_menu(html)
       current_level = 1
       doc.css(@@selector).each do |tag|
         level = tag.name[1].to_i
-        html << "<option value=\"#{tag['id']}\">#{tag.text}</option>"
+        html << "<option value=\"##{tag['id']}\">#{tag.text}</option>"
         current_level = level
       end
 

docs/css/_documentation.sass

@@ -9,6 +9,8 @@ code
   padding-left: 15px
   font-weight: lighter
   background-color: $gray-light
+  position: fixed
+  +position(60px,null,0,0)
 
 .documentation-menu
   height: 100%
@@ -55,6 +57,8 @@ code
   width: 43%
   color: rgba(white, 0.75)
   font-size: .9em
+  img
+    position: relative
   .sticker
     +size(60px,60px)
     line-height: 58px
@@ -65,8 +69,9 @@ code
     animation-fill-mode: forwards
     border: solid 2px rgba(white, 0.5)
     margin-bottom: 10px
+    p
+      padding: 0
     img
-      position: relative
       top: -2px
   .sticker-algolia
     animation-delay: 0.5s
@@ -78,9 +83,6 @@ code
     animation-delay: 1.5s
 
 .documentation-content
-  position: absolute
-  +position(0,0,0,0)
-  overflow-y: scroll
   padding: 30px
   font-size: 14px
   line-height: 1.8em
@@ -198,7 +200,7 @@ code
 
 .code-box
   position: relative
-  width: 43%
+  width: 44%
   float: right
   clear: right
   .btn-group
@@ -345,40 +347,31 @@ code
             &:before
               color: #ff6600
 
-@media (max-width: $screen-xs-max)
+@media (max-width: $screen-sm-max)
   .main-documentation
     padding: 60px 0 0 0
     .row
       margin: 0
     img
       max-width: 100%
-    .widget-container
-      clear: both
-    .widget-description
-      overflow: scroll
-      -webkit-overflow-scrolling: touch
-      padding: 0
+  .documentation-content
+    padding: 60px 0 0 0
+    font-size: .95em
   .toc-menu
-    position: absolute
-    top: 0
+    position: fixed
+    top: 60
     left: 0
     width: 100%
     background: $gray-light
     padding: 8px 10px
     z-index: 2
-    margin-bottom: 20px
-  .documentation-content
-    padding: 40px 0 0 0
-    font-size: .95em
-    p, h1, h2, h3, h4, div[id], ul, .highlight
-      margin-right: 0
-      width: 100%
-      max-width: 100%
+  .widget-description
     p, h1, h2, h3, h4
-      padding: 9.5px
-  .highlight pre
-    margin: 0
-    border-radius: 0
+      padding: 0 0 0 20px
+
+@media (max-width: $screen-xs-max)
+  .widget-container
+    clear: both
   .code-box
     width: 100%
     background: #172c4f
@@ -395,3 +388,15 @@ code
           background: #0a1724
     .jsdoc
       margin: 0
+  .widget-description
+    -webkit-overflow-scrolling: touch
+    padding: 0
+    p, h1, h2, h3, h4, div[id], ul, .highlight
+      margin-right: 0
+      width: 100%
+      max-width: 100%
+    p, h1, h2, h3, h4
+      padding: 9.5px
+  .highlight pre
+    margin: 0
+    border-radius: 0

docs/index.haml

@@ -113,14 +113,14 @@ layout: default
   .container
     .spacer100
     .row
-      .col-xs-4.col-xs-offset-2
+      .col-md-4.col-md-offset-2.col-sm-offset-2.col-sm-8.m-b
         %section#instantsearch-vp-1
           .text-center
             .illus-wrapper
               %img{src:"img/icon-ux.svg", alt:"UX", width:40}
             %h2 Search UX done right
           %p Algolia strives to build the best search experience for the end users. All of the best practices we learned while implementing search on hundreds of websites are now packed into our widgets.
-      .col-xs-4
+      .col-md-4.col-md-offset-0.col-sm-offset-2.col-sm-8
         %section#instantsearch-vp-2
           .text-center
             .illus-wrapper
@@ -130,12 +130,12 @@ layout: default
     .spacer100
     #panel-get-started
       .row
-        .col-xs-8.text-right
+        .col-sm-8.text-right
           .spacer5
           %span.h4
             %strong Explore Instantsearch.js.
             Learn more about instant search's features and widgets.
-        .col-xs-4
+        .col-sm-4
           %a.btn.btn-primary{href: "{{ '/documentation/' | prepend: site.baseurl }}"} Get started with Instantsearch.js
 
 {% contentfor site-footer %}

docs/js/doc.js

@@ -145,6 +145,7 @@
     $('.toc-menu select').change(function(){
       var href = $(this).val();
       window.location.hash = href;
+      $('html, body').animate({scrollTop: '-=100px'}, 800);
     });
   }