github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-18 18:33:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mimi 2021-09-02 23:38:57 +08:00 committed by GitHub
parent 777a70b751
commit 76bba71574
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 9 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
layout/_macro/sidebar.njk
View File

@ -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>

8
source/css/_common/outline/sidebar/index.styl
View File

@ -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) {

3
source/css/_common/outline/sidebar/sidebar-nav.styl
View File

@ -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;
}

2
source/js/next-boot.js
View File

@ -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}/)) {

19
source/js/utils.js
View File

@ -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');