diff --git a/index.html b/index.html index 3e7017a2..1dc7f47e 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,7 @@ - + MoviePilot @@ -74,7 +73,7 @@ - + @@ -121,4 +120,4 @@ - + \ No newline at end of file diff --git a/src/@core/scss/_vertical-nav.scss b/src/@core/scss/_vertical-nav.scss index d264195a..8131254c 100644 --- a/src/@core/scss/_vertical-nav.scss +++ b/src/@core/scss/_vertical-nav.scss @@ -50,7 +50,7 @@ rgba(#{variables.$vertical-nav-background-color-rgb}, 30%) 75%, transparent ); - block-size: 64px; + block-size: calc(env(safe-area-inset-top) + 64px); inline-size: 100%; inset-block-start: calc(#{variables.$vertical-nav-header-height} - 2px); opacity: 0; diff --git a/src/@core/scss/base/_default-layout-w-vertical-nav.scss b/src/@core/scss/base/_default-layout-w-vertical-nav.scss index beae2591..d8e72477 100644 --- a/src/@core/scss/base/_default-layout-w-vertical-nav.scss +++ b/src/@core/scss/base/_default-layout-w-vertical-nav.scss @@ -32,8 +32,8 @@ $header: ".layout-navbar"; /* ℹ️ This html selector with not selector is required when: dialog is opened and window don't have any scroll. This removes window-scrolled class from layout and out style broke */ - html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-sticky, - &.window-scrolled.layout-navbar-sticky { + html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-fixed, + &.window-scrolled.layout-navbar-fixed { #{$header} { @extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav; @@ -56,7 +56,7 @@ $header: ".layout-navbar"; } } - &:not(.layout-navbar-sticky) { + &:not(.layout-navbar-fixed) { #{$header} { margin-block-start: variables.$vertical-nav-floating-navbar-top; } diff --git a/src/@core/scss/base/_layouts.scss b/src/@core/scss/base/_layouts.scss index 91635d00..6260829d 100644 --- a/src/@core/scss/base/_layouts.scss +++ b/src/@core/scss/base/_layouts.scss @@ -46,8 +46,8 @@ // 👉 Floating navbar styles @if variables.$vertical-nav-navbar-style == "floating" { - // ℹ️ Add spacing above navbar if navbar is floating (was in %layout-navbar-sticky placeholder) - .layout-wrapper.layout-nav-type-vertical.layout-navbar-sticky { + // ℹ️ Add spacing above navbar if navbar is floating (was in %layout-navbar-fixed placeholder) + .layout-wrapper.layout-nav-type-vertical.layout-navbar-fixed { .layout-navbar { inset-block-start: variables.$vertical-nav-floating-navbar-top; } diff --git a/src/@layouts/components/VerticalNavLayout.vue b/src/@layouts/components/VerticalNavLayout.vue index 6067db64..da7801a6 100644 --- a/src/@layouts/components/VerticalNavLayout.vue +++ b/src/@layouts/components/VerticalNavLayout.vue @@ -71,10 +71,10 @@ export default defineComponent({ { class: [ "layout-wrapper layout-nav-type-vertical layout-navbar-static layout-footer-static layout-content-width-fluid", - "layout-navbar-sticky", + "layout-navbar-fixed", mdAndDown.value && "layout-overlay-nav", route.meta.layoutWrapperClasses, - scrollDistance.value > 20 && "window-scrolled", + scrollDistance.value && "window-scrolled", ], }, [ @@ -107,12 +107,15 @@ export default defineComponent({ } .layout-navbar { - position: sticky; + position: fixed; + width: 100vw; z-index: variables.$layout-vertical-nav-layout-navbar-z-index; inset-block-start: 0; .navbar-content-container { - block-size: variables.$layout-vertical-nav-navbar-height; + block-size: calc( + env(safe-area-inset-top) + variables.$layout-vertical-nav-navbar-height + ); } @at-root { @@ -130,8 +133,8 @@ export default defineComponent({ } } - &.layout-navbar-sticky .layout-navbar { - @extend %layout-navbar-sticky; + &.layout-navbar-fixed .layout-navbar { + @extend %layout-navbar-fixed; } &.layout-navbar-hidden .layout-navbar { @@ -202,7 +205,7 @@ export default defineComponent({ width: calc(100% - 1rem); background-color: rgb(var(--v-theme-surface), 0.9); -webkit-backdrop-filter: blur(6px); - backdrop-filter: blur(6px); + backdrop-filter: blur(6px); z-index: 1002; transition: padding 0.2s ease, background-color 0.18s ease; } diff --git a/src/@layouts/styles/_default-layout.scss b/src/@layouts/styles/_default-layout.scss index 15c773cf..e07cee53 100644 --- a/src/@layouts/styles/_default-layout.scss +++ b/src/@layouts/styles/_default-layout.scss @@ -14,12 +14,13 @@ body, min-height: 100%; } -.layout-vertical-nav, .layout-navbar { +.layout-vertical-nav { padding-top: env(safe-area-inset-top); + padding-bottom: env(safe-area-inset-bottom); } -.layout-vertical-nav { - padding-bottom: env(safe-area-inset-bottom); +.navbar-content-container { + padding-top: env(safe-area-inset-top); } .layout-page-content { @@ -29,6 +30,7 @@ body, // TODO: Use grid gutter variable here padding-block: 0.5rem; + padding-top: calc(env(safe-area-inset-top) + 70px); } .layout-footer { diff --git a/src/@layouts/styles/_placeholders.scss b/src/@layouts/styles/_placeholders.scss index 1463f237..a41038dc 100644 --- a/src/@layouts/styles/_placeholders.scss +++ b/src/@layouts/styles/_placeholders.scss @@ -17,8 +17,9 @@ } // ℹ️ We created this placeholder even it is being used in just layout w/ vertical nav because in future we might apply style to both navbar & horizontal nav separately -%layout-navbar-sticky { - position: sticky; +%layout-navbar-fixed { + position: fixed; + top: 0; inset-block-start: 0; // will-change: transform; diff --git a/src/layouts/components/DefaultLayoutWithVerticalNav.vue b/src/layouts/components/DefaultLayoutWithVerticalNav.vue index b060ea6b..1dcc69d7 100644 --- a/src/layouts/components/DefaultLayoutWithVerticalNav.vue +++ b/src/layouts/components/DefaultLayoutWithVerticalNav.vue @@ -13,6 +13,9 @@ const router = useRouter(); // 搜索词 const searchWord = ref(""); +// 搜索弹窗 +const searchDialog = ref(false); + // Search const search = () => { if (!searchWord.value) { @@ -41,12 +44,14 @@ const search = () => {
+