[skywalking-website] branch master updated: style: remove width from doc outline (#244)

[wu...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 4bed072  style: remove width from doc outline (#244)
4bed072 is described below

commit 4bed072050b53050b488c35dbae99a3802b2ad61
Author: Stephen Ni <ni...@users.noreply.github.com>
AuthorDate: Tue Mar 16 11:13:26 2021 +0800

    style: remove width from doc outline (#244)
---
 themes/docsy/assets/scss/_blog.scss               |  9 +++++---
 themes/docsy/assets/scss/_custom_project_doc.scss | 12 ++++++++++
 themes/docsy/layouts/partials/toc.html            | 27 +++++++++++++++++++----
 3 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/themes/docsy/assets/scss/_blog.scss b/themes/docsy/assets/scss/_blog.scss
index f96ff5a..e3a0e3d 100644
--- a/themes/docsy/assets/scss/_blog.scss
+++ b/themes/docsy/assets/scss/_blog.scss
@@ -62,15 +62,18 @@
     margin-top: 40px;
     z-index: 9;
     background-color: #fff;
-    width: 190px;
     padding: 15px;
+    width: 190px;
+    a.active{
+      color: #3176d9;
+    }
   }
 
-  .fix {
+  .fixed {
     position: fixed !important;
     top: 26px;
     z-index: 99;
-    box-shadow: 0px 0px 8px 0px rgba(198, 204, 222, 0.3);
+    box-shadow: 0px 0px 5px 0px rgba(198, 204, 222, 0.3);
 
   }
 }
diff --git a/themes/docsy/assets/scss/_custom_project_doc.scss b/themes/docsy/assets/scss/_custom_project_doc.scss
index d23de3f..28985fc 100644
--- a/themes/docsy/assets/scss/_custom_project_doc.scss
+++ b/themes/docsy/assets/scss/_custom_project_doc.scss
@@ -62,6 +62,18 @@
     z-index: 9999;
     display: none;
   }
+  .td-main {
+    #TableOfContents {
+      width: auto;
+      border-left: 1px solid #dee2e6;
+    }
+    .td-toc{
+      border-left: none;
+      .fixed {
+        box-shadow: none;
+      }
+    }
+  }
 }
 
 @media (max-width: 768px) {
diff --git a/themes/docsy/layouts/partials/toc.html b/themes/docsy/layouts/partials/toc.html
index 9a09753..e0d8df5 100644
--- a/themes/docsy/layouts/partials/toc.html
+++ b/themes/docsy/layouts/partials/toc.html
@@ -14,19 +14,38 @@
       return;
     }
     var top = $toc.offset().top;
+    $(window).on("scroll", debounce(setTop, 100))
+    $(window).on("scroll", debounce(addActive, 30))
 
-    window.onscroll = debounce(setTop)
+    function addActive() {
+      var scrollValue = $(window).scrollTop();
+      var topEle = null;
+      $.each($('main h1, main h2, main h3'), function (index, item) {
+        if ($(item).offset().top - 70 > scrollValue) {
+          return
+        }
+        if (!topEle) {
+          topEle = item
+        } else if ($(item).offset().top >= $(topEle).offset().top) {
+          topEle = item
+        }
+        if (topEle) {
+          var id = $(item).attr('id');
+          $toc.find('a').removeClass("active").end().find('a[href="' + '#' + id + '"]').addClass("active")
+        }
+      })
+    }
 
     function setTop() {
       var scrollValue = $(window).scrollTop();
       if (scrollValue >= top - 70) {
-        $toc.addClass('fix')
+        $toc.addClass('fixed')
       } else {
-        $toc.removeClass('fix')
+        $toc.removeClass('fixed')
       }
     }
 
-    function debounce(fn, wait = 200) {
+    function debounce(fn, wait) {
       var timeout = null;
       return function () {
         clearTimeout(timeout);