lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

perf(toc): optimize toggle show style of TOC

This commit is contained in:
XPoet 2022-10-11 23:05:45 +08:00
parent 0f1f227217
commit 88cea47545
6 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
source/css/common/variables.styl
View File

@ -16,7 +16,7 @@ $post-tool-button-width = 38px // post tool but
$component-spacing-value = 38px // component-spacing-value (PC) $component-spacing-value = 38px // component-spacing-value (PC)
// main content max width // main content max width
$content-max-width = 950px $content-max-width = 928px
// main content max width of has TOC // main content max width of has TOC
$has-toc-content-max-width = $content-max-width * 1.2 $has-toc-content-max-width = $content-max-width * 1.2

1
source/css/layout/_partial/header.styl
View File

@ -25,6 +25,7 @@ $logo-image-box-width = 46px
width $main-content-width width $main-content-width
max-width $content-max-width max-width $content-max-width
height 100% height 100%
transition-t("max-width, width", "0, 0", "0.1, 0.1", "ease, ease")
&.has-first-screen { &.has-first-screen {

1
source/css/layout/article-content.styl
View File

@ -267,6 +267,7 @@ $toc-container-width = 16rem
width $toc-container-width width $toc-container-width
max-height 'calc(100vh - %s)' % ($header-height + $component-spacing-value) max-height 'calc(100vh - %s)' % ($header-height + $component-spacing-value)
padding-left 2rem padding-left 2rem
padding-bottom 1rem
transition-t("top, display, max-height", "0, 0, 0", "0.2, 0.1, 0.2", "ease, ease, ease") transition-t("top, display, max-height", "0, 0, 0", "0.2, 0.1, 0.2", "ease, ease, ease")
.header-shrink & { .header-shrink & {

1
source/css/layout/page.styl
View File

@ -109,6 +109,7 @@
width $main-content-width width $main-content-width
max-width $content-max-width max-width $content-max-width
height 100% height 100%
transition-t("max-width, width", "0, 0", "0.1, 0.1", "ease, ease")
.has-toc & { .has-toc & {
max-width $has-toc-content-max-width max-width $has-toc-content-max-width

2
source/js/toggle-show-toc.js
View File

@ -20,8 +20,10 @@ function initToggleShowToc() {
handleToggle(isOpen) { handleToggle(isOpen) {
if (isOpen) { if (isOpen) {
this.postPageContainerDom.classList.add('show-toc') this.postPageContainerDom.classList.add('show-toc')
document.body.classList.add('has-toc')
} else { } else {
this.postPageContainerDom.classList.remove('show-toc') this.postPageContainerDom.classList.remove('show-toc')
document.body.classList.remove('has-toc')
} }
}, },

2
source/js/utils.js
View File

@ -139,7 +139,7 @@ KEEP.initUtils = () => {
const mainContentDom = document.querySelector('.main-content') const mainContentDom = document.querySelector('.main-content')
const iconDom = toolExpandDom.querySelector('i') const iconDom = toolExpandDom.querySelector('i')
const defaultMaxWidth = '950px' const defaultMaxWidth = '928px'
const expandMaxWidth = '90%' const expandMaxWidth = '90%'
let headerMaxWidth = defaultMaxWidth let headerMaxWidth = defaultMaxWidth