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

fix(download): compact poster cards (#634)

Browse Source
This commit is contained in:
jxxghp
2026-08-03 20:09:05 +08:00
committed by GitHub
parent fa254499bc
commit 37e645ed9c
1 changed files with 9 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/cards/DownloadingCard.vue
+9 -29
View File
@@ -159,13 +159,7 @@ async function deleteDownload() {
}" }"
> >
<div v-if="hasPosterImage" class="downloading-card__poster"> <div v-if="hasPosterImage" class="downloading-card__poster">
<VImg <VImg :src="media.image" class="downloading-card__image" position="center" @error="imageLoadError = true">
:src="media.image"
class="downloading-card__image"
cover
position="top"
@error="imageLoadError = true"
>
<template #placeholder> <template #placeholder>
<VSkeletonLoader class="downloading-card__image-loader h-full" /> <VSkeletonLoader class="downloading-card__image-loader h-full" />
</template> </template>
@@ -276,7 +270,7 @@ async function deleteDownload() {
.downloading-card { .downloading-card {
display: grid; display: grid;
min-block-size: 13rem; min-block-size: 12rem;
color: rgb(var(--v-theme-on-surface)); color: rgb(var(--v-theme-on-surface));
grid-template-columns: 8.25rem minmax(0, 1fr); grid-template-columns: 8.25rem minmax(0, 1fr);
} }
@@ -284,7 +278,7 @@ async function deleteDownload() {
.downloading-card__poster { .downloading-card__poster {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
min-block-size: 13rem; min-block-size: 12rem;
background: rgba(var(--v-theme-on-surface), 0.06); background: rgba(var(--v-theme-on-surface), 0.06);
} }
@@ -294,14 +288,6 @@ async function deleteDownload() {
inline-size: 100%; inline-size: 100%;
} }
.downloading-card__image :deep(.v-img__img) {
transition: transform 0.35s ease;
}
.downloading-card--hovering .downloading-card__image :deep(.v-img__img) {
transform: scale(1.035);
}
.downloading-card__poster-edge { .downloading-card__poster-edge {
position: absolute; position: absolute;
background: linear-gradient(90deg, rgba(var(--v-theme-surface), 0) 72%, rgba(var(--v-theme-surface), 0.38)); background: linear-gradient(90deg, rgba(var(--v-theme-surface), 0) 72%, rgba(var(--v-theme-surface), 0.38));
@@ -313,8 +299,8 @@ async function deleteDownload() {
display: flex; display: flex;
min-inline-size: 0; min-inline-size: 0;
flex-direction: column; flex-direction: column;
gap: 0.65rem; gap: 0.55rem;
padding: 1rem !important; padding: 0.875rem !important;
} }
.downloading-card__chips { .downloading-card__chips {
@@ -457,17 +443,17 @@ async function deleteDownload() {
@container (width <= 25rem) { @container (width <= 25rem) {
.downloading-card { .downloading-card {
min-block-size: 12rem; min-block-size: 11rem;
grid-template-columns: 6.75rem minmax(0, 1fr); grid-template-columns: 6.75rem minmax(0, 1fr);
} }
.downloading-card__poster { .downloading-card__poster {
min-block-size: 12rem; min-block-size: 11rem;
} }
.downloading-card__body { .downloading-card__body {
gap: 0.5rem; gap: 0.45rem;
padding: 0.75rem !important; padding: 0.65rem !important;
} }
.downloading-card__chips { .downloading-card__chips {
@@ -518,10 +504,4 @@ async function deleteDownload() {
min-block-size: 0; min-block-size: 0;
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
} }
@media (prefers-reduced-motion: reduce) {
.downloading-card__image :deep(.v-img__img) {
transition: none;
}
}
</style> </style>