Calculate --sidebar-wrapper-height in pure CSS (next-theme#360)

lingyf · Sep 2, 2021 · 5c8bdca · 5c8bdca
1 parent dfaf112
commit 5c8bdca
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 29 deletions.
diff --git a/layout/_macro/sidebar.njk b/layout/_macro/sidebar.njk
@@ -32,11 +32,9 @@
         <!--/noindex-->
 
         <div class="site-overview-wrap sidebar-panel">
-          <div class="site-overview">
-            {{ partial('_partials/sidebar/site-overview.njk', {}, {cache: theme.cache.enable}) }}
+          {{ partial('_partials/sidebar/site-overview.njk', {}, {cache: theme.cache.enable}) }}
 
-            {{- next_inject('sidebar') }}
-          </div>
+          {{- next_inject('sidebar') }}
         </div>
       </div>
 

diff --git a/source/css/_common/outline/sidebar/index.styl b/source/css/_common/outline/sidebar/index.styl
@@ -1,11 +1,11 @@
 .sidebar-inner {
   color: $grey-dark;
+  // Init Sidebar & TOC inner dimensions on all pages and for all schemes.
+  $offset = (($scheme == 'Pisces') or ($scheme == 'Gemini')) ? $sidebar-offset : $sidebar-padding;
+  max-height: 'calc(100vh - %s)' % unit($offset * 2, 'px');
   padding: $sidebar-padding 10px;
   text-align: center;
-}
-
-.site-overview {
-  max-height: var(--sidebar-wrapper-height);
+  flex-column();
 }
 
 .site-overview-item:not(:first-child) {

diff --git a/source/css/_common/outline/sidebar/sidebar-nav.styl b/source/css/_common/outline/sidebar/sidebar-nav.styl
@@ -35,8 +35,9 @@
   }
 }
 
+// Need for Sidebar/TOC inner scrolling if content taller then viewport.
 .sidebar-panel-container {
-  max-height: var(--sidebar-wrapper-height);
+  flex: 1;
   overflow-x: hidden;
   overflow-y: auto;
 }

diff --git a/source/js/next-boot.js b/source/js/next-boot.js
@@ -45,8 +45,6 @@ NexT.boot.registerEvents = function() {
     });
   });
 
-  window.addEventListener('resize', NexT.utils.initSidebarDimension);
-
   window.addEventListener('hashchange', () => {
     const tHash = location.hash;
     if (tHash !== '' && !tHash.match(/%\S{2}/)) {

diff --git a/source/js/utils.js b/source/js/utils.js
@@ -273,6 +273,7 @@ NexT.utils = {
     }
     // Scrolling to center active TOC element if TOC content is taller then viewport.
     const tocElement = document.querySelector('.sidebar-panel-container');
+    if (!tocElement.parentNode.classList.contains('sidebar-toc-active')) return;
     window.anime({
       targets  : tocElement,
       duration : 200,
@@ -281,25 +282,7 @@ NexT.utils = {
     });
   },
 
-  /**
-   * Init Sidebar & TOC inner dimensions on all pages and for all schemes.
-   * Need for Sidebar/TOC inner scrolling if content taller then viewport.
-   */
-  initSidebarDimension: function() {
-    const sidebarNav = document.querySelector('.sidebar-nav');
-    const sidebarb2t = document.querySelector('.sidebar-inner .back-to-top');
-    const sidebarNavHeight = sidebarNav ? sidebarNav.offsetHeight : 0;
-    const sidebarb2tHeight = sidebarb2t ? sidebarb2t.offsetHeight : 0;
-    const sidebarOffset = CONFIG.sidebar.offset || 12;
-    let sidebarSchemePadding = (CONFIG.sidebar.padding * 2) + sidebarNavHeight + sidebarb2tHeight;
-    if (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') sidebarSchemePadding += sidebarOffset * 2;
-    // Initialize Sidebar & TOC Height.
-    const sidebarWrapperHeight = document.body.offsetHeight - sidebarSchemePadding + 'px';
-    document.documentElement.style.setProperty('--sidebar-wrapper-height', sidebarWrapperHeight);
-  },
-
   updateSidebarPosition: function() {
-    NexT.utils.initSidebarDimension();
     if (window.innerWidth < 992 || CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') return;
     // Expand sidebar on post detail page by default, when post has a toc.
     const hasTOC = document.querySelector('.post-toc');