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

fix: adjust dashboard item rows and improve storage display styling for better layout

Browse Source
This commit is contained in:
jxxghp
2026-06-28 09:44:58 +08:00
parent 8c78f9ca90
commit 0776bc9fa0
2 changed files with 21 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/dashboard.vue
+1 -1
View File
@@ -141,7 +141,7 @@ const dashboardConfigs = ref<DashboardItem[]>([
key: '', key: '',
attrs: {}, attrs: {},
cols: { cols: 12, md: 4 }, cols: { cols: 12, md: 4 },
rows: 11, rows: 9,
elements: [], elements: [],
}, },
{ {
src/views/dashboard/AnalyticsStorage.vue
+20 -6
View File
@@ -70,11 +70,11 @@ onActivated(() => {
<VCardTitle>{{ t('dashboard.storage') }}</VCardTitle> <VCardTitle>{{ t('dashboard.storage') }}</VCardTitle>
</VCardItem> </VCardItem>
<VCardText class="dashboard-summary-content"> <VCardText class="dashboard-summary-content">
<h5 class="animated-storage-value text-2xl font-weight-medium text-primary"> <h5 class="animated-storage-value font-weight-medium text-primary">
{{ animatedStorageText }} {{ animatedStorageText }}
</h5> </h5>
<div class="mt-2">{{ t('storage.usedPercent', { percent: animatedUsedPercentText }) }} 🚀</div> <div class="animated-storage-meta">{{ t('storage.usedPercent', { percent: animatedUsedPercentText }) }} 🚀</div>
<div class="mt-1"> <div class="animated-storage-progress-wrap">
<VProgressLinear <VProgressLinear
:model-value="animatedUsedPercentValue" :model-value="animatedUsedPercentValue"
class="animated-storage-progress" class="animated-storage-progress"
@@ -94,15 +94,15 @@ onActivated(() => {
.v-card .triangle-bg { .v-card .triangle-bg {
position: absolute; position: absolute;
inline-size: 8.75rem; inline-size: clamp(7rem, 36%, 8.75rem);
inset-block-end: 0; inset-block-end: 0;
inset-inline-end: 0; inset-inline-end: 0;
} }
.v-card .trophy { .v-card .trophy {
position: absolute; position: absolute;
inline-size: 4.9375rem; inline-size: clamp(3.75rem, 18%, 4.5rem);
inset-block-end: 2rem; inset-block-end: 2.75rem;
inset-inline-end: 2rem; inset-inline-end: 2rem;
} }
@@ -118,12 +118,26 @@ onActivated(() => {
.dashboard-summary-content { .dashboard-summary-content {
flex: 1 1 auto; flex: 1 1 auto;
min-block-size: 0; min-block-size: 0;
padding-block: 0.25rem 1rem;
} }
.animated-storage-value { .animated-storage-value {
font-size: clamp(1.375rem, 1.8vw, 1.5rem);
line-height: 1.2;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.animated-storage-meta {
margin-block-start: 0.5rem;
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
font-size: 0.875rem;
line-height: 1.2;
}
.animated-storage-progress-wrap {
margin-block-start: 0.35rem;
}
.animated-storage-progress { .animated-storage-progress {
overflow: hidden; overflow: hidden;
} }