perf(post-tools): optimize post tools position when toggle toc

This commit is contained in:
XPoet 2022-10-20 14:37:32 +08:00
parent 1243bcb7c8
commit 69ffc208b8
3 changed files with 11 additions and 7 deletions

View File

@ -124,5 +124,4 @@
height 0
}
}
}

View File

@ -137,7 +137,7 @@
top $header-height + $component-spacing-value
left 'calc((100vw - %s / 2) - 5rem)' % $content-max-width
opacity 0
transition-t("top, transform, opacity", "0, 0, 0.2", "0.2, 0.2, 0.2", "ease, ease, ease")
transition-t("top, transform, opacity, left", "0, 0, 0.2, 0", "0.2, 0.2, 0.2, 0.2", "ease, ease, ease, ease")
.header-shrink & {
top $header-shrink-height + $component-spacing-value

View File

@ -29,6 +29,10 @@ function initToggleShowToc() {
this.postPageContainerDom.classList.remove('show-toc')
document.body.classList.remove('has-toc')
}
setTimeout(() => {
this.setPostToolsLeft()
}, 120)
},
hasToc(isOpen) {
@ -37,17 +41,18 @@ function initToggleShowToc() {
this.handleToggleToc(isOpen)
},
setPostToolsLeft() {
const winWidth = window.innerWidth
const mcWidth = this.mainContentDom.getBoundingClientRect().width.toFixed(0)
setPostToolsLeft(mcw) {
const mainContainerWidth = mcw
? mcw
: this.mainContentDom.getBoundingClientRect().width.toFixed(0)
let offsetX = 5
if (winWidth <= 800) {
if (window.innerWidth <= 800) {
offsetX = 3
}
this.postToolsDom.style.opacity = `1`
this.postToolsDom.style.left = `calc((100vw - ${mcWidth}px) / 2 - ${offsetX}rem)`
this.postToolsDom.style.left = `calc((100vw - ${mainContainerWidth}px) / 2 - ${offsetX}rem)`
},
initSetPostToolsLeft() {