perf: optimized first screen height setting
This commit is contained in:
parent
c0eb63d484
commit
fa59429226
|
@ -8,12 +8,6 @@
|
|||
<i class="fas fa-search-minus"></i>
|
||||
</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">
|
||||
<i class="fas fa-moon"></i>
|
||||
</li>
|
||||
|
|
|
@ -11,6 +11,7 @@ $first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--
|
|||
position relative
|
||||
box-sizing border-box
|
||||
width 100%
|
||||
height 100vh
|
||||
overflow hidden
|
||||
background url($first-screen-img) center center / cover no-repeat
|
||||
|
||||
|
|
|
@ -61,13 +61,6 @@ $tools-item-border-radius = 0.1rem
|
|||
opacity 0
|
||||
transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear")
|
||||
|
||||
.tool-expand-width {
|
||||
+keep-tablet() {
|
||||
display none
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.show {
|
||||
transform translateX(0)
|
||||
opacity 1
|
||||
|
|
|
@ -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
|
||||
goComment() {
|
||||
this.goComment_dom = document.querySelector('.go-comment')
|
||||
|
@ -200,11 +148,6 @@ KEEP.initUtils = () => {
|
|||
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
|
||||
initHasToc() {
|
||||
const tocNavDoms = document.querySelectorAll('.post-toc-wrap .post-toc li')
|
||||
|
@ -500,18 +443,12 @@ KEEP.initUtils = () => {
|
|||
// global font adjust
|
||||
KEEP.utils.globalFontAdjust()
|
||||
|
||||
// adjust content area width
|
||||
// KEEP.utils.contentAreaWidthAdjust()
|
||||
|
||||
// go comment
|
||||
KEEP.utils.goComment()
|
||||
|
||||
// init page height handle
|
||||
KEEP.utils.initPageHeightHandle()
|
||||
|
||||
// init first screen height
|
||||
KEEP.utils.initFirstScreenHeight()
|
||||
|
||||
// check whether TOC exists
|
||||
KEEP.utils.initHasToc()
|
||||
|
||||
|
|
Loading…
Reference in New Issue