UI Phase 1: Statistik 50/50, Footer rechts, Linksammler bis Footer, Bandbreiten-Graph oben rechts, Stat-Karten + Hilfe-Untermenues
Sichtbarkeits-/Layout-Politur (User-Wunsch, Quick-Wins-Paket vor den groesseren Reworks von Einstellungen-Tab und Account-Verwaltung): - Statistik: Bandbreitenverlauf und Hoster-Statistik jetzt 50/50 statt 40/60 (grid-template-columns 1fr 1fr). - Footer: die Zaehler (Pakete/Links/Session/Gesamt/Hoster/Speed/ETA) wandern nach unten-RECHTS, die Aktions-Buttons (Ein-/Ausklappen, Leeren, Clipboard) nach links. - Linksammler: das Textfeld fuellt jetzt die volle Hoehe bis zum Footer (collector-view: grid-row 1fr, textarea flex:1) statt bei 220px zu enden. - Downloads-Tab: neuer Bandbreiten-Graph oben rechts (DownloadSpeedSparkline) neben der Suche. Eigener 250ms-Timer mit geglaettetem Verlauf: bei kurzem Einbruch auf 0 faellt die Kurve nicht hart ab, sondern gleitet weich runter (asymmetrisches Easing: schnell hoch 0.45, langsam runter 0.12) und korrigiert sich wieder; die angezeigte Zahl bleibt der echte aktuelle Wert. Erste Version - Optik wird nach JDownloader-Screenshot nachgezogen. - Stat-Karten professioneller: Wert in Zahl + Einheit getrennt (Einheit dezent), ruhige Leerzustaende (idle '0'/'—' gedaempft statt nacktem grossen '0'), kompaktere Karten, dezentere Eyebrow-Labels. - Hoster-Balken: flacher Akzent statt Neon-Verlauf (kein Gradient). - Hilfe-Menue umstrukturiert mit Hover-Untermenues: 'Logs oeffnen' (Haupt-, Audit-, Rename-, Session-, Trace-Log), 'Remote-Support' (Support-Bundle + Support-Trace), 'Diagnose' (Debug-Setup + Debug-Token); 'Letzte Fehler anzeigen' und 'Suche Aktualisierungen' bleiben direkt. Reine Renderer-Aenderung (App.tsx + styles.css). 808 Tests gruen, tsc=6 Baseline, Build ok.
This commit is contained in:
+76
-15
@@ -536,6 +536,33 @@ body,
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.speed-sparkline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
background: var(--field);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.speed-sparkline-canvas {
|
||||
width: 116px;
|
||||
height: 22px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.speed-sparkline-value {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
min-width: 66px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.tab {
|
||||
background: var(--tab-bg);
|
||||
border: 1px solid var(--border);
|
||||
@@ -579,6 +606,20 @@ body,
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
.collector-view {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.collector-view .card.wide {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.collector-view .card textarea {
|
||||
flex: 1;
|
||||
min-height: 120px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
@@ -2531,7 +2572,7 @@ td {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 10px;
|
||||
min-height: 0;
|
||||
@@ -2579,10 +2620,10 @@ td {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-height: 96px;
|
||||
gap: 10px;
|
||||
min-height: 82px;
|
||||
min-width: 0;
|
||||
padding: 12px 14px;
|
||||
padding: 11px 14px;
|
||||
background: var(--field);
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--border);
|
||||
@@ -2600,16 +2641,17 @@ td {
|
||||
.stat-top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.stat-eyebrow {
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
font-size: 9.5px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.stat-item.stat-item-clickable {
|
||||
@@ -2623,25 +2665,44 @@ td {
|
||||
|
||||
.stat-label {
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: clamp(22px, 1.35vw, 30px);
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: 1.1;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.stat-value.stat-value-compact {
|
||||
font-size: clamp(18px, 1.05vw, 24px);
|
||||
line-height: 1.2;
|
||||
.stat-num {
|
||||
font-size: clamp(22px, 1.35vw, 30px);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.stat-value.danger {
|
||||
.stat-unit {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.stat-value.stat-value-compact {
|
||||
font-size: clamp(18px, 1.05vw, 24px);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.stat-value.stat-idle,
|
||||
.stat-value.stat-idle .stat-num {
|
||||
color: var(--muted);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.stat-value.danger,
|
||||
.stat-value.danger .stat-num {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
@@ -2718,7 +2779,7 @@ td {
|
||||
}
|
||||
|
||||
.bar-fill.completed {
|
||||
background: linear-gradient(90deg, #f2942d, #ff7a5c);
|
||||
background: var(--accent, #f2942d);
|
||||
}
|
||||
|
||||
.provider-detail {
|
||||
|
||||
Reference in New Issue
Block a user