UI Enhancements: TOC depth and Table scrollbars (#542)

* Fix TOC depth

* Add custom scrollbars to tables

source/_static/js/main.js

@@ -1,5 +1,5 @@
 window.addEventListener("DOMContentLoaded", (event) => {
-  const tocMenuEl = document.querySelector(".content__toc__inner > ul");
+  const tocMenuEl = document.querySelector("#table-of-contents > ul.simple");
   var readModeLs = localStorage.getItem("read-mode");
   
   // --------------------------------------------------
@@ -10,6 +10,17 @@ window.addEventListener("DOMContentLoaded", (event) => {
   }
 
 
+  // --------------------------------------------------
+  // Detect parent iframe.
+  // This is required to hide the navigation links when viewed via PathFactory for analytics purposes
+  // --------------------------------------------------
+  (function () {
+    if (window.location !== window.parent.location) {
+      document.body.classList.add("inside-iframe");
+    }
+  })();
+
+
   // --------------------------------------------------
   // Read mode
   // --------------------------------------------------
@@ -91,17 +102,6 @@ window.addEventListener("DOMContentLoaded", (event) => {
   })();
 
 
-  // --------------------------------------------------
-  // Detect parent iframe.
-  // This is required to hide the navigation links when viewed via PathFactory for analytics purposes
-  // --------------------------------------------------
-  (function () {
-    if (window.location !== window.parent.location) {
-      document.body.classList.add("inside-iframe");
-    }
-  })();
-
-
   // --------------------------------------------------
   // Get meta key based on the OS
   // --------------------------------------------------
@@ -120,6 +120,34 @@ window.addEventListener("DOMContentLoaded", (event) => {
   })();
 
 
+  // --------------------------------------------------
+  // TOC
+  // --------------------------------------------------
+  (function () {
+    // Move the TOC to the right side of the page
+    const tocOriginalEl = document.getElementById("table-of-contents");
+    const tocTargetEl = document.getElementById("content-toc");
+    const tocAsideEL = document.querySelector(".content__toc");
+
+    if (tocOriginalEl) {
+      tocTargetEl.parentNode.replaceChild(tocOriginalEl, tocTargetEl);
+    }
+    else {
+      tocAsideEL.style.display = "none";
+    }
+
+    
+    // Treat the TOC as a dropdown in mobile
+    const tocToggleEl = document.querySelector(".topic-title");
+    if(tocToggleEl) {
+      tocToggleEl.addEventListener("click", (event) => {
+        event.preventDefault();
+        tocMenuEl.closest(".content__toc").classList.toggle("active");
+      });
+    }
+  })();
+
+
   // --------------------------------------------------
   // Cookie banner
   // --------------------------------------------------
@@ -211,6 +239,11 @@ window.addEventListener("DOMContentLoaded", (event) => {
     function hideAside() {
       document.querySelector(".aside-backdrop").remove();
       document.documentElement.classList.remove("doc-active", "nav-active");
+
+      // Hide opened toc menu on mobile
+      if(tocMenuEl) {
+        tocMenuEl.closest(".content__toc").classList.remove("active");
+      }
     }
 
     asideToggleEls.forEach((item) => {
@@ -245,21 +278,6 @@ window.addEventListener("DOMContentLoaded", (event) => {
   })();
 
 
-  // --------------------------------------------------
-  // TOC in mobile
-  // --------------------------------------------------
-  (function () {
-    const tocToggleEl = document.querySelector(".content__toc__inner > h3 > a");
-
-    if(tocToggleEl) {
-      tocToggleEl.addEventListener("click", (event) => {
-        event.preventDefault();
-        tocMenuEl.closest(".content__toc").classList.toggle("active");
-      });
-    }
-  })();
-
-
   // --------------------------------------------------
   // Icon switches
   // e.g Read mode and Dark mode buttons
@@ -344,7 +362,7 @@ window.addEventListener("DOMContentLoaded", (event) => {
     if(tableEls.length > 0) {
       tableEls.forEach((item) => {
         var tableWrapper = document.createElement("div");
-        tableWrapper.classList.add("table-responsive");
+        tableWrapper.classList.add("table-responsive", "scrollbar");
         item.insertAdjacentElement("beforebegin", tableWrapper);
         tableWrapper.appendChild(item);
       });

source/_static/scss/includes/_layout.scss

@@ -7,22 +7,9 @@
 .content__main {
     flex: 1;
     min-width: 0;
-    align-self: flex-start;
     padding: var(--content-padding);
 }
 
-.sidebar-active {
-    .content__main {
-        padding-left: var(--content-padding);
-    }
-}
-
-.content__right {
-    position: sticky;
-    top: 0;
-    overflow: scroll;
-}
-
 .container { 
     margin: 0 auto;
     padding: 0 var(--content-padding);

source/_static/scss/includes/_misc.scss

@@ -16,6 +16,7 @@
 
   &::-webkit-scrollbar {
     width: 12px;
+    height: 12px;
   }
   
   &::-webkit-scrollbar-track {

source/_static/scss/includes/_reset.scss

@@ -209,16 +209,32 @@ table.docutils {
 
 
 .table-responsive {
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
     margin: 1rem 0 2rem;
-    border-left: 1px solid var(--table-border-color);
-    border-right: 1px solid var(--table-border-color);
+    border: 1px solid var(--table-border-color);
+
+    &.scrollbar {
+        overflow-x: auto;
+        overflow-x: overlay;
+        -webkit-overflow-scrolling: touch;
+
+    }
 
     table {
         margin: 0;
 
         tr {
+            &:first-child {
+                th {
+                    border-top-color: transparent;
+                }
+            }
+
+            &:last-child {
+                td {
+                    border-bottom-color: transparent;
+                }
+            }
+
             td, th {
                 &:first-child {
                     border-left-color: transparent;

source/_static/scss/includes/_theme.scss

@@ -79,6 +79,7 @@ $theme-properties: (
 
     // TOC
     --toc-caret-icon: url("../img/icons/chevron-down.svg") url("../img/icons/chevron-down-dark.svg"),
+    --toc-dropdown-bg: $light-100 $dark-100,
 
     // Mainmenu
     --nav-bg: $white $dark-100,

source/_static/scss/includes/_toc.scss

@@ -1,5 +1,5 @@
-#table-of-contents {
-    display: none;
+div.topic {
+    all: revert;
 }
 
 .content__toc {
@@ -21,6 +21,7 @@
 
     @include breakpoint-max(breakpoints(lg)) {
         display: flex;
+        gap: 0.75rem;
         align-items: center;
         padding: var(--content-padding);
         background-color: var(--body-bg);
@@ -28,20 +29,24 @@
     }
 
     .icon {
-        height: 2.7rem;
-        width: 2.7rem;
-        padding: 0.75rem;
+        height: 2.5rem;
+        width: 2.5rem;
+        padding: 0.7rem;
         border: 1px solid var(--theme-light-bg);
         cursor: pointer;
+
+        &:last-child {
+            margin-left: auto;
+        }
     }
 
     &.active {
-        & > .content__toc__inner {
+        #table-of-contents {
             & > ul { 
                 display: block;
             }
         
-            h3 > a {
+            .topic-title {
                 border-radius: $border-radius $border-radius 0 0;
     
                 &:after {
@@ -52,63 +57,47 @@
     }
 }
 
-.content__toc__inner {
-    @include breakpoint-max(breakpoints(lg)) {
-        position: relative;
-        display: flex;
-        align-items: center;
-        flex: 1;
-        margin: 0 0.75rem;
+#table-of-contents {
+    flex: 1;
+    position: relative;
 
-        & > h3 {
-            flex: 1;
-        }
-    }
-
-    h3 {
+    .topic-title {
+        color: var(--headings-color);
         margin: 0;
         line-height: 1;
 
-        & > a {
-            font-size: 1rem;
-            color: var(--headings-color);
-            font-size: 0;
+        @include breakpoint-max(breakpoints(lg)) {
+            padding: 0.85rem 1rem;
+            background-color: var(--theme-light-bg);
+            border-radius: $border-radius;
+            display: block;
+            position: relative;
+            font-size: $font-size-sm;
+            cursor: pointer;
 
-            &:before {
-                content: "Contents";
-                font-size: 1rem;
-            }
-
-            @include breakpoint-max(breakpoints(lg)) {
-                padding: 0.85rem;
-                background-color: var(--theme-light-bg);
-                border-radius: $border-radius;
-                display: block;
-                position: relative;
-
-                &:after {
-                    content: "";
-                    height: 1rem;
-                    width: 1rem;
-                    position: absolute;
-                    right: 1.25rem;
-                    top: 0.9rem;
-                    background: var(--toc-caret-icon) no-repeat center;
-                    background-size: 1rem;
-                    transform-origin: center;
-                }
+            &:after {
+                content: "";
+                height: 1rem;
+                width: 1rem;
+                position: absolute;
+                right: 1rem;
+                top: 0.8rem;
+                background: var(--toc-caret-icon) no-repeat center;
+                background-size: 0.8rem;
+                transform-origin: center;
             }
         }
     }
 
     ul {
-        margin: 0;
-        padding: 0;
         list-style: none;
+        padding: 0;
+        margin: 0;
         font-size: $font-size-sm;
+        color: var(--text-muted-color);
 
-        ul ul {
-            margin-left: 1rem;
+        ul {
+            margin-left: 0.75rem;
         }
     }
 
@@ -134,57 +123,26 @@
             left: 0;
             top: 100%;
             width: 100%;
-            background-color: var(--theme-light-bg);
+            background-color: var(--toc-dropdown-bg);
             display: none;
             border-radius: 0 0 $border-radius $border-radius;
             z-index: 1;
-            border-top: 1px solid var(--theme-light-hover-bg);
             padding: 0.65rem 1rem 1rem;
             max-height: 12rem;
             overflow-y: auto;
         }
 
-        & > li {
-            & > a {
-                font-size: 0;
+        a {
+            display: block;
+            color: var(--text-muted-color);
+            padding: 0.15rem 0;
 
-                &:before {
-                    content: "Introduction";
-                    font-size: $font-size-sm;
-                    transition: color 300ms;
-                }
+            code {
+                display: none;
             }
 
-            a {
-                display: block;
-                color: var(--text-muted-color);
-                code {
-                    display: none;
-                }
-
-                &:hover {
-                    color: var(--text-color);
-                }
-            }
-
-            & > ul {
-                & > li {
-                    a {
-                        transition: color 300ms;
-                        margin: 0.25rem 0;
-                        position: relative;
-
-                        &:before {
-                            content: "";
-                            width: 2px;
-                            height: calc(100% - 0.8rem);
-                            position: absolute;
-                            left: 0;
-                            top: 0.5rem;
-                            
-                        }
-                    }
-                }
+            &:hover {
+                color: var(--text-color);
             }
         }
     }

source/_templates/toc.html

@@ -4,11 +4,7 @@
         TOC Menu
      </button>
 
-    <div class="content__toc__inner">
-        {%- block sidebartoc %}
-            {%- include "localtoc.html" %}
-        {%- endblock %}
-    </div>
+    <div id="content-toc"></div>
 
     <button class="icon search-toggle" type="button">
        {%- include "icons/search.html" %}