diff --git a/src/pages/dashboard.vue b/src/pages/dashboard.vue index e889c5ab..02d75c4d 100644 --- a/src/pages/dashboard.vue +++ b/src/pages/dashboard.vue @@ -141,7 +141,7 @@ const dashboardConfigs = ref([ key: '', attrs: {}, cols: { cols: 12, md: 4 }, - rows: 11, + rows: 9, elements: [], }, { diff --git a/src/views/dashboard/AnalyticsStorage.vue b/src/views/dashboard/AnalyticsStorage.vue index 6b942c58..e9ceccf2 100644 --- a/src/views/dashboard/AnalyticsStorage.vue +++ b/src/views/dashboard/AnalyticsStorage.vue @@ -70,11 +70,11 @@ onActivated(() => { {{ t('dashboard.storage') }} -
+
{{ animatedStorageText }}
-
{{ t('storage.usedPercent', { percent: animatedUsedPercentText }) }} 🚀
-
+
{{ t('storage.usedPercent', { percent: animatedUsedPercentText }) }} 🚀
+
{ .v-card .triangle-bg { position: absolute; - inline-size: 8.75rem; + inline-size: clamp(7rem, 36%, 8.75rem); inset-block-end: 0; inset-inline-end: 0; } .v-card .trophy { position: absolute; - inline-size: 4.9375rem; - inset-block-end: 2rem; + inline-size: clamp(3.75rem, 18%, 4.5rem); + inset-block-end: 2.75rem; inset-inline-end: 2rem; } @@ -118,12 +118,26 @@ onActivated(() => { .dashboard-summary-content { flex: 1 1 auto; min-block-size: 0; + padding-block: 0.25rem 1rem; } .animated-storage-value { + font-size: clamp(1.375rem, 1.8vw, 1.5rem); + line-height: 1.2; 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 { overflow: hidden; }