Merge pull request #2898 from ehuss/on-this-page

Rework the look of the header navigation

Author: ehuss

crates/mdbook-html/front-end/css/chrome.css

@@ -624,6 +624,20 @@ html:not(.sidebar-resizing) .sidebar {
     transform: rotate(90deg);
 }
 
+.chapter a.current-header {
+    color: var(--sidebar-active);
+}
+
+.on-this-page {
+    margin-left: 22px;
+    border-inline-start: 4px solid var(--sidebar-header-border-color);
+    padding-left: 8px;
+}
+
+.on-this-page > ol {
+    padding-left: 0;
+}
+
 /* Horizontal line in chapter list. */
 .spacer {
     width: 100%;
@@ -735,20 +749,3 @@ html:not(.sidebar-resizing) .sidebar {
     /* mdbook's margin for h2 is way too large. */
     margin: 10px;
 }
-
-.current-header {
-    /* Allows the circle positioning. */
-    position: relative
-}
-
-/* Places a circle just before the current header in the sidebar. */
-.current-header::before {
-    content: '';
-    position: absolute;
-    left: -16px;
-    margin-top: 10px;
-    width: 8px;
-    height: 8px;
-    background-color: var(--sidebar-active);
-    border-radius: 50%;
-}

crates/mdbook-html/front-end/css/variables.css

@@ -73,6 +73,8 @@
     --blockquote-important-color: #d3abff;
     --blockquote-warning-color: #f0b72f;
     --blockquote-caution-color: #f21424;
+
+    --sidebar-header-border-color: #c18639;
 }
 
 .coal {
@@ -132,6 +134,8 @@
     --blockquote-important-color: #ab7df8;
     --blockquote-warning-color: #d29922;
     --blockquote-caution-color: #d91b29;
+
+    --sidebar-header-border-color: #3473ad;
 }
 
 .light, html:not(.js) {
@@ -191,6 +195,8 @@
     --blockquote-important-color: #8250df;
     --blockquote-warning-color: #9a6700;
     --blockquote-caution-color: #b52731;
+
+    --sidebar-header-border-color: #6e6edb;
 }
 
 .navy {
@@ -250,6 +256,8 @@
     --blockquote-important-color: #ab7df8;
     --blockquote-warning-color: #d29922;
     --blockquote-caution-color: #f21424;
+
+    --sidebar-header-border-color: #2f6ab5;
 }
 
 .rust {
@@ -307,6 +315,8 @@
     --blockquote-important-color: #8250df;
     --blockquote-warning-color: #603700;
     --blockquote-caution-color: #aa1721;
+
+    --sidebar-header-border-color: #8c391f;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -367,5 +377,7 @@
         --blockquote-important-color: #ab7df8;
         --blockquote-warning-color: #d29922;
         --blockquote-caution-color: #d91b29;
+
+        --sidebar-header-border-color: #3473ad;
     }
 }

crates/mdbook-html/front-end/templates/toc.js.hbs

@@ -424,8 +424,11 @@ window.customElements.define('mdbook-sidebar-scrollbox', MDBookSidebarScrollbox)
             currentParent.ol.appendChild(li);
         }
 
+        const onThisPage = document.createElement('div');
+        onThisPage.classList.add('on-this-page');
+        onThisPage.append(stack[0].ol);
         const activeItemSpan = activeSection.parentElement;
-        activeItemSpan.after(stack[0].ol);
+        activeItemSpan.after(onThisPage);
     });
 
     document.addEventListener('DOMContentLoaded', reloadCurrentHeader);

tests/gui/heading-nav-unusual-levels.goml

@@ -3,5 +3,4 @@
 set-window-size: (1400, 800)
 go-to: |DOC_PATH| + "heading-nav/unusual-heading-levels.html"
 
-assert-property: ("//a[@href='unusual-heading-levels.html']/../following-sibling::ol", {"innerHTML": '<ol class="section"><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-3" class="header-in-summary current-header">Heading 3</a></span></li></ol><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-2" class="header-in-summary">Heading 2</a></span><ol class="section"><ol class="section"><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-5" class="header-in-summary">Heading 5</a></span></li><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-51" class="header-in-summary">Heading 5.1</a></span></li></ol></ol></li>'})
-
+assert-property: ("//a[@href='unusual-heading-levels.html']/../following-sibling::div", {"innerHTML": '<ol class="section"><ol class="section"><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-3" class="header-in-summary current-header">Heading 3</a></span></li></ol><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-2" class="header-in-summary">Heading 2</a></span><ol class="section"><ol class="section"><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-5" class="header-in-summary">Heading 5</a></span></li><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-51" class="header-in-summary">Heading 5.1</a></span></li></ol></ol></li></ol>'})