Hitonabi/rippy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(ui): Ripping Queue Kachel per flex-1 vertikal gestreckt fuer exakt buendigen unteren Abschluss mit Recently Ripped
Ampel / ampel (push) Successful in 28s
Details

Browse Source
This commit is contained in:
Hitonabi
2026-07-24 16:41:26 +02:00
parent 60abf42359
commit e0864828c2
1 changed files with 45 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/ui/src/pages/Dashboard.tsx
+45 -36
View File
@@ -143,16 +143,16 @@ export default function Dashboard() {
return (
<div className="space-y-6">
{/* 1. GANZ OBEN: Laufwerke & Erkannte Disc im Laufwerk (Akira / Auto Pre-Scan Banner) */}
{/* 1. GANZ OBEN: Laufwerke & Erkannte Disc im Laufwerk */}
<DeviceDiscovery />
{/* 2. MAIN 2-COLUMN GRID LAYOUT (EXAKT NACH SC1 MOCKUP) */}
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
{/* 2. MAIN 2-COLUMN GRID LAYOUT (BÜNDIGER UNTERER ABSCHLUSS ZWISCHEN LINKS UND RECHTS) */}
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-stretch">
{/* LEFT COLUMN (lg:col-span-7) */}
<div className="lg:col-span-7 space-y-6">
{/* LEFT COLUMN (lg:col-span-7) - flex flex-col justify-between fuer buendigen Abschluss */}
<div className="lg:col-span-7 flex flex-col justify-between space-y-6">
{/* Current Job Card (SC1 Left Top) */}
{/* Current Job Card */}
<Card className="border border-amber-500/30 bg-[#0f1422] shadow-xl">
<CardHeader className="border-b border-slate-800">
<CardTitle className="text-amber-400 flex items-center gap-2">
@@ -211,35 +211,37 @@ export default function Dashboard() {
</CardContent>
</Card>
{/* Ripping Queue Card (EXAKT NACH SC1 MOCKUP METHODIK) */}
<Card className="border border-slate-800 bg-[#0f1422]">
{/* Ripping Queue Card (flex-1 flex flex-col justify-between fuer exakt buendigen Abschluss mit Recently Ripped) */}
<Card className="border border-slate-800 bg-[#0f1422] flex-1 flex flex-col justify-between">
<CardHeader className="border-b border-slate-800">
<CardTitle className="text-slate-200">Ripping Queue ({queueJobs.length})</CardTitle>
</CardHeader>
<CardContent className="p-4 space-y-2.5">
<CardContent className="p-4 flex-1 flex flex-col justify-between">
{queueJobs.length > 0 ? (
queueJobs.map((j, idx) => (
<div key={j.id} className="flex items-center justify-between p-3 rounded-xl bg-slate-900/80 border border-slate-800 text-sm">
<div className="flex items-center gap-3 min-w-0">
{posterUrl(j.meta) ? (
<img src={posterUrl(j.meta)!} alt="" className="w-8 h-10 rounded object-cover flex-shrink-0" />
) : (
<div className="w-8 h-10 rounded bg-slate-800 flex items-center justify-center flex-shrink-0 text-slate-500">
<Disc size={16} />
</div>
)}
<span className="font-mono text-amber-400 font-bold flex-shrink-0">{idx + 2}.</span>
<span className="font-semibold text-slate-100 truncate">{j.title || 'Unbekannt'}</span>
<TypeBadge type={j.type} />
<div className="space-y-2.5">
{queueJobs.map((j, idx) => (
<div key={j.id} className="flex items-center justify-between p-3 rounded-xl bg-slate-900/80 border border-slate-800 text-sm">
<div className="flex items-center gap-3 min-w-0">
{posterUrl(j.meta) ? (
<img src={posterUrl(j.meta)!} alt="" className="w-8 h-10 rounded object-cover flex-shrink-0" />
) : (
<div className="w-8 h-10 rounded bg-slate-800 flex items-center justify-center flex-shrink-0 text-slate-500">
<Disc size={16} />
</div>
)}
<span className="font-mono text-amber-400 font-bold flex-shrink-0">{idx + 2}.</span>
<span className="font-semibold text-slate-100 truncate">{j.title || 'Unbekannt'}</span>
<TypeBadge type={j.type} />
</div>
<span className="text-xs text-slate-400 font-mono px-2 py-1 rounded bg-slate-800 border border-slate-700 flex-shrink-0">
Queue {idx + 1}
</span>
</div>
<span className="text-xs text-slate-400 font-mono px-2 py-1 rounded bg-slate-800 border border-slate-700 flex-shrink-0">
Queue {idx + 1}
</span>
</div>
))
))}
</div>
) : (
/* SC1 Styled Queue List slots (sauberes SC1 Queue Layout ohne hässliches Loch) */
<div className="space-y-2">
/* SC1 Styled Queue List slots (buendiger voller Abschluss) */
<div className="space-y-3 my-auto py-2">
<div className="flex items-center justify-between p-3 rounded-xl bg-slate-900/40 border border-slate-800/60 text-sm">
<div className="flex items-center gap-3">
<span className="font-mono text-amber-400/80 font-bold">2.</span>
@@ -254,6 +256,13 @@ export default function Dashboard() {
</div>
<span className="text-xs text-slate-500 font-mono">Queue 2</span>
</div>
<div className="flex items-center justify-between p-3 rounded-xl bg-slate-900/40 border border-slate-800/60 text-sm">
<div className="flex items-center gap-3">
<span className="font-mono text-amber-400/80 font-bold">4.</span>
<span className="font-medium text-slate-400">Bereit für nächste Disc...</span>
</div>
<span className="text-xs text-slate-500 font-mono">Queue 3</span>
</div>
</div>
)}
</CardContent>
@@ -261,8 +270,8 @@ export default function Dashboard() {
</div>
{/* RIGHT COLUMN (lg:col-span-5) */}
<div className="lg:col-span-5 space-y-6">
{/* RIGHT COLUMN (lg:col-span-5) - flex flex-col justify-between */}
<div className="lg:col-span-5 flex flex-col justify-between space-y-6">
{/* Server Status Card */}
<Card className="border border-slate-800 bg-[#0f1422]">
@@ -325,8 +334,8 @@ export default function Dashboard() {
</CardContent>
</Card>
{/* Recently Ripped Card (SC1 Right Bottom) */}
<Card className="border border-slate-800 bg-[#0f1422]">
{/* Recently Ripped Card */}
<Card className="border border-slate-800 bg-[#0f1422] flex-1 flex flex-col justify-between">
<CardHeader className="border-b border-slate-800 flex items-center justify-between">
<CardTitle className="text-slate-200">Recently Ripped ({completedJobs.length})</CardTitle>
{completedJobs.length > 0 && (
@@ -335,13 +344,13 @@ export default function Dashboard() {
</Button>
)}
</CardHeader>
<CardContent className="p-4">
<CardContent className="p-4 flex-1 flex flex-col justify-between">
{completedJobs.length === 0 ? (
<div className="text-center py-8 text-slate-500 text-xs font-mono">
Noch keine gerippten Medien in der Datenbank
</div>
) : (
<div className="grid grid-cols-3 gap-3">
<div className="grid grid-cols-3 gap-3 my-auto">
{completedJobs.slice(0, 3).map((item) => {
const poster = posterUrl(item.meta)
return (
@@ -381,7 +390,7 @@ export default function Dashboard() {
</div>
{/* 3. VOLLSTÄNDIGE JOB-TABELLE & MEDIEN-BIBLIOTHEK (MIT INHALTSANGABEN / BESCHREIBUNGEN) */}
{/* 3. VOLLSTÄNDIGE JOB-TABELLE & MEDIEN-BIBLIOTHEK */}
<Card className="border border-slate-800 bg-[#0f1422] overflow-hidden">
<CardHeader className="border-b border-slate-800 flex flex-wrap items-center justify-between gap-4">
<div className="flex items-center gap-3">