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

New element .sidebar-panel-container

Browse Source
This commit is contained in:
Mimi 2020-10-27 00:40:32 +08:00
parent 5385defde8
commit 885e0b70db
3 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
layout/_macro/sidebar.njk
View File

@ -22,19 +22,21 @@
</li>
</ul>
<!--noindex-->
<section class="post-toc-wrap sidebar-panel">
{%- if display_toc %}
<div class="post-toc animated">{{ toc }}</div>
{%- endif %}
</section>
<!--/noindex-->
<div class="sidebar-panel-container">
<!--noindex-->
<section class="post-toc-wrap sidebar-panel">
{%- if display_toc %}
<div class="post-toc animated">{{ toc }}</div>
{%- endif %}
</section>
<!--/noindex-->
<section class="site-overview-wrap sidebar-panel">
{{ partial('_partials/sidebar/site-overview.njk', {}, {cache: theme.cache.enable}) }}
<section class="site-overview-wrap sidebar-panel">
{{ partial('_partials/sidebar/site-overview.njk', {}, {cache: theme.cache.enable}) }}
{{- next_inject('sidebar') }}
</section>
{{- next_inject('sidebar') }}
</section>
</div>
{%- if theme.back2top.enable and theme.back2top.sidebar %}
<div class="back-to-top animated">

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

@ -35,13 +35,16 @@
}
}
.sidebar-panel {
display: none;
.sidebar-panel-container {
max-height: var(--sidebar-wrapper-height);
overflow-x: hidden;
overflow-y: auto;
}
.sidebar-panel {
display: none;
}
.sidebar-overview-active .site-overview-wrap {
// Flexbox layout makes it possible to reorder the child
// elements of .site-overview-item through the `order` CSS property

2
source/js/utils.js
View File

@ -272,7 +272,7 @@ NexT.utils = {
parent = parent.parentNode;
}
// Scrolling to center active TOC element if TOC content is taller then viewport.
const tocElement = document.querySelector('.post-toc-wrap');
const tocElement = document.querySelector('.sidebar-panel-container');
window.anime({
targets : tocElement,
duration : 200,