chris/nsfwapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed finished card view

Browse Source
This commit is contained in:
Linrador 2026-03-09 15:17:30 +01:00
parent ceb310a428
commit d5c5a8488c
1 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/ui/FinishedDownloadsCardsView.tsx
View File

@ -879,7 +879,12 @@ export default function FinishedDownloadsCardsView({
const stackExtraTopPx = (Math.min(mobileVisibleStackRows.length, mobileStackDepth) - 1) const stackExtraTopPx = (Math.min(mobileVisibleStackRows.length, mobileStackDepth) - 1)
return ( return (
<div className="relative"> <div
className={[
'relative',
isLoading && rows.length === 0 ? 'min-h-[320px]' : '',
].filter(Boolean).join(' ')}
>
{!isSmall ? ( {!isSmall ? (
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
{rows.map((j) => { {rows.map((j) => {
@ -913,10 +918,9 @@ export default function FinishedDownloadsCardsView({
return ( return (
<> <>
{/* Hintere Karten zuerst (absolut, dekorativ) */}
{backRows {backRows
.map((j, backIdx) => { .map((j, backIdx) => {
const idx = backIdx + 1 // 1,2... const idx = backIdx + 1
const { k, cardInner } = renderCardItem(j, { const { k, cardInner } = renderCardItem(j, {
forceStill: true, forceStill: true,
disableInline: true, disableInline: true,
@ -953,7 +957,6 @@ export default function FinishedDownloadsCardsView({
}) })
.reverse()} .reverse()}
{/* Oberste Karte im Flow -> bestimmt die echte Höhe */}
{topRow ? (() => { {topRow ? (() => {
const j = topRow const j = topRow
const { k, busy, isHot, cardInner, inlineDomId } = renderCardItem(j, { const { k, busy, isHot, cardInner, inlineDomId } = renderCardItem(j, {
@ -1018,7 +1021,6 @@ export default function FinishedDownloadsCardsView({
})()} })()}
</div> </div>
{/* ✅ Hidden preloader (mobile): nur wenige nächste Cards, sonst UI träge */}
{mobileStillPreloadRows.length > 0 ? ( {mobileStillPreloadRows.length > 0 ? (
<div className="sr-only" aria-hidden="true"> <div className="sr-only" aria-hidden="true">
{mobileStillPreloadRows.map((j) => { {mobileStillPreloadRows.map((j) => {
@ -1057,7 +1059,6 @@ export default function FinishedDownloadsCardsView({
{isLoading && rows.length === 0 ? ( {isLoading && rows.length === 0 ? (
<div className="absolute inset-0 z-20 grid place-items-center rounded-lg bg-white/50 backdrop-blur-[2px] dark:bg-gray-950/40"> <div className="absolute inset-0 z-20 grid place-items-center rounded-lg bg-white/50 backdrop-blur-[2px] dark:bg-gray-950/40">
{/* Spinner (zentriert) */}
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white/80 px-3 py-2 shadow-sm dark:border-white/10 dark:bg-gray-900/70"> <div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white/80 px-3 py-2 shadow-sm dark:border-white/10 dark:bg-gray-900/70">
<div className="h-5 w-5 animate-spin rounded-full border-2 border-gray-300 border-t-transparent dark:border-white/20 dark:border-t-transparent" /> <div className="h-5 w-5 animate-spin rounded-full border-2 border-gray-300 border-t-transparent dark:border-white/20 dark:border-t-transparent" />
<div className="text-sm font-medium text-gray-800 dark:text-gray-100">Lade…</div> <div className="text-sm font-medium text-gray-800 dark:text-gray-100">Lade…</div>