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 ( return (
<div className="space-y-6"> <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 /> <DeviceDiscovery />
{/* 2. MAIN 2-COLUMN GRID LAYOUT (EXAKT NACH SC1 MOCKUP) */} {/* 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"> <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-stretch">
{/* LEFT COLUMN (lg:col-span-7) */} {/* LEFT COLUMN (lg:col-span-7) - flex flex-col justify-between fuer buendigen Abschluss */}
<div className="lg:col-span-7 space-y-6"> <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"> <Card className="border border-amber-500/30 bg-[#0f1422] shadow-xl">
<CardHeader className="border-b border-slate-800"> <CardHeader className="border-b border-slate-800">
<CardTitle className="text-amber-400 flex items-center gap-2"> <CardTitle className="text-amber-400 flex items-center gap-2">
@@ -211,35 +211,37 @@ export default function Dashboard() {
</CardContent> </CardContent>
</Card> </Card>
{/* Ripping Queue Card (EXAKT NACH SC1 MOCKUP METHODIK) */} {/* 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]"> <Card className="border border-slate-800 bg-[#0f1422] flex-1 flex flex-col justify-between">
<CardHeader className="border-b border-slate-800"> <CardHeader className="border-b border-slate-800">
<CardTitle className="text-slate-200">Ripping Queue ({queueJobs.length})</CardTitle> <CardTitle className="text-slate-200">Ripping Queue ({queueJobs.length})</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="p-4 space-y-2.5"> <CardContent className="p-4 flex-1 flex flex-col justify-between">
{queueJobs.length > 0 ? ( {queueJobs.length > 0 ? (
queueJobs.map((j, idx) => ( <div className="space-y-2.5">
<div key={j.id} className="flex items-center justify-between p-3 rounded-xl bg-slate-900/80 border border-slate-800 text-sm"> {queueJobs.map((j, idx) => (
<div className="flex items-center gap-3 min-w-0"> <div key={j.id} className="flex items-center justify-between p-3 rounded-xl bg-slate-900/80 border border-slate-800 text-sm">
{posterUrl(j.meta) ? ( <div className="flex items-center gap-3 min-w-0">
<img src={posterUrl(j.meta)!} alt="" className="w-8 h-10 rounded object-cover flex-shrink-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 className="w-8 h-10 rounded bg-slate-800 flex items-center justify-center flex-shrink-0 text-slate-500">
</div> <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> <span className="font-mono text-amber-400 font-bold flex-shrink-0">{idx + 2}.</span>
<TypeBadge type={j.type} /> <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> </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} </div>
</span>
</div>
))
) : ( ) : (
/* SC1 Styled Queue List slots (sauberes SC1 Queue Layout ohne hässliches Loch) */ /* SC1 Styled Queue List slots (buendiger voller Abschluss) */
<div className="space-y-2"> <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 justify-between p-3 rounded-xl bg-slate-900/40 border border-slate-800/60 text-sm">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="font-mono text-amber-400/80 font-bold">2.</span> <span className="font-mono text-amber-400/80 font-bold">2.</span>
@@ -254,6 +256,13 @@ export default function Dashboard() {
</div> </div>
<span className="text-xs text-slate-500 font-mono">Queue 2</span> <span className="text-xs text-slate-500 font-mono">Queue 2</span>
</div> </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> </div>
)} )}
</CardContent> </CardContent>
@@ -261,8 +270,8 @@ export default function Dashboard() {
</div> </div>
{/* RIGHT COLUMN (lg:col-span-5) */} {/* RIGHT COLUMN (lg:col-span-5) - flex flex-col justify-between */}
<div className="lg:col-span-5 space-y-6"> <div className="lg:col-span-5 flex flex-col justify-between space-y-6">
{/* Server Status Card */} {/* Server Status Card */}
<Card className="border border-slate-800 bg-[#0f1422]"> <Card className="border border-slate-800 bg-[#0f1422]">
@@ -325,8 +334,8 @@ export default function Dashboard() {
</CardContent> </CardContent>
</Card> </Card>
{/* Recently Ripped Card (SC1 Right Bottom) */} {/* Recently Ripped Card */}
<Card className="border border-slate-800 bg-[#0f1422]"> <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"> <CardHeader className="border-b border-slate-800 flex items-center justify-between">
<CardTitle className="text-slate-200">Recently Ripped ({completedJobs.length})</CardTitle> <CardTitle className="text-slate-200">Recently Ripped ({completedJobs.length})</CardTitle>
{completedJobs.length > 0 && ( {completedJobs.length > 0 && (
@@ -335,13 +344,13 @@ export default function Dashboard() {
</Button> </Button>
)} )}
</CardHeader> </CardHeader>
<CardContent className="p-4"> <CardContent className="p-4 flex-1 flex flex-col justify-between">
{completedJobs.length === 0 ? ( {completedJobs.length === 0 ? (
<div className="text-center py-8 text-slate-500 text-xs font-mono"> <div className="text-center py-8 text-slate-500 text-xs font-mono">
Noch keine gerippten Medien in der Datenbank Noch keine gerippten Medien in der Datenbank
</div> </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) => { {completedJobs.slice(0, 3).map((item) => {
const poster = posterUrl(item.meta) const poster = posterUrl(item.meta)
return ( return (
@@ -381,7 +390,7 @@ export default function Dashboard() {
</div> </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"> <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"> <CardHeader className="border-b border-slate-800 flex flex-wrap items-center justify-between gap-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">