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

cleanup: extract recurring inline form patterns into utility classes

Browse Source 
Audit turned up two ~6-occurrence inline-style patterns in Settings:

- `style="font-size:12px; color:var(--text-secondary);"` on small
  sub-labels above stacked inputs (autoCleanupDaysLabel,
  TargetLabel, ActionLabel, autoVodPollMinutesLabel,
  autoVodMaxAgeHoursLabel, statsLastScannedLabel)

- `style="display:flex; flex-direction:column; gap:4px; flex:1;
  min-width:NNNpx;"` on labels that wrap a sublabel + control as a
  vertical pair in a flex row (3 of these in the auto-cleanup
  grid)

Both lifted to .form-sublabel and .form-stack utility classes.
Plus a .form-note for block-level secondary-coloured text (the
cleanupReport "X files would be freed" panel). The min-width
values stay inline since they vary per call site (120 / 160 / 200).

Zero visual change — the class values match what was inline.
Future edits to "what does a small label look like" go through
one selector instead of grep + sed across six sites.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xRangerDE
2026-05-11 02:43:23 +02:00
co-authored by Claude Opus 4.7
parent e68db24e10
commit 5d61094226
2 changed files with 40 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.html
+10 -10
View File
@@ -422,7 +422,7 @@
<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 style="display:flex; gap:8px; align-items:center;">
<span id="statsLastScannedLabel" style="font-size:12px; color:var(--text-secondary);"></span>
<span id="statsLastScannedLabel" class="form-sublabel"></span>
<button class="btn-secondary" id="btnStatsRefresh" onclick="refreshArchiveStats()">Aktualisieren</button>
</div>
</div>
@@ -706,19 +706,19 @@
<span id="autoCleanupEnabledLabel">Auto-Cleanup aktivieren</span>
</label>
<div class="form-row" style="gap:12px; flex-wrap:wrap; margin-bottom: 8px;">
<label style="display:flex; flex-direction:column; gap:4px; flex:1; min-width:120px;">
<span id="autoCleanupDaysLabel" style="font-size:12px; color:var(--text-secondary);">Tage-Schwelle</span>
<label class="form-stack" style="min-width:120px;">
<span id="autoCleanupDaysLabel" class="form-sublabel">Tage-Schwelle</span>
<input type="number" id="autoCleanupDays" min="1" max="3650" value="30">
</label>
<label style="display:flex; flex-direction:column; gap:4px; flex:1; min-width:160px;">
<span id="autoCleanupTargetLabel" style="font-size:12px; color:var(--text-secondary);">Bereich</span>
<label class="form-stack" style="min-width:160px;">
<span id="autoCleanupTargetLabel" class="form-sublabel">Bereich</span>
<select id="autoCleanupTarget">
<option value="live_only" id="autoCleanupTargetLive">Nur Live-Aufnahmen</option>
<option value="all" id="autoCleanupTargetAll">Alle Aufnahmen</option>
</select>
</label>
<label style="display:flex; flex-direction:column; gap:4px; flex:1; min-width:160px;">
<span id="autoCleanupActionLabel" style="font-size:12px; color:var(--text-secondary);">Aktion</span>
<label class="form-stack" style="min-width:160px;">
<span id="autoCleanupActionLabel" class="form-sublabel">Aktion</span>
<select id="autoCleanupAction">
<option value="archive" id="autoCleanupActionArchive">In Archiv verschieben</option>
<option value="delete" id="autoCleanupActionDelete">Loeschen</option>
@@ -729,7 +729,7 @@
<button class="btn-secondary" id="btnCleanupDryRun" onclick="runCleanupDryRun()">Vorschau</button>
<button class="btn-secondary" id="btnCleanupRunNow" onclick="runCleanupNow()">Jetzt ausfuehren</button>
</div>
<div id="cleanupReport" style="color: var(--text-secondary); font-size:12px;"></div>
<div id="cleanupReport" class="form-note"></div>
</div>
<div class="settings-card">
@@ -763,9 +763,9 @@
<h3 id="autoVodCardTitle">Auto-VOD-Download</h3>
<p id="autoVodCardIntro" style="color: var(--text-secondary); font-size:13px; margin-bottom:12px; line-height:1.5;">Streamer mit aktiviertem VOD-Toggle werden in dem hier festgelegten Intervall auf neue Twitch-VODs geprueft. Neue VODs innerhalb des Alters-Fensters werden automatisch zur Download-Queue hinzugefuegt.</p>
<div class="form-row" style="margin-bottom: 10px; align-items: center;">
<span id="autoVodPollMinutesLabel" style="font-size:12px; color:var(--text-secondary);">Poll-Intervall (Minuten)</span>
<span id="autoVodPollMinutesLabel" class="form-sublabel">Poll-Intervall (Minuten)</span>
<input type="number" id="autoVodPollMinutes" min="5" max="360" value="15" style="width:90px;">
<span id="autoVodMaxAgeHoursLabel" style="font-size:12px; color:var(--text-secondary); margin-left:12px;">Max. Alter (Stunden)</span>
<span id="autoVodMaxAgeHoursLabel" class="form-sublabel" style="margin-left:12px;">Max. Alter (Stunden)</span>
<input type="number" id="autoVodMaxAgeHours" min="1" max="720" value="24" style="width:90px;">
</div>
<div class="form-row" style="align-items: center; gap: 12px; flex-wrap: wrap;">