renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: make top bar not fixed in search page

Browse Source
This commit is contained in:
Hakadao
2023-09-03 01:53:26 +08:00
parent fee7456054
commit 57d0bcfb99
1 changed files with 31 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/contentScripts/views/App.vue
View File

@@ -43,7 +43,7 @@ const showTopbarMask = ref<boolean>(false)
const dynamicComponentKey = ref<string>(`dynamicComponent${Number(new Date())}`)
// const isVideoPage = ref<boolean>(false)
// const isBilibiliHomePage = ref<boolean>(false)
// const isHomePage = ref<boolean>(false)
const tooltipPlacement = computed(() => {
if (settings.value.dockPosition === 'left')
@@ -55,13 +55,7 @@ const tooltipPlacement = computed(() => {
return 'right'
})
const isVideoPage = computed(() => {
if (/https?:\/\/(www.)?bilibili.com\/video\/.*/.test(location.href))
return true
return false
})
const isBilibiliHomePage = computed(() => {
const isHomePage = computed(() => {
if (
/https?:\/\/bilibili.com\/?$/.test(location.href)
|| /https?:\/\/www.bilibili.com\/?$/.test(location.href)
@@ -73,6 +67,20 @@ const isBilibiliHomePage = computed(() => {
return false
})
const isVideoPage = computed(() => {
if (/https?:\/\/(www.)?bilibili.com\/video\/.*/.test(location.href))
return true
return false
})
const isSearchPage = computed(() => {
if (
/https?:\/\/search.bilibili.com\/.*$/.test(location.href)
)
return true
return false
})
watch(
() => activatedPage.value,
() => {
@@ -127,7 +135,7 @@ onMounted(() => {
}, 1200)
})
if (isBilibiliHomePage.value) {
if (isHomePage.value) {
// Force overwrite Bilibili Evolved body tag & html tag background color
document.body.style.setProperty('background-color', 'unset', 'important')
document.documentElement.style.setProperty('background-color', 'unset', 'important')
@@ -157,7 +165,7 @@ onMounted(() => {
else showTopbarMask.value = false
})
if (!isBilibiliHomePage.value) {
if (!isHomePage.value) {
const originalTopBar: HTMLElement = document.querySelector('#biliMainHeader, #bili-header-container') as HTMLElement
if (originalTopBar)
originalTopBar.style.visibility = 'hidden'
@@ -253,7 +261,7 @@ function handleBackToTop() {
</script>
<template>
<template v-if="isBilibiliHomePage">
<template v-if="isHomePage">
<Transition name="fade">
<div v-if="activatedPage === AppPage.Search">
<!-- background -->
@@ -294,21 +302,29 @@ function handleBackToTop() {
<div
ref="mainAppRef" class="bewly-wrapper" text="$bew-text-1" transition="opacity duration-300" overflow-y-scroll z-60
:style="{ opacity: mainAppOpacity, height: isBilibiliHomePage ? '100vh' : '0' }"
:style="{ opacity: mainAppOpacity, height: isHomePage ? '100vh' : '0' }"
>
<div m-auto max-w="$bew-page-max-width" :style="{ opacity: showSettings ? 0.4 : 1 }">
<Transition name="topbar">
<Topbar
v-if="!isSearchPage"
v-show="settings.isShowTopbar"
:show-search-bar="activatedPage !== AppPage.Search"
:show-topbar-mask="showTopbarMask"
:pos="`${!isBilibiliHomePage ? 'fixed' : 'absolute'} top-0 left-0`" z-50
:pos="`${!isHomePage ? 'fixed' : 'absolute'} top-0 left-0`" z-50
/>
<Topbar
v-else
v-show="settings.isShowTopbar"
:show-search-bar="activatedPage !== AppPage.Search"
:show-topbar-mask="showTopbarMask"
pos="absolute top-0 left-0" z-50
/>
</Transition>
<div flex="~" max-w="$bew-page-max-width">
<aside
v-if="isBilibiliHomePage"
v-if="isHomePage"
class="dock-wrap"
:class="{
left: settings.dockPosition === 'left',
@@ -428,7 +444,7 @@ function handleBackToTop() {
</aside>
<main
v-if="isBilibiliHomePage"
v-if="isHomePage"
p="t-80px" m-auto
relative
:w="isVideoPage ? '[calc(100%-160px)]' : 'lg:85% md:[calc(90%-60px)] [calc(100%-140px)]'"