New element .sidebar-panel-container

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

View File

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

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

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,