GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-07 00:36:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化垂直导航布局和动态标签页的样式

Browse Source
This commit is contained in:
jxxghp
2025-07-06 00:43:06 +08:00
parent 23b09d09ce
commit 61c9b97d70
4 changed files with 28 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/@core/scss/template/_default-layout-w-vertical-nav.scss
+4 -4
View File
@@ -16,14 +16,14 @@ $header: ".layout-navbar";
@if variables.$vertical-nav-navbar-style == "elevated" { @if variables.$vertical-nav-navbar-style == "elevated" {
// Add transition // Add transition
#{$header} { #{$header} {
transition: padding 0.2s ease, background-color 0.18s ease; transition: padding 0.2s ease;
} }
// If navbar is contained => Add border radius to header // If navbar is contained => Add border radius to header
@if variables.$layout-vertical-nav-navbar-is-contained { @if variables.$layout-vertical-nav-navbar-is-contained {
#{$header} { // #{$header} {
border-radius: 0 0 variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness; // border-radius: 0 0 variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
} // }
} }
// Scrolled styles for sticky navbar // Scrolled styles for sticky navbar
src/@core/scss/template/placeholders/_misc.scss
+10 -3
View File
@@ -1,6 +1,14 @@
%blurry-bg { %blurry-bg {
position: relative; position: relative;
box-shadow: none; background: rgba(var(--v-theme-background), 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 4%), 0 1px 2px rgba(0, 0, 0, 2%);
@media (width > 768px) {
.v-theme--transparent & {
backdrop-filter: blur(5px);
background: rgba(var(--v-theme-background), 0.1);
}
}
@media (width <= 768px) { @media (width <= 768px) {
@@ -10,8 +18,7 @@
position: absolute; position: absolute;
z-index: -1; z-index: -1;
backdrop-filter: blur(24px); backdrop-filter: blur(24px);
block-size: calc(env(safe-area-inset-top, 0px) + var(--navbar-height) + 4.5rem); block-size: calc(env(safe-area-inset-top, 0px) + var(--navbar-tab-height) + 4rem);
box-shadow: 0 1px 3px rgba(0, 0, 0, 4%), 0 1px 2px rgba(0, 0, 0, 2%);
content: ""; content: "";
inset-block-start: 0; inset-block-start: 0;
inset-inline: 0; inset-inline: 0;
src/@layouts/components/VerticalNavLayout.vue
+12 -12
View File
@@ -45,14 +45,16 @@ export default defineComponent({
h( h(
'div', 'div',
{ class: 'navbar-content-container' }, { class: 'navbar-content-container' },
slots.navbar?.({ [
toggleVerticalOverlayNavActive: toggleIsOverlayNavActive, slots.navbar?.({
}), toggleVerticalOverlayNavActive: toggleIsOverlayNavActive,
}),
// 👉 Dynamic Header Tab in NavBar
slots['dynamic-header-tab']?.()
? h('div', { class: 'layout-dynamic-header-tab' }, slots['dynamic-header-tab']?.())
: null,
].filter(Boolean),
), ),
// 👉 Dynamic Header Tab in NavBar
slots['dynamic-header-tab']?.()
? h('div', { class: 'layout-dynamic-header-tab' }, slots['dynamic-header-tab']?.())
: null,
].filter(Boolean), ].filter(Boolean),
) )
@@ -135,7 +137,9 @@ export default defineComponent({
inset-block-start: 0; inset-block-start: 0;
.navbar-content-container { .navbar-content-container {
block-size: calc(env(safe-area-inset-top) + variables.$layout-vertical-nav-navbar-height); block-size: calc(
env(safe-area-inset-top) + variables.$layout-vertical-nav-navbar-height + var(--navbar-tab-height)
);
} }
@at-root { @at-root {
@@ -143,10 +147,6 @@ export default defineComponent({
.layout-navbar { .layout-navbar {
@if variables.$layout-vertical-nav-navbar-is-contained { @if variables.$layout-vertical-nav-navbar-is-contained {
@include mixins.boxed-content; @include mixins.boxed-content;
} @else {
.navbar-content-container {
// @include mixins.boxed-content;
}
} }
} }
} }
src/layouts/components/DefaultLayout.vue
+2 -2
View File
@@ -287,10 +287,10 @@ onMounted(() => {
/> />
</div> </div>
</div> </div>
<VerticalNavLayout :style="{ '--navbar-height': showDynamicHeaderTab ? '2.5rem' : '0px' }"> <VerticalNavLayout :style="{ '--navbar-tab-height': showDynamicHeaderTab ? '2.5rem' : '0px' }">
<!-- 👉 Navbar --> <!-- 👉 Navbar -->
<template #navbar="{ toggleVerticalOverlayNavActive }"> <template #navbar="{ toggleVerticalOverlayNavActive }">
<div class="d-flex h-100 align-center mx-1"> <div class="d-flex h-14 align-center mx-1">
<!-- 👉 Vertical Nav Toggle --> <!-- 👉 Vertical Nav Toggle -->
<IconBtn v-if="!appMode && display.mdAndDown.value" class="ms-n2" @click="toggleVerticalOverlayNavActive(true)"> <IconBtn v-if="!appMode && display.mdAndDown.value" class="ms-n2" @click="toggleVerticalOverlayNavActive(true)">
<VIcon icon="mdi-menu" /> <VIcon icon="mdi-menu" />