fix long toc issue
This commit is contained in:
zzossig
parent
69e72bd144
commit
621c83a392
|
|
@ -6,6 +6,7 @@ draft: false
|
|||
hideToc: false
|
||||
enableToc: true
|
||||
enableTocContent: false
|
||||
tocFolding: false
|
||||
tocPosition: inner
|
||||
tocLevels: ["h2", "h3", "h4"]
|
||||
tags:
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
function throttle(callback, limit) {
|
||||
var waiting = false;
|
||||
return function () {
|
||||
if (!waiting) {
|
||||
callback.apply(this, arguments);
|
||||
waiting = true;
|
||||
setTimeout(function () {
|
||||
waiting = false;
|
||||
}, limit);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -2,17 +2,32 @@
|
|||
width: 100%;
|
||||
max-width: $sidebar-width;
|
||||
position: fixed;
|
||||
overflow-y: auto;
|
||||
top: 7rem;
|
||||
font-size: 0.85rem;
|
||||
padding-left: 0.5rem;
|
||||
z-index: z('toc');
|
||||
z-index: z("toc");
|
||||
|
||||
@include themify($themes) {
|
||||
@include webkit-scrollbars(
|
||||
themed("custom-scrollbar-foreground-color"),
|
||||
themed("custom-scrollbar-background-color")
|
||||
);
|
||||
@include moz-scrollbars(themed("custom-scrollbar-foreground-color"), themed("custom-scrollbar-background-color"));
|
||||
}
|
||||
|
||||
&[data-dir="rtl"] {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
&[data-dir="ltr"] {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
&[data-ani="true"] {
|
||||
@include animation('slide-in-down-little .2s .3s 1 ease-in backwards');
|
||||
@include animation("slide-in-down-little .2s .3s 1 ease-in backwards");
|
||||
}
|
||||
|
||||
@include no-select;
|
||||
|
||||
|
||||
#TableOfContents {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -40,13 +55,13 @@
|
|||
top: 4.2rem;
|
||||
left: 1rem;
|
||||
position: absolute;
|
||||
|
||||
|
||||
@media only screen and (max-width: 1300px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&[data-ani="true"] {
|
||||
@include animation('slide-in-down-little .2s .3s 1 ease-in backwards');
|
||||
@include animation("slide-in-down-little .2s .3s 1 ease-in backwards");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -70,11 +85,11 @@
|
|||
margin-top: 0.5rem;
|
||||
|
||||
&[data-ani="true"] {
|
||||
@include animation('slide-in-down-little .2s .3s 1 ease-in backwards');
|
||||
@include animation("slide-in-down-little .2s .3s 1 ease-in backwards");
|
||||
}
|
||||
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('toc-label-color');
|
||||
color: themed("toc-label-color");
|
||||
}
|
||||
|
||||
&--outer {
|
||||
|
|
@ -85,127 +100,126 @@
|
|||
}
|
||||
|
||||
&[data-dir="ltr"] {
|
||||
&[data-folding=true] {
|
||||
&[data-folding="true"] {
|
||||
@include themify($themes) {
|
||||
a {
|
||||
color: themed('toc-vertical-line');
|
||||
color: themed("toc-vertical-line");
|
||||
position: relative;
|
||||
padding-left: 0.25rem;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
height: 100%;
|
||||
left: -1rem;
|
||||
margin-top: -1px;
|
||||
left: -0.5rem;
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
background-color: themed('toc-vertical-line');
|
||||
width: 2px;
|
||||
background-color: themed("toc-vertical-line");
|
||||
&:last-child {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.active {
|
||||
color: themed('toc-vertical-line-active');
|
||||
color: themed("toc-vertical-line-active");
|
||||
font-weight: 700;
|
||||
&::before {
|
||||
background-color: themed('toc-vertical-line-active');
|
||||
background-color: themed("toc-vertical-line-active");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-folding=false] {
|
||||
&[data-folding="false"] {
|
||||
@include themify($themes) {
|
||||
a {
|
||||
color: themed('toc-vertical-line');
|
||||
color: themed("toc-vertical-line");
|
||||
|
||||
&.active {
|
||||
color: themed('toc-vertical-line-active');
|
||||
|
||||
color: themed("toc-vertical-line-active");
|
||||
|
||||
&::before {
|
||||
background-color: themed('toc-vertical-line-active');
|
||||
content: '';
|
||||
background-color: themed("toc-vertical-line-active");
|
||||
content: "";
|
||||
height: 0.95rem;
|
||||
left: -1rem;
|
||||
left: -0.5rem;
|
||||
margin-top: 2px;
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
width: 2px;
|
||||
&:last-child {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
@include themify($themes) {
|
||||
li {
|
||||
li {
|
||||
li {
|
||||
margin-left: 1rem;
|
||||
color: themed('sidebar-li-color');
|
||||
}
|
||||
color: themed("sidebar-li-color");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-dir="rtl"] {
|
||||
&[data-folding=true] {
|
||||
a {
|
||||
color: inherit;
|
||||
position: relative;
|
||||
&::before {
|
||||
@include themify($themes) {
|
||||
background-color: themed('toc-vertical-line');
|
||||
}
|
||||
content: '';
|
||||
height: 100%;
|
||||
right: -1rem;
|
||||
margin-top: -1px;
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
&:last-child {
|
||||
background-color: transparent;
|
||||
&[data-folding="true"] {
|
||||
@include themify($themes) {
|
||||
a {
|
||||
color: themed("toc-vertical-line");
|
||||
position: relative;
|
||||
padding-right: 0.25rem;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
height: 100%;
|
||||
right: -0.5rem;
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
background-color: themed("toc-vertical-line");
|
||||
&:last-child {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
@include themify($themes) {
|
||||
color: themed('link-hover');
|
||||
.active {
|
||||
color: themed("toc-vertical-line-active");
|
||||
font-weight: 700;
|
||||
&::before {
|
||||
background-color: themed('toc-vertical-line-active');
|
||||
&::before {
|
||||
background-color: themed("toc-vertical-line-active");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[data-folding=false] {
|
||||
&[data-folding="false"] {
|
||||
@include themify($themes) {
|
||||
a {
|
||||
color: themed('toc-vertical-line');
|
||||
color: themed("toc-vertical-line");
|
||||
|
||||
&.active {
|
||||
color: themed('toc-vertical-line-active');
|
||||
|
||||
color: themed("toc-vertical-line-active");
|
||||
|
||||
&::before {
|
||||
background-color: themed('toc-vertical-line-active');
|
||||
content: '';
|
||||
background-color: themed("toc-vertical-line-active");
|
||||
content: "";
|
||||
height: 0.95rem;
|
||||
right: -1rem;
|
||||
right: -0.5rem;
|
||||
margin-top: 2px;
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
width: 2px;
|
||||
&:last-child {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -214,8 +228,8 @@
|
|||
li {
|
||||
li {
|
||||
margin-right: 1rem;
|
||||
color: themed('sidebar-li-color');
|
||||
}
|
||||
color: themed("sidebar-li-color");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -224,9 +238,9 @@
|
|||
ul {
|
||||
@include themify($themes) {
|
||||
a {
|
||||
color: themed('toc-title-color');
|
||||
color: themed("toc-title-color");
|
||||
&.active {
|
||||
color: themed('toc-vertical-line-active');
|
||||
color: themed("toc-vertical-line-active");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -249,4 +263,4 @@
|
|||
list-style-type: circle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@
|
|||
<script defer src="{{ $prop.RelPermalink }}"></script>
|
||||
{{ $fadeinout := resources.Get "js/helper/fadeinout.js" | resources.Minify }}
|
||||
<script defer src="{{ $fadeinout.RelPermalink }}"></script>
|
||||
{{ $throttle := resources.Get "js/helper/throttle.js" | resources.Minify }}
|
||||
<script defer src="{{ $throttle.RelPermalink }}"></script>
|
||||
|
||||
{{ if in .Params.Libraries "d3" }}
|
||||
<script defer src="{{ $d3.d3.url }}" integrity="{{ $d3.d3.sri }}" crossorigin="anonymous"></script>
|
||||
|
|
@ -336,6 +338,23 @@
|
|||
}) : null;
|
||||
}
|
||||
// =================================================================
|
||||
|
||||
|
||||
|
||||
// ======================== TOC height calc ========================
|
||||
var topOffset = 120;
|
||||
var botOffset = 70;
|
||||
var handleWindowResize = function () {
|
||||
if (tocElem) {
|
||||
tocElem.style.maxHeight = (window.innerHeight - topOffset - botOffset) + 'px';
|
||||
}
|
||||
}
|
||||
var throttledWindowResize = throttle(handleWindowResize, 300);
|
||||
throttledWindowResize()
|
||||
|
||||
|
||||
window.addEventListener('resize', throttledWindowResize);
|
||||
// =================================================================
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue