github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-20 19:02:33 +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

2
layout/_macro/sidebar.njk
View File

@ -22,6 +22,7 @@
</li> </li>
</ul> </ul>
<div class="sidebar-panel-container">
<!--noindex--> <!--noindex-->
<section class="post-toc-wrap sidebar-panel"> <section class="post-toc-wrap sidebar-panel">
{%- if display_toc %} {%- if display_toc %}
@ -35,6 +36,7 @@
{{- next_inject('sidebar') }} {{- next_inject('sidebar') }}
</section> </section>
</div>
{%- if theme.back2top.enable and theme.back2top.sidebar %} {%- if theme.back2top.enable and theme.back2top.sidebar %}
<div class="back-to-top animated"> <div class="back-to-top animated">

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

@ -35,13 +35,16 @@
} }
} }
.sidebar-panel { .sidebar-panel-container {
display: none;
max-height: var(--sidebar-wrapper-height); max-height: var(--sidebar-wrapper-height);
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }
.sidebar-panel {
display: none;
}
.sidebar-overview-active .site-overview-wrap { .sidebar-overview-active .site-overview-wrap {
// Flexbox layout makes it possible to reorder the child // Flexbox layout makes it possible to reorder the child
// elements of .site-overview-item through the `order` CSS property // 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; parent = parent.parentNode;
} }
// Scrolling to center active TOC element if TOC content is taller then viewport. // 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({ window.anime({
targets : tocElement, targets : tocElement,
duration : 200, duration : 200,