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

cleanup: .form-row.search-bar + .select-compact.size-md modifiers

Browse Source 
The Archive-search tool-row carried two inline-style attrs:
- .form-row with gap:8px; margin-bottom:8px; flex-wrap:wrap; align-items:center (different rhythm from the existing .aligned / .section-header form-row modifiers — tool-row that should wrap on narrow widths)
- archiveSearchStreamer .select-compact with min-width:160px (matches the existing .form-stack.size-md width)

Extracted into two modifier classes:
- .form-row.search-bar — the search/filter tool-row pattern (search input + filter selects + go button collapse gracefully)
- .select-compact.size-md — wider select variant, mirrors the .form-stack.size-md pattern from 4.6.95 so width modifiers across element types share the same naming

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

4
src/index.html
View File

@ -455,14 +455,14 @@
<div class="settings-card">
<h3 id="archiveTitle">Archiv durchsuchen</h3>
<p id="archiveIntro" class="card-intro">Suche nach Dateinamen, Streamern oder Datum-Strings. Treffer zeigen Recordings (Live + VOD); zugehoerige Chat- und Events-Dateien werden als Companion-Buttons angeboten.</p>
<div class="form-row" style="gap:8px; margin-bottom: 8px; flex-wrap: wrap; align-items:center;">
<div class="form-row search-bar">
<input type="text" id="archiveSearchQuery" class="filter-input flex-1-1-240" placeholder="Suche...">
<select id="archiveSearchType" class="select-compact">
<option value="all">Alle Typen</option>
<option value="live">Live-Aufnahmen</option>
<option value="vod">VOD-Downloads</option>
</select>
<select id="archiveSearchStreamer" class="select-compact" style="min-width: 160px;">
<select id="archiveSearchStreamer" class="select-compact size-md">
<option value="">Alle Streamer</option>
</select>
<select id="archiveSearchSort" class="select-compact">

17
src/styles.css
View File

@ -849,6 +849,13 @@ select option {
font-size: 13px;
}
/* Wider variant — used for the Archive-search streamer-name select
where short streamer names would collapse the dropdown to an
unhelpful 80-100px otherwise. Matches the .form-stack.size-md width. */
.select-compact.size-md {
min-width: 160px;
}
/* Queue Section */
.queue-section {
border-top: 1px solid rgba(255,255,255,0.1);
@ -1858,6 +1865,16 @@ select option {
margin-bottom: 10px;
}
/* Search/filter tool-row variant — wraps on narrow widths so the
select / input cluster collapses gracefully. Used by the Archive
search row (input + 3 selects + button). */
.form-row.search-bar {
gap: 8px;
margin-bottom: 8px;
flex-wrap: wrap;
align-items: center;
}
.log-panel {
background: #11151c;
border: 1px solid rgba(255,255,255,0.12);