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

cleanup: .form-stack size modifiers + .input-narrow — 5 inline width styles gone

Browse Source 
Two related size-modifier patterns extracted:

1. .form-stack.size-sm (min-width:120px) and .form-stack.size-md (min-width:160px) — the Auto-Cleanup 3-up row carried three near-identical inline min-width declarations (120 / 160 / 160). They control where the row breaks to a new line on narrow widths, so the breakpoint metadata is logically a layout-modifier-class concern, not inline-style markup.

2. .input-narrow (width:90px) — the two Auto-VOD inputs (Poll-Intervall, Max. Alter) had their width inline because the values are 2-3 digits and a full-width input would look odd. Encoded once as a class, applied twice.

Net: 5 inline style attributes gone, 3 new CSS rules.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xRangerDE 2026-05-11 06:56:31 +02:00
parent 562e92494b
commit 3362138d1a
2 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/index.html
View File

@ -706,18 +706,18 @@
<span id="autoCleanupEnabledLabel">Auto-Cleanup aktivieren</span> <span id="autoCleanupEnabledLabel">Auto-Cleanup aktivieren</span>
</label> </label>
<div class="form-row" style="gap:12px; flex-wrap:wrap; margin-bottom: 8px;"> <div class="form-row" style="gap:12px; flex-wrap:wrap; margin-bottom: 8px;">
<label class="form-stack" style="min-width:120px;"> <label class="form-stack size-sm">
<span id="autoCleanupDaysLabel" class="form-sublabel">Tage-Schwelle</span> <span id="autoCleanupDaysLabel" class="form-sublabel">Tage-Schwelle</span>
<input type="number" id="autoCleanupDays" min="1" max="3650" value="30"> <input type="number" id="autoCleanupDays" min="1" max="3650" value="30">
</label> </label>
<label class="form-stack" style="min-width:160px;"> <label class="form-stack size-md">
<span id="autoCleanupTargetLabel" class="form-sublabel">Bereich</span> <span id="autoCleanupTargetLabel" class="form-sublabel">Bereich</span>
<select id="autoCleanupTarget"> <select id="autoCleanupTarget">
<option value="live_only" id="autoCleanupTargetLive">Nur Live-Aufnahmen</option> <option value="live_only" id="autoCleanupTargetLive">Nur Live-Aufnahmen</option>
<option value="all" id="autoCleanupTargetAll">Alle Aufnahmen</option> <option value="all" id="autoCleanupTargetAll">Alle Aufnahmen</option>
</select> </select>
</label> </label>
<label class="form-stack" style="min-width:160px;"> <label class="form-stack size-md">
<span id="autoCleanupActionLabel" class="form-sublabel">Aktion</span> <span id="autoCleanupActionLabel" class="form-sublabel">Aktion</span>
<select id="autoCleanupAction"> <select id="autoCleanupAction">
<option value="archive" id="autoCleanupActionArchive">In Archiv verschieben</option> <option value="archive" id="autoCleanupActionArchive">In Archiv verschieben</option>
@ -764,9 +764,9 @@
<p id="autoVodCardIntro" class="card-intro">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> <p id="autoVodCardIntro" class="card-intro">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 aligned"> <div class="form-row aligned">
<label id="autoVodPollMinutesLabel" class="form-sublabel" for="autoVodPollMinutes">Poll-Intervall (Minuten)</label> <label id="autoVodPollMinutesLabel" class="form-sublabel" for="autoVodPollMinutes">Poll-Intervall (Minuten)</label>
<input type="number" id="autoVodPollMinutes" min="5" max="360" value="15" style="width:90px;"> <input type="number" id="autoVodPollMinutes" min="5" max="360" value="15" class="input-narrow">
<label id="autoVodMaxAgeHoursLabel" class="form-sublabel" for="autoVodMaxAgeHours" style="margin-left:12px;">Max. Alter (Stunden)</label> <label id="autoVodMaxAgeHoursLabel" class="form-sublabel" for="autoVodMaxAgeHours" style="margin-left:12px;">Max. Alter (Stunden)</label>
<input type="number" id="autoVodMaxAgeHours" min="1" max="720" value="24" style="width:90px;"> <input type="number" id="autoVodMaxAgeHours" min="1" max="720" value="24" class="input-narrow">
</div> </div>
<div class="form-row" style="align-items: center; gap: 12px; flex-wrap: wrap;"> <div class="form-row" style="align-items: center; gap: 12px; flex-wrap: wrap;">
<button class="btn-secondary" id="btnAutoVodScanNow" onclick="triggerManualAutoVodScan()">Jetzt scannen</button> <button class="btn-secondary" id="btnAutoVodScanNow" onclick="triggerManualAutoVodScan()">Jetzt scannen</button>

18
src/styles.css
View File

@ -2177,6 +2177,24 @@ select option {
flex: 1; flex: 1;
} }
/* Min-width sizing modifiers — let the row wrap to a new line before
the stack collapses below the named breakpoint. Replaces three inline
min-width declarations in the Auto-Cleanup 3-up row. */
.form-stack.size-sm {
min-width: 120px;
}
.form-stack.size-md {
min-width: 160px;
}
/* Compact-width input — used for the Auto-VOD poll/age inputs where
the values are 2-3 digits and a full-width input would look odd
alongside their inline sublabels. */
.input-narrow {
width: 90px;
}
/* Block-level note text — same colour as .form-sublabel but reserved /* Block-level note text — same colour as .form-sublabel but reserved
for full-row paragraphs like the cleanup report area. */ for full-row paragraphs like the cleanup report area. */
.form-note { .form-note {