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

调整样式以考虑安全区域的上下内边距，优化布局和溢出处理

Browse Source
This commit is contained in:
jxxghp
2025-01-04 14:12:07 +08:00
parent 3bd63ab7c8
commit f9f29ccc3c
7 changed files with 16 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/loader.css
+2 -2
View File
@@ -5,7 +5,7 @@ body {
html { html {
overflow: hidden auto; overflow: hidden auto;
background: var(--initial-loader-bg, #fff); background: var(--initial-loader-bg, #fff);
min-block-size: calc(100% + env(safe-area-inset-top)); min-block-size: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
} }
#loading-bg { #loading-bg {
@@ -82,4 +82,4 @@ html {
opacity: 1; opacity: 1;
transform: rotate(1turn); transform: rotate(1turn);
} }
} }
src/@core/scss/pages/page-auth.scss
+1 -1
View File
@@ -1,5 +1,5 @@
.auth-wrapper { .auth-wrapper {
min-block-size: calc(var(--vh, 1vh) * 100 + env(safe-area-inset-top)); min-block-size: calc(var(--vh, 1vh) * 100 + env(safe-area-inset-top) + env(safe-area-inset-bottom));
} }
.auth-footer-mask { .auth-footer-mask {
src/@core/scss/template/libs/full-calendar.scss
+2 -3
View File
@@ -92,8 +92,7 @@
.fc-header-toolbar { .fc-header-toolbar {
flex-wrap: wrap; flex-wrap: wrap;
margin: 1.25rem; margin: 1.25rem;
column-gap: 0.5rem; gap: 1rem 0.5rem;
row-gap: 1rem;
} }
.fc-toolbar-chunk { .fc-toolbar-chunk {
@@ -238,7 +237,7 @@
inline-size: 1.5625rem; inline-size: 1.5625rem;
margin-inline-end: 0.25rem; margin-inline-end: 0.25rem;
@media (max-width: 1264px) { @media (width <= 1264px) {
display: block !important; display: block !important;
} }
src/@layouts/styles/_default-layout.scss
+1 -1
View File
@@ -5,7 +5,7 @@
@use "@configured-variables" as variables; @use "@configured-variables" as variables;
html { html {
min-height: calc(100% + env(safe-area-inset-top)); min-height: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
background: rgb(var(--v-theme-background)); background: rgb(var(--v-theme-background));
overflow-y: overlay; overflow-y: overlay;
} }
src/@layouts/styles/_global.scss
+1 -1
View File
@@ -7,5 +7,5 @@
html { html {
box-sizing: border-box; box-sizing: border-box;
min-height: calc(100% + env(safe-area-inset-top)) min-height: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom))
} }
src/components/cards/PluginCard.vue
+3 -1
View File
@@ -14,6 +14,8 @@ import ProgressDialog from '../dialog/ProgressDialog.vue'
// 显示器宽度 // 显示器宽度
const display = useDisplay() const display = useDisplay()
// APP
const appMode = inject('pwaMode') && display.mdAndDown.value
// 输入参数 // 输入参数
const props = defineProps({ const props = defineProps({
@@ -507,7 +509,7 @@ watch(
<VCardText class="min-h-40"> <VCardText class="min-h-40">
<PageRender @action="loadPluginPage" v-for="(item, index) in pluginPageItems" :key="index" :config="item" /> <PageRender @action="loadPluginPage" v-for="(item, index) in pluginPageItems" :key="index" :config="item" />
</VCardText> </VCardText>
<VFab icon="mdi-cog" location="bottom" size="x-large" fixed app appear @click="showPluginConfig" /> <VFab icon="mdi-cog" location="bottom" size="x-large" fixed app appear @click="showPluginConfig" :class="{ 'mb-10': appMode }" />
</VCard> </VCard>
</VDialog> </VDialog>
src/styles/styles.scss
+6 -8
View File
@@ -3,6 +3,10 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
html.v-overlay-scroll-blocked {
position: relative;
}
#nprogress .bar { #nprogress .bar {
background: rgb(var(--v-theme-primary)) !important; background: rgb(var(--v-theme-primary)) !important;
inset-block-start: env(safe-area-inset-top) !important; inset-block-start: env(safe-area-inset-top) !important;
@@ -23,18 +27,12 @@
margin-block-start: env(safe-area-inset-top); margin-block-start: env(safe-area-inset-top);
} }
.v-overlay-container {
min-block-size: calc(100% + env(safe-area-inset-top) + env(safe-area-inset-bottom));
overflow-y: overlay;
}
.v-dialog > .v-overlay__content { .v-dialog > .v-overlay__content {
margin-block: env(safe-area-inset-top) env(safe-area-inset-bottom); margin-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
} }
.v-dialog--fullscreen > .v-overlay__content{ .v-dialog--fullscreen > .v-overlay__content > .v-card {
margin-block-start: env(safe-area-inset-top); padding-block-end: calc(env(safe-area-inset-top) + env(safe-area-inset-bottom));
padding-block-end: env(safe-area-inset-bottom);
} }
/* router view transition fade-slide */ /* router view transition fade-slide */