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

fix pwa layout

Browse Source
This commit is contained in:
jxxghp
2023-07-01 17:29:44 +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
index.html
+3 -4
View File
@@ -4,8 +4,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" <meta name="viewport" content="initial-scale=1, viewport-fit=cover, width=device-width" />
content="initial-scale=1, viewport-fit=cover, width=device-width" />
<title>MoviePilot</title> <title>MoviePilot</title>
<meta name="Robots" content="noindex,nofollow,noarchive"> <meta name="Robots" content="noindex,nofollow,noarchive">
<link rel="icon" type="image/png" href="/logo.png"> <link rel="icon" type="image/png" href="/logo.png">
@@ -74,7 +73,7 @@
<meta name="referrer" content="never"> <meta name="referrer" content="never">
<meta name="msapplication-TileColor" content="#F1F2F9" /> <meta name="msapplication-TileColor" content="#F1F2F9" />
<meta name="theme-color" content="#1E1A2E" media="(prefers-color-scheme: dark)"> <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="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" /> <meta name="MobileOptimized" content="320" />
<link rel="stylesheet" type="text/css" href="/loader.css" /> <link rel="stylesheet" type="text/css" href="/loader.css" />
@@ -121,4 +120,4 @@
</script> </script>
</body> </body>
</html> </html>
src/@core/scss/_vertical-nav.scss
+1 -1
View File
@@ -50,7 +50,7 @@
rgba(#{variables.$vertical-nav-background-color-rgb}, 30%) 75%, rgba(#{variables.$vertical-nav-background-color-rgb}, 30%) 75%,
transparent transparent
); );
block-size: 64px; block-size: calc(env(safe-area-inset-top) + 64px);
inline-size: 100%; inline-size: 100%;
inset-block-start: calc(#{variables.$vertical-nav-header-height} - 2px); inset-block-start: calc(#{variables.$vertical-nav-header-height} - 2px);
opacity: 0; opacity: 0;
src/@core/scss/base/_default-layout-w-vertical-nav.scss
+3 -3
View File
@@ -32,8 +32,8 @@ $header: ".layout-navbar";
/* ℹ️ This html selector with not selector is required when: /* ℹ️ 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 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, html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-fixed,
&.window-scrolled.layout-navbar-sticky { &.window-scrolled.layout-navbar-fixed {
#{$header} { #{$header} {
@extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav; @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} { #{$header} {
margin-block-start: variables.$vertical-nav-floating-navbar-top; margin-block-start: variables.$vertical-nav-floating-navbar-top;
} }
src/@core/scss/base/_layouts.scss
+2 -2
View File
@@ -46,8 +46,8 @@
// 👉 Floating navbar styles // 👉 Floating navbar styles
@if variables.$vertical-nav-navbar-style == "floating" { @if variables.$vertical-nav-navbar-style == "floating" {
// ℹ️ Add spacing above navbar if navbar is floating (was in %layout-navbar-sticky placeholder) // ℹ️ Add spacing above navbar if navbar is floating (was in %layout-navbar-fixed placeholder)
.layout-wrapper.layout-nav-type-vertical.layout-navbar-sticky { .layout-wrapper.layout-nav-type-vertical.layout-navbar-fixed {
.layout-navbar { .layout-navbar {
inset-block-start: variables.$vertical-nav-floating-navbar-top; inset-block-start: variables.$vertical-nav-floating-navbar-top;
} }
src/@layouts/components/VerticalNavLayout.vue
+10 -7
View File
@@ -71,10 +71,10 @@ export default defineComponent({
{ {
class: [ class: [
"layout-wrapper layout-nav-type-vertical layout-navbar-static layout-footer-static layout-content-width-fluid", "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", mdAndDown.value && "layout-overlay-nav",
route.meta.layoutWrapperClasses, route.meta.layoutWrapperClasses,
scrollDistance.value > 20 && "window-scrolled", scrollDistance.value && "window-scrolled",
], ],
}, },
[ [
@@ -107,12 +107,15 @@ export default defineComponent({
} }
.layout-navbar { .layout-navbar {
position: sticky; position: fixed;
width: 100vw;
z-index: variables.$layout-vertical-nav-layout-navbar-z-index; z-index: variables.$layout-vertical-nav-layout-navbar-z-index;
inset-block-start: 0; inset-block-start: 0;
.navbar-content-container { .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 { @at-root {
@@ -130,8 +133,8 @@ export default defineComponent({
} }
} }
&.layout-navbar-sticky .layout-navbar { &.layout-navbar-fixed .layout-navbar {
@extend %layout-navbar-sticky; @extend %layout-navbar-fixed;
} }
&.layout-navbar-hidden .layout-navbar { &.layout-navbar-hidden .layout-navbar {
@@ -202,7 +205,7 @@ export default defineComponent({
width: calc(100% - 1rem); width: calc(100% - 1rem);
background-color: rgb(var(--v-theme-surface), 0.9); background-color: rgb(var(--v-theme-surface), 0.9);
-webkit-backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
z-index: 1002; z-index: 1002;
transition: padding 0.2s ease, background-color 0.18s ease; transition: padding 0.2s ease, background-color 0.18s ease;
} }
src/@layouts/styles/_default-layout.scss
+5 -3
View File
@@ -14,12 +14,13 @@ body,
min-height: 100%; min-height: 100%;
} }
.layout-vertical-nav, .layout-navbar { .layout-vertical-nav {
padding-top: env(safe-area-inset-top); padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
} }
.layout-vertical-nav { .navbar-content-container {
padding-bottom: env(safe-area-inset-bottom); padding-top: env(safe-area-inset-top);
} }
.layout-page-content { .layout-page-content {
@@ -29,6 +30,7 @@ body,
// TODO: Use grid gutter variable here // TODO: Use grid gutter variable here
padding-block: 0.5rem; padding-block: 0.5rem;
padding-top: calc(env(safe-area-inset-top) + 70px);
} }
.layout-footer { .layout-footer {
src/@layouts/styles/_placeholders.scss
+3 -2
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 // ℹ️ 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 { %layout-navbar-fixed {
position: sticky; position: fixed;
top: 0;
inset-block-start: 0; inset-block-start: 0;
// will-change: transform; // will-change: transform;
src/layouts/components/DefaultLayoutWithVerticalNav.vue
+5
View File
@@ -13,6 +13,9 @@ const router = useRouter();
// 搜索词 // 搜索词
const searchWord = ref<string>(""); const searchWord = ref<string>("");
// 搜索弹窗
const searchDialog = ref(false);
// Search // Search
const search = () => { const search = () => {
if (!searchWord.value) { if (!searchWord.value) {
@@ -41,12 +44,14 @@ const search = () => {
<div class="d-flex align-center cursor-pointer" style="user-select: none"> <div class="d-flex align-center cursor-pointer" style="user-select: none">
<!-- 👉 Search Trigger button --> <!-- 👉 Search Trigger button -->
<IconBtn class="d-lg-none"> <IconBtn class="d-lg-none">
<VDialog v-model="searchDialog" activator="parent" width="auto"> </VDialog>
<VIcon icon="mdi-magnify" /> <VIcon icon="mdi-magnify" />
</IconBtn> </IconBtn>
</div> </div>
<span class="w-1/5"> <span class="w-1/5">
<VTextField <VTextField
key="search_navbar"
v-model="searchWord" v-model="searchWord"
class="d-none d-lg-block text-disabled" class="d-none d-lg-block text-disabled"
density="compact" density="compact"