perf: optimized first screen height setting

This commit is contained in:
XPoet 2022-10-12 11:02:06 +08:00
parent c0eb63d484
commit fa59429226
4 changed files with 14 additions and 89 deletions

View File

@ -8,12 +8,6 @@
<i class="fas fa-search-minus"></i> <i class="fas fa-search-minus"></i>
</li> </li>
<!--
<li class="tools-item tool-expand-width flex-center">
<i class="fas fa-up-right-and-down-left-from-center"></i>
</li>
-->
<li class="tools-item tool-dark-light-toggle flex-center"> <li class="tools-item tool-dark-light-toggle flex-center">
<i class="fas fa-moon"></i> <i class="fas fa-moon"></i>
</li> </li>

View File

@ -11,6 +11,7 @@ $first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--
position relative position relative
box-sizing border-box box-sizing border-box
width 100% width 100%
height 100vh
overflow hidden overflow hidden
background url($first-screen-img) center center / cover no-repeat background url($first-screen-img) center center / cover no-repeat

View File

@ -61,13 +61,6 @@ $tools-item-border-radius = 0.1rem
opacity 0 opacity 0
transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear") transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear")
.tool-expand-width {
+keep-tablet() {
display none
}
}
&.show { &.show {
transform translateX(0) transform translateX(0)
opacity 1 opacity 1

View File

@ -132,58 +132,6 @@ KEEP.initUtils = () => {
}) })
}, },
// toggle content area width
contentAreaWidthAdjust() {
const toolExpandDom = document.querySelector('.tool-expand-width')
const headerContentDom = document.querySelector('.header-content')
const mainContentDom = document.querySelector('.main-content')
const iconDom = toolExpandDom.querySelector('i')
const defaultMaxWidth = '928px'
const expandMaxWidth = '90%'
let headerMaxWidth = defaultMaxWidth
let isExpand = false
if (
KEEP.theme_config.style.first_screen.enable === true &&
window.location.pathname === '/'
) {
headerMaxWidth = parseInt(defaultMaxWidth) * 1.2 + 'px'
}
const setPageWidth = (isExpand) => {
KEEP.styleStatus.isExpandPageWidth = isExpand
KEEP.setStyleStatus()
if (isExpand) {
iconDom.classList.remove('fa-up-right-and-down-left-from-center')
iconDom.classList.add('fa-down-left-and-up-right-to-center')
headerContentDom.style.maxWidth = expandMaxWidth
mainContentDom.style.maxWidth = expandMaxWidth
} else {
iconDom.classList.remove('fa-down-left-and-up-right-to-center')
iconDom.classList.add('fa-up-right-and-down-left-from-center')
headerContentDom.style.maxWidth = headerMaxWidth
mainContentDom.style.maxWidth = defaultMaxWidth
}
}
const initPageWidth = () => {
const styleStatus = KEEP.getStyleStatus()
if (styleStatus) {
isExpand = styleStatus.isExpandPageWidth
setPageWidth(isExpand)
}
}
initPageWidth()
toolExpandDom.addEventListener('click', () => {
isExpand = !isExpand
setPageWidth(isExpand)
})
},
// go comment anchor // go comment anchor
goComment() { goComment() {
this.goComment_dom = document.querySelector('.go-comment') this.goComment_dom = document.querySelector('.go-comment')
@ -200,11 +148,6 @@ KEEP.initUtils = () => {
return dom ? dom.getBoundingClientRect().height : 0 return dom ? dom.getBoundingClientRect().height : 0
}, },
// init first screen height
initFirstScreenHeight() {
this.firstScreen_dom && (this.firstScreen_dom.style.height = this.innerHeight + 'px')
},
// init has TOC // init has TOC
initHasToc() { initHasToc() {
const tocNavDoms = document.querySelectorAll('.post-toc-wrap .post-toc li') const tocNavDoms = document.querySelectorAll('.post-toc-wrap .post-toc li')
@ -500,18 +443,12 @@ KEEP.initUtils = () => {
// global font adjust // global font adjust
KEEP.utils.globalFontAdjust() KEEP.utils.globalFontAdjust()
// adjust content area width
// KEEP.utils.contentAreaWidthAdjust()
// go comment // go comment
KEEP.utils.goComment() KEEP.utils.goComment()
// init page height handle // init page height handle
KEEP.utils.initPageHeightHandle() KEEP.utils.initPageHeightHandle()
// init first screen height
KEEP.utils.initFirstScreenHeight()
// check whether TOC exists // check whether TOC exists
KEEP.utils.initHasToc() KEEP.utils.initHasToc()