feat(ui): align Dashboard Active and Recent Activity card heights
Both cards now use h-100 with a flex column layout so v-row stretches them to match, and their v-card-text grows to fill so their footers line up. Move Active's "+N more queued" out of the list body into a proper v-card-actions footer mirroring Recent Activity's "View all downloads" button. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -140,7 +140,7 @@
|
|||||||
<v-row class="mt-4">
|
<v-row class="mt-4">
|
||||||
<!-- Active Downloads (queued + running, auto-refresh) -->
|
<!-- Active Downloads (queued + running, auto-refresh) -->
|
||||||
<v-col cols="12" md="4">
|
<v-col cols="12" md="4">
|
||||||
<v-card>
|
<v-card class="h-100 d-flex flex-column">
|
||||||
<v-card-title class="d-flex align-center">
|
<v-card-title class="d-flex align-center">
|
||||||
<v-icon class="mr-2" :class="{ 'mdi-spin': activeDownloads.length }">
|
<v-icon class="mr-2" :class="{ 'mdi-spin': activeDownloads.length }">
|
||||||
{{ activeDownloads.length ? 'mdi-loading' : 'mdi-download' }}
|
{{ activeDownloads.length ? 'mdi-loading' : 'mdi-download' }}
|
||||||
@@ -160,7 +160,7 @@
|
|||||||
<v-icon>mdi-refresh</v-icon>
|
<v-icon>mdi-refresh</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
<v-card-text>
|
<v-card-text class="flex-grow-1">
|
||||||
<v-list v-if="activeDownloads.length" density="compact">
|
<v-list v-if="activeDownloads.length" density="compact">
|
||||||
<v-list-item
|
<v-list-item
|
||||||
v-for="dl in visibleActiveDownloads"
|
v-for="dl in visibleActiveDownloads"
|
||||||
@@ -181,11 +181,6 @@
|
|||||||
</v-chip>
|
</v-chip>
|
||||||
</v-list-item-subtitle>
|
</v-list-item-subtitle>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
<v-list-item v-if="hiddenActiveCount" class="text-caption text-medium-emphasis">
|
|
||||||
<v-btn variant="text" size="small" to="/downloads?status=queued">
|
|
||||||
+{{ hiddenActiveCount }} more queued
|
|
||||||
</v-btn>
|
|
||||||
</v-list-item>
|
|
||||||
</v-list>
|
</v-list>
|
||||||
<div v-else class="text-center py-8">
|
<div v-else class="text-center py-8">
|
||||||
<v-icon size="48" color="secondary" :style="{ opacity: 0.5 }">mdi-check-circle-outline</v-icon>
|
<v-icon size="48" color="secondary" :style="{ opacity: 0.5 }">mdi-check-circle-outline</v-icon>
|
||||||
@@ -193,19 +188,24 @@
|
|||||||
<div class="text-caption text-medium-emphasis mt-1">All sources are idle</div>
|
<div class="text-caption text-medium-emphasis mt-1">All sources are idle</div>
|
||||||
</div>
|
</div>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-btn variant="text" :to="hiddenActiveCount ? '/downloads?status=queued' : '/downloads'">
|
||||||
|
{{ hiddenActiveCount ? `View all downloads (+${hiddenActiveCount} more queued)` : 'View all downloads' }}
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<!-- Recent Activity -->
|
<!-- Recent Activity -->
|
||||||
<v-col cols="12" md="8">
|
<v-col cols="12" md="8">
|
||||||
<v-card>
|
<v-card class="h-100 d-flex flex-column">
|
||||||
<v-card-title>
|
<v-card-title>
|
||||||
Recent Activity
|
Recent Activity
|
||||||
<v-chip v-if="recentActivity.length" size="small" class="ml-2" variant="tonal">
|
<v-chip v-if="recentActivity.length" size="small" class="ml-2" variant="tonal">
|
||||||
Last 7 days
|
Last 7 days
|
||||||
</v-chip>
|
</v-chip>
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
<v-card-text>
|
<v-card-text class="flex-grow-1">
|
||||||
<v-list v-if="recentActivityGrouped.length">
|
<v-list v-if="recentActivityGrouped.length">
|
||||||
<template v-for="entry in visibleRecentActivity" :key="entry.key">
|
<template v-for="entry in visibleRecentActivity" :key="entry.key">
|
||||||
<v-list-item v-if="entry.kind === 'single'">
|
<v-list-item v-if="entry.kind === 'single'">
|
||||||
|
|||||||
Reference in New Issue
Block a user