GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-06-28 02:51:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix pwa layout

Browse Source
This commit is contained in:
jxxghp
2023-07-01 17:27:07 +08:00
parent 2c8b6d334a
commit b6d3cdcc42
8 changed files with 32 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@@ -4,8 +4,7 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport"
content="initial-scale=1, viewport-fit=cover, width=device-width" />
<meta name="viewport" content="initial-scale=1, viewport-fit=cover, width=device-width" />
<title>MoviePilot</title>
<meta name="Robots" content="noindex,nofollow,noarchive">
<link rel="icon" type="image/png" href="/logo.png">
@@ -74,7 +73,7 @@
<meta name="referrer" content="never">
<meta name="msapplication-TileColor" content="#F1F2F9" />
<meta name="theme-color" content="#1E1A2E" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#F1F2F9" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#F1F2F9" media="(prefers-color-scheme: normal)">
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<link rel="stylesheet" type="text/css" href="/loader.css" />
@@ -121,4 +120,4 @@
</script>
</body>
</html>
</html>

2
src/@core/scss/_vertical-nav.scss
View File

@@ -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;

6
src/@core/scss/base/_default-layout-w-vertical-nav.scss
View File

@@ -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;
}

4
src/@core/scss/base/_layouts.scss
View File

@@ -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;
}

17
src/@layouts/components/VerticalNavLayout.vue
View File

@@ -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;
}

8
src/@layouts/styles/_default-layout.scss
View File

@@ -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 {

5
src/@layouts/styles/_placeholders.scss
View File

@@ -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;

5
src/layouts/components/DefaultLayoutWithVerticalNav.vue
View File

@@ -13,6 +13,9 @@ const router = useRouter();
// 搜索词
const searchWord = ref<string>("");
// 搜索弹窗
const searchDialog = ref(false);
// Search
const search = () => {
if (!searchWord.value) {
@@ -41,12 +44,14 @@ const search = () => {
<div class="d-flex align-center cursor-pointer" style="user-select: none">
<!-- 👉 Search Trigger button -->
<IconBtn class="d-lg-none">
<VDialog v-model="searchDialog" activator="parent" width="auto"> </VDialog>
<VIcon icon="mdi-magnify" />
</IconBtn>
</div>
<span class="w-1/5">
<VTextField
key="search_navbar"
v-model="searchWord"
class="d-none d-lg-block text-disabled"
density="compact"