GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-08-18 12:14:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(download): place metadata chips below title

Browse Source
This commit is contained in:
jxxghp
2026-08-07 07:34:50 +08:00
parent 0703a99e41
commit 4814f53c4e
2 changed files with 22 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/cards/DownloadingCard.vue
View File

@@ -174,24 +174,6 @@ async function deleteDownload() {
</div>
<VCardText class="downloading-card__body">
<div class="downloading-card__chips">
<VChip
v-if="mediaTypeText"
:prepend-icon="mediaTypeIcon"
color="primary"
size="x-small"
variant="tonal"
>
{{ mediaTypeText }}
</VChip>
<VChip v-if="sourceSiteText" prepend-icon="mdi-web" size="x-small" variant="tonal">
{{ sourceSiteText }}
</VChip>
<VChip class="downloading-card__size-chip" prepend-icon="mdi-harddisk" size="x-small" variant="tonal">
{{ sizeText }}
</VChip>
</div>
<div class="downloading-card__heading">
<div class="downloading-card__title" :title="mediaTitle">
<span>{{ mediaTitle }}</span>
@@ -202,6 +184,18 @@ async function deleteDownload() {
</div>
</div>
<div class="downloading-card__chips">
<VChip v-if="mediaTypeText" :prepend-icon="mediaTypeIcon" size="x-small" variant="tonal">
{{ mediaTypeText }}
</VChip>
<VChip prepend-icon="mdi-harddisk" size="x-small" variant="tonal">
{{ sizeText }}
</VChip>
<VChip v-if="sourceSiteText" prepend-icon="mdi-web" size="x-small" variant="tonal">
{{ sourceSiteText }}
</VChip>
</div>
<div v-if="progressValue > 0" class="downloading-card__progress">
<div class="downloading-card__progress-label">
<span>
@@ -323,21 +317,15 @@ async function deleteDownload() {
.downloading-card__chips {
display: flex;
min-inline-size: 0;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
}
.downloading-card__chips :deep(.v-chip) {
flex: 0 1 auto;
min-inline-size: 0;
max-inline-size: calc(50% - 0.2rem);
}
.downloading-card__chips :deep(.v-chip:not(.downloading-card__size-chip)) {
flex: 1 1 auto;
}
.downloading-card__chips :deep(.downloading-card__size-chip) {
flex: 0 0 auto;
max-inline-size: 100%;
}
.downloading-card__chips :deep(.v-chip__content) {
@@ -508,14 +496,6 @@ async function deleteDownload() {
padding-inline: 0.65rem !important;
}
.downloading-card__chips :deep(.v-chip) {
max-inline-size: 100%;
}
.downloading-card__chips :deep(.v-chip:first-child:last-child) {
display: inline-flex;
}
.downloading-card__actions :deep(.v-btn) {
block-size: 2.25rem;
inline-size: 2.25rem;

10
src/components/cards/__tests__/DownloadingCard.spec.ts
View File

@@ -143,9 +143,13 @@ describe('DownloadingCard display and pause state', () => {
it('keeps torrent size visible while resolving explicit site names and tracker hostnames', async () => {
const { container, rerender } = await renderCard(downloading({ site_name: ' M-Team ' }))
expect(container.querySelector('.downloading-card__chips')).toHaveTextContent('M-Team')
expect(container.querySelector('.downloading-card__chips')).toHaveTextContent('1.00 KB')
expect(container.querySelectorAll('.downloading-card__chips .v-chip')).toHaveLength(3)
const heading = container.querySelector('.downloading-card__heading')!
const chipContainer = container.querySelector('.downloading-card__chips')!
const chips = [...chipContainer.querySelectorAll('.v-chip')]
expect(heading.nextElementSibling).toBe(chipContainer)
expect(chips.map(chip => chip.textContent?.trim())).toEqual(['电视剧', '1.00 KB', 'M-Team'])
expect(chips.every(chip => !chip.classList.contains('text-primary'))).toBe(true)
await rerender({
downloaderName: 'qb-main',