Merge pull request pmd#3804 from JerritEic:issue2502-Add-floating-tab…

…le-of-contents [doc] Add floating table of contents (issue pmd#2502) pmd#3804 * pr-3804: Add @JerritEic as a contributor [doc] Update release notes (pmd#2502 pmd#3804) Fix overlap by specifying minimum content div width Add responsive floating table-of-contents to documentation website
adangel · Feb 25, 2022 · 36134ed · 36134ed
2 parents a6e5584 + fb4973b
commit 36134ed
Show file tree

Hide file tree

Showing 7 changed files with 190 additions and 88 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -6538,6 +6538,16 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "JerritEic",
+      "name": "JerritEic",
+      "avatar_url": "https://avatars.githubusercontent.com/u/60690273?v=4",
+      "profile": "https://github.com/JerritEic",
+      "contributions": [
+        "code",
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

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

diff --git a/docs/_layouts/page.html b/docs/_layouts/page.html
@@ -34,9 +34,7 @@ <h1 class="post-title-main">{{ page.title }}</h1>
     <div class="summary">{{page.summary}}</div>
    {% endif %}
 
-    {% unless page.toc == false %}
-    {% include toc.html %}
-    {% endunless %}
+    <div id="inline-toc"><!-- empty, move TOC here when screen size too small --></div>
 
 
     {% if site.github_editme_path %}

diff --git a/docs/css/customstyles.css b/docs/css/customstyles.css
@@ -1,6 +1,70 @@
 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;
+        width: 75%;
+    }
+
+    .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;
+        width: 75%;
+    }
+
+    .container-toc-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
 
 .bs-callout {
     padding: 20px;

diff --git a/docs/js/customscripts.js b/docs/js/customscripts.js
@@ -1,14 +1,22 @@
 
 $('#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() {
 
     //this script says, if the height of the viewport is greater than 800px, then insert affix class, which makes the nav bar float in a fixed
     // 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();});