Optimize back-to-top style

next-theme · Jun 20, 2020 · b8e2ce8 · b8e2ce8
1 parent 5d2f92e
commit b8e2ce8
Show file tree

Hide file tree

Showing 11 changed files with 31 additions and 40 deletions.
diff --git a/scripts/helpers/next-config.js b/scripts/helpers/next-config.js
@@ -18,7 +18,6 @@ hexo.extend.helper.register('next_config', function() {
     exturl    : theme.exturl,
     sidebar   : theme.sidebar,
     copycode  : theme.codeblock.copy_button.enable,
-    back2top  : theme.back2top,
     bookmark  : theme.bookmark,
     fancybox  : theme.fancybox,
     mediumzoom: theme.mediumzoom,

diff --git a/source/css/_common/components/back-to-top-sidebar.styl b/source/css/_common/components/back-to-top-sidebar.styl
@@ -3,12 +3,6 @@
   opacity: 0;
   transition: opacity $transition-ease;
 
-  if (!hexo-config('back2top.scrollpercent')) {
-    span {
-      display: none;
-    }
-  }
-
   &.back-to-top-on {
     cursor: pointer;
     opacity: $b2t-opacity;

diff --git a/source/css/_common/components/back-to-top.styl b/source/css/_common/components/back-to-top.styl
@@ -1,24 +1,15 @@
 .back-to-top {
-  background: $b2t-bg-color;
   bottom: $b2t-position-bottom;
   box-sizing: border-box;
   color: $b2t-color;
-  cursor: pointer;
-  opacity: $b2t-opacity;
   padding: 0 6px;
-  position: fixed;
   transition: bottom $transition-ease;
-  z-index: $zindex-3;
   sidebar-toggle();
 
   if (hexo-config('back2top.scrollpercent')) {
     width: initial;
   } else {
     width: 24px;
-
-    span {
-      display: none;
-    }
   }
 
   &:hover {
@@ -28,8 +19,4 @@
   &.back-to-top-on {
     bottom: $b2t-position-bottom-on;
   }
-
-  +tablet-mobile() {
-    opacity: $b2t-opacity-hover;
-  }
 }
diff --git a/source/css/_common/components/components.styl b/source/css/_common/components/components.styl
@@ -1,6 +1,12 @@
 if (hexo-config('back2top.enable')) {
   .back-to-top {
     font-size: $b2t-font-size;
+
+    if (!hexo-config('back2top.scrollpercent')) {
+      span {
+        display: none;
+      }
+    }
   }
 
   @import (hexo-config('back2top.sidebar') ? 'back-to-top-sidebar' : 'back-to-top');

diff --git a/source/css/_common/outline/header/bookmark.styl b/source/css/_common/outline/header/bookmark.styl
@@ -3,7 +3,7 @@
   position: fixed;
   top: -10px;
   transition: top .3s;
-  sidebar-toggle(true);
+  sidebar-toggle-position(true);
 
   +tablet-mobile() {
     display: none;

diff --git a/source/css/_common/outline/sidebar/sidebar-nav.styl b/source/css/_common/outline/sidebar/sidebar-nav.styl
@@ -32,6 +32,7 @@
 
 .sidebar-panel {
   display: none;
+  max-height: var(--sidebar-wrapper-height);
   overflow-x: hidden;
   overflow-y: auto;
 }

diff --git a/source/css/_common/outline/sidebar/sidebar-toggle.styl b/source/css/_common/outline/sidebar/sidebar-toggle.styl
@@ -1,17 +1,9 @@
 .sidebar-toggle {
-  background: $black-deep;
   bottom: 45px;
-  cursor: pointer;
   height: 12px;
   padding: 6px 5px;
-  position: fixed;
   width: 14px;
-  z-index: $zindex-3;
   sidebar-toggle();
-
-  +tablet-mobile() {
-    opacity: $b2t-opacity-hover;
-  }
 }
 
 .sidebar-toggle:hover .toggle-line {

diff --git a/source/css/_common/outline/sidebar/sidebar.styl b/source/css/_common/outline/sidebar/sidebar.styl
@@ -1,7 +1,7 @@
 .sidebar {
   background: $black-deep;
   bottom: 0;
-  if (!hexo-config('back2top.sidebar')){
+  if (!hexo-config('back2top.sidebar')) {
     box-shadow: inset 0 2px 6px black;
   }
   position: fixed;

diff --git a/source/css/_mixins.styl b/source/css/_mixins.styl
@@ -110,7 +110,7 @@ main-container() {
   }
 }
 
-sidebar-toggle($reverse = false) {
+sidebar-toggle-position($reverse = false) {
   $condition = hexo-config('sidebar.position') == 'right';
   if (($scheme == 'Muse') || ($scheme == 'Mist')) {
     $condition = $condition == $reverse;
@@ -127,3 +127,20 @@ sidebar-toggle($reverse = false) {
     }
   }
 }
+
+sidebar-toggle() {
+  background: $b2t-bg-color;
+  cursor: pointer;
+  opacity: $b2t-opacity;
+  position: fixed;
+  z-index: $zindex-3;
+  sidebar-toggle-position();
+
+  &:hover {
+    opacity: $b2t-opacity-hover;
+  }
+
+  +tablet-mobile() {
+    opacity: $b2t-opacity-hover;
+  }
+}
diff --git a/source/css/_schemes/Muse/_menu.styl b/source/css/_schemes/Muse/_menu.styl
@@ -2,10 +2,6 @@
   +mobile() {
     border-bottom: 1px solid $grey-lighter;
     border-top: 1px solid $grey-lighter;
-    left: 0;
-    margin: 0;
-    padding: 0;
-    width: 100%;
   }
 }
 

diff --git a/source/js/utils.js b/source/js/utils.js
@@ -317,15 +317,14 @@ NexT.utils = {
    */
   initSidebarDimension: function() {
     const sidebarNav = document.querySelector('.sidebar-nav');
-    const sidebarNavHeight = sidebarNav.style.display !== 'none' ? sidebarNav.offsetHeight : 0;
+    const sidebarb2t = document.querySelector('.sidebar-inner .back-to-top');
+    const sidebarb2tHeight = sidebarb2t ? sidebarb2t.offsetHeight : 0;
     const sidebarOffset = CONFIG.sidebar.offset || 12;
-    const sidebarb2tHeight = CONFIG.back2top.enable && CONFIG.back2top.sidebar ? document.querySelector('.back-to-top').offsetHeight : 0;
-    let sidebarSchemePadding = (CONFIG.sidebar.padding * 2) + sidebarNavHeight + sidebarb2tHeight;
+    let sidebarSchemePadding = CONFIG.sidebar.padding * 2 + sidebarNav.offsetHeight + sidebarb2tHeight;
     if (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') sidebarSchemePadding += sidebarOffset * 2;
     // Initialize Sidebar & TOC Height.
     const sidebarWrapperHeight = document.body.offsetHeight - sidebarSchemePadding + 'px';
-    document.querySelector('.site-overview-wrap').style.maxHeight = sidebarWrapperHeight;
-    document.querySelector('.post-toc-wrap').style.maxHeight = sidebarWrapperHeight;
+    document.documentElement.style.setProperty('--sidebar-wrapper-height', sidebarWrapperHeight);
   },
 
   updateSidebarPosition: function() {