Add responsive floating table-of-contents to documentation website

docs/_layouts/default.html

@@ -78,26 +78,37 @@
 <div id="topbar-content-offset">
 {% include topnav.html %}
 <!-- Page Content -->
-<div class="container">
+<div class="container-toc-wrapper">
-    <div class="col-lg-12">&nbsp;</div>
+    <div class="container">
-    <!-- Content Row -->
+        <div class="col-lg-12">&nbsp;</div>
-    <div class="row">
+        <!-- Content Row -->
-        {% assign content_col_size = "col-md-12" %}
+        <div class="row">
-        {% unless page.hide_sidebar %}
+            {% assign content_col_size = "col-md-12" %}
-        <!-- Sidebar Column -->
+            {% unless page.hide_sidebar %}
-        <div class="col-md-3" id="tg-sb-sidebar">
+            <!-- Sidebar Column -->
-            {% include sidebar.html %}
+            <div class="col-md-3" id="tg-sb-sidebar">
-        </div>
+                {% include sidebar.html %}
-        {% assign content_col_size = "col-md-9" %}
+            </div>
-        {% endunless %}
+            {% assign content_col_size = "col-md-9" %}
+            {% endunless %}
 
-        <!-- Content Column -->
+            <!-- Content Column -->
-        <div class="{{content_col_size}}" id="tg-sb-content">
+            <div class="{{content_col_size}}" id="tg-sb-content">
-            {{content}}
+                {{content}}
+            </div>
+
+            <!-- /.row -->
         </div>
-        <!-- /.row -->
+        <!-- /.container -->
     </div>
-    <!-- /.container -->
+
+    {% unless page.toc == false %}
+    <!-- Sticky TOC column -->
+    <div class="toc-col">
+        {% include toc.html %}
+    </div>
+    {% endunless %}
+    <!-- /.toc-container-wrapper -->
 </div>
 </div>
 </body>

docs/_layouts/page.html

@@ -34,9 +34,7 @@ layout: default
     <div class="summary">{{page.summary}}</div>
    {% endif %}
 
-    {% unless page.toc == false %}
+    <div id="inline-toc"><!-- empty, move TOC here when screen size too small --></div>
-    {% include toc.html %}
-    {% endunless %}
 
 
     {% if site.github_editme_path %}

docs/css/customstyles.css

@@ -1,6 +1,68 @@
 body {
     font-size:15px;
 }
+@media (max-width: 1349px) {
+    /* Small screen, inline TOC*/
+    .container-toc-wrapper {
+        display: block;
+    }
+
+    div.toc-col {
+        display: none;
+    }
+
+    div#toc{
+        margin-top: 15px;
+        margin-left: 0px;
+        margin-right: 0px;
+    }
+
+    .container {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+@media (min-width: 1350px) {
+    /* Medium screens, keep sticky TOC but remove justify-content*/
+    div#toc{
+        margin-top: 60px;
+        margin-left: -15px;
+        margin-right: 15px;
+    }
+    .container {
+        margin-left: 15px;
+        margin-right: 15px;
+    }
+
+    .container-toc-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+@media (min-width: 1600px) {
+    /* Sticky TOC functionality */
+    div#toc{
+        margin-top: 60px;
+        margin-left: -15px;
+        margin-right: 15px;
+    }
+    .container {
+        margin-left: 15px;
+        margin-right: 15px;
+    }
+
+    .container-toc-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
 
 .bs-callout {
     padding: 20px;

docs/js/customscripts.js

@@ -1,6 +1,14 @@
 
 $('#mysidebar').height($(".nav").height());
 
+// Detect small devices and move the TOC in line
+function moveToc(){
+    if(window.innerWidth < 1350){
+        $( "#toc" ).detach().appendTo("#inline-toc").removeClass("affix");
+    } else {
+        $( "#toc" ).detach().appendTo(".toc-col").addClass("affix");
+    }
+}
 
 $( document ).ready(function() {
 
@@ -8,7 +16,7 @@ $( document ).ready(function() {
     // position as your scroll. if you have a lot of nav items, this height may not work for you.
     var h = $(window).height();
     //console.log (h);
-    if (h > 800) {
+    if (h > 600) {
         $( "#mysidebar" ).attr("class", "nav affix");
     }
     // activate tooltips. although this is a bootstrap js function, it must be activated this way in your theme.
@@ -20,6 +28,8 @@ $( document ).ready(function() {
      * AnchorJS
      */
     anchors.add('h2,h3,h4,h5');
+    // Check if TOC needs to be moved on page load
+    moveToc();
 
 });
 
@@ -53,3 +63,6 @@ $(function() {
         }
     });
 });
+
+// Check if TOC needs to be moved on window resizing
+$(window).resize(function () {moveToc();});