GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-05-07 05:02:45 +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

4
public/loader.css
View File

@@ -5,7 +5,7 @@ body {
html {
overflow: hidden auto;
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 {
@@ -82,4 +82,4 @@ html {
opacity: 1;
transform: rotate(1turn);
}
}
}

2
src/@core/scss/pages/page-auth.scss
View File

@@ -1,5 +1,5 @@
.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 {

5
src/@core/scss/template/libs/full-calendar.scss
View File

@@ -92,8 +92,7 @@
.fc-header-toolbar {
flex-wrap: wrap;
margin: 1.25rem;
column-gap: 0.5rem;
row-gap: 1rem;
gap: 1rem 0.5rem;
}
.fc-toolbar-chunk {
@@ -238,7 +237,7 @@
inline-size: 1.5625rem;
margin-inline-end: 0.25rem;
@media (max-width: 1264px) {
@media (width <= 1264px) {
display: block !important;
}

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

@@ -5,7 +5,7 @@
@use "@configured-variables" as variables;
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));
overflow-y: overlay;
}

2
src/@layouts/styles/_global.scss
View File

@@ -7,5 +7,5 @@
html {
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))
}

4
src/components/cards/PluginCard.vue
View File

@@ -14,6 +14,8 @@ import ProgressDialog from '../dialog/ProgressDialog.vue'
// 显示器宽度
const display = useDisplay()
// APP
const appMode = inject('pwaMode') && display.mdAndDown.value
// 输入参数
const props = defineProps({
@@ -507,7 +509,7 @@ watch(
<VCardText class="min-h-40">
<PageRender @action="loadPluginPage" v-for="(item, index) in pluginPageItems" :key="index" :config="item" />
</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>
</VDialog>

14
src/styles/styles.scss
View File

@@ -3,6 +3,10 @@
@tailwind components;
@tailwind utilities;
html.v-overlay-scroll-blocked {
position: relative;
}
#nprogress .bar {
background: rgb(var(--v-theme-primary)) !important;
inset-block-start: env(safe-area-inset-top) !important;
@@ -23,18 +27,12 @@
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 {
margin-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
}
.v-dialog--fullscreen > .v-overlay__content{
margin-block-start: env(safe-area-inset-top);
padding-block-end: env(safe-area-inset-bottom);
.v-dialog--fullscreen > .v-overlay__content > .v-card {
padding-block-end: calc(env(safe-area-inset-top) + env(safe-area-inset-bottom));
}
/* router view transition fade-slide */