Merge pull request #2110 from ZhenShuo2021/fix/toc

 Improved Table of Contents Display
This commit is contained in:
Nuno Coração
2025-05-27 00:04:31 +01:00
committed by GitHub
3 changed files with 22 additions and 31 deletions

View File

@@ -1507,8 +1507,8 @@ body.zen-mode-enable {
.overflow-visible {
overflow: visible;
}
.overflow-y-scroll {
overflow-y: scroll;
.overflow-y-auto {
overflow-y: auto;
}
.overscroll-contain {
overscroll-behavior: contain;
@@ -3534,6 +3534,14 @@ body a, body button {
.prose div.min-w-0.max-w-prose>*:first-child {
margin-top: calc(var(--spacing) * 3);
}
#TableOfContents {
max-width: 25vw;
}
#TOCView {
max-height: calc(100vh - 150px);
min-height: 0;
overflow-x: hidden;
}
.toc ul, .toc li {
list-style-type: none;
padding-inline: calc(var(--spacing) * 0);

View File

@@ -59,6 +59,16 @@ body button {
}
/* Table of Contents */
#TableOfContents {
max-width: 25vw;
}
#TOCView {
max-height: calc(100vh - 150px);
min-height: 0;
overflow-x: hidden;
}
.toc ul,
.toc li {
@apply px-0 leading-snug list-none;

View File

@@ -1,5 +1,4 @@
<details open id="TOCView"
class="toc-right mt-0 overflow-y-scroll overscroll-contain scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600 rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 hidden lg:block">
<details open id="TOCView" class="toc-right mt-0 overflow-y-auto overscroll-contain scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600 rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 hidden lg:block">
<summary
class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">
{{ i18n "article.table_of_contents" }}
@@ -21,32 +20,7 @@
</details>
<script>
var margin = 200;
var marginError = 50;
(function () {
var $window = $(window);
var $toc = $('#TOCView');
var tocHeight = $toc.height();
function onResize() {
var windowAndMarginHeight = $window.height() - margin;
if(tocHeight >= windowAndMarginHeight) {
$toc.css("overflow-y", "scroll")
$toc.css("max-height", (windowAndMarginHeight + marginError) + "px")
} else {
$toc.css("overflow-y", "hidden")
$toc.css("max-height", "9999999px")
}
}
$window.on('resize', onResize);
$(document).ready(onResize);
})();
{{ if .Site.Params.smartTOC }}
(function () {
var $toc = $('#TableOfContents');
if ($toc.length > 0) {
@@ -72,7 +46,7 @@
$(e).removeClass('active');
{{ end }}
});
$toc.find('a[href="#' + id + '"]').addClass('active')
$toc.find('a[href="#' + id + '"]').addClass('active');
$toc.find('a[href="#' + id + '"]').parentsUntil('#TableOfContents').each(function (i, e) {
$(e).children('a').parents('ul').show();
});
@@ -88,5 +62,4 @@
}
})();
{{ end }}
</script>