Administrator/Twitch-VOD-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 212 Wiki Activity

cleanup: stats card header reuses .form-row.section-header + .card-intro.flush

Browse Source 
The Statistics tab's "Archiv-Statistik" card had its own bespoke inline-styled flex header (display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px) plus an inline margin:0 on the h3 and an inline-styled intro paragraph with a different margin rhythm than the other 7 card intros (margin-top:8px; margin-bottom:0).

Two small additions reuse the existing classes:
- flex-wrap:wrap added to .form-row.section-header so the System-Check / Storage / now-Stats headers all wrap gracefully on narrow widths instead of overflowing. Strict improvement everywhere it's already used.
- .card-intro.flush modifier (margin-top:8px; margin-bottom:0) for intros that sit flush against the next block rather than spaced from it.

Three more inline style attributes gone, and the stats header now shares the same width-collapse behavior as the other section-header rows.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xRangerDE 2026-05-11 06:12:10 +02:00
parent 67da6d4c58
commit 35dc3201d8
2 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/index.html
View File

@ -419,14 +419,14 @@
<!-- Statistics Tab -->
<div class="tab-content" id="statsTab">
<div class="settings-card">
<div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;">
<h3 id="statsTitle" style="margin:0;">Archiv-Statistik</h3>
<div class="form-row section-header">
<h3 id="statsTitle">Archiv-Statistik</h3>
<div style="display:flex; gap:8px; align-items:center;">
<span id="statsLastScannedLabel" class="form-sublabel"></span>
<button class="btn-secondary" id="btnStatsRefresh" onclick="refreshArchiveStats()">Aktualisieren</button>
</div>
</div>
<p id="statsIntro" style="color: var(--text-secondary); font-size:13px; margin-top:8px; margin-bottom:0; line-height:1.5;">Aggregiert ueber den Download-Ordner. Live-Aufnahmen liegen unter <code>{streamer}/live/</code>, VOD-Downloads direkt unter <code>{streamer}/</code>. Lade-Zeit skaliert mit der Anzahl Dateien.</p>
<p id="statsIntro" class="card-intro flush">Aggregiert ueber den Download-Ordner. Live-Aufnahmen liegen unter <code>{streamer}/live/</code>, VOD-Downloads direkt unter <code>{streamer}/</code>. Lade-Zeit skaliert mit der Anzahl Dateien.</p>
</div>
<div class="settings-card">

9
src/styles.css
View File

@ -1733,6 +1733,7 @@ select option {
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
flex-wrap: wrap;
}
.form-row.section-header h3 {
@ -2157,6 +2158,14 @@ select option {
margin-bottom: 12px;
}
/* Flush variant: the intro sits flush against the next sibling block
(e.g. the stats summary grid) and gets its top breathing room from
the preceding section-header row rather than its own bottom margin. */
.card-intro.flush {
margin-top: 8px;
margin-bottom: 0;
}
/* Filename-templates 3-pair grid (VOD / Part / Clip template inputs).
Each row is a label above an input; the label gets the 13px secondary
styling that used to be inline on every label. */