Skip to content

Commit 5f1f48f

Browse files
willuhmjswilluhmjs
committed
Fix completed section alignment, select styling, and button consistency
- Group completed header into left (title + select button) and right (filters + dropdowns) with space-between layout - Style the Select button as a channel-dropdown-trigger with active state - Add appearance: none to all select elements globally with custom chevron arrow, consistent bg/border, and styled option backgrounds - Fix section-header-right items grouping tightly instead of spreading
1 parent 9ea1373 commit 5f1f48f

3 files changed

Lines changed: 114 additions & 76 deletions

File tree

‎src/app.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,21 @@ select {
195195
transition: all var(--transition-fast);
196196
}
197197

198+
select {
199+
appearance: none;
200+
-webkit-appearance: none;
201+
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23a0a0a0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
202+
background-repeat: no-repeat;
203+
background-position: right var(--spacing-md) center;
204+
padding-right: calc(var(--spacing-md) + 20px);
205+
cursor: pointer;
206+
}
207+
208+
select option {
209+
background: var(--bg-tertiary);
210+
color: var(--text-primary);
211+
}
212+
198213
input:focus,
199214
textarea:focus,
200215
select:focus {

‎src/routes/+page.svelte‎

Lines changed: 98 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -791,94 +791,96 @@
791791

792792
<div class="section">
793793
<div class="section-header">
794-
<h2>Completed ({filteredCompletedDownloads.length})</h2>
795-
<button
796-
class="btn btn-sm"
797-
class:btn-primary={selectionMode}
798-
class:btn-secondary={!selectionMode}
799-
onclick={() => { if (selectionMode) exitSelectionMode(); else selectionMode = true; }}
800-
>
801-
{selectionMode ? 'Cancel' : 'Select'}
802-
</button>
803-
<div class="tabs completed-filter">
794+
<div class="section-header-left">
795+
<h2>Completed ({filteredCompletedDownloads.length})</h2>
804796
<button
805-
class="tab"
806-
class:active={completedFilter === 'all'}
807-
onclick={() => (completedFilter = 'all')}
808-
>
809-
All
810-
</button>
811-
<button
812-
class="tab"
813-
class:active={completedFilter === 'cache'}
814-
onclick={() => (completedFilter = 'cache')}
815-
>
816-
Cache
817-
</button>
818-
<button
819-
class="tab"
820-
class:active={completedFilter === 'library'}
821-
onclick={() => (completedFilter = 'library')}
797+
class="channel-dropdown-trigger"
798+
class:active={selectionMode}
799+
onclick={() => { if (selectionMode) exitSelectionMode(); else selectionMode = true; }}
822800
>
823-
Library
801+
{selectionMode ? 'Cancel' : 'Select'}
824802
</button>
825803
</div>
826-
{#if availableChannels.length > 1}
827-
<!-- svelte-ignore a11y_no_static_element_interactions -->
828-
<div
829-
class="channel-dropdown"
830-
onkeydown={(e) => { if (e.key === 'Escape') channelDropdownOpen = false; }}
831-
>
804+
<div class="section-header-right">
805+
<div class="tabs completed-filter">
832806
<button
833-
class="channel-dropdown-trigger"
834-
onclick={() => { channelDropdownOpen = !channelDropdownOpen; channelSearch = ''; }}
807+
class="tab"
808+
class:active={completedFilter === 'all'}
809+
onclick={() => (completedFilter = 'all')}
835810
>
836-
<span class="channel-dropdown-label">{channelFilter === 'all' ? 'All channels' : channelFilter}</span>
837-
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="channel-dropdown-chevron" class:open={channelDropdownOpen}>
838-
<path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
839-
</svg>
811+
All
840812
</button>
841-
{#if channelDropdownOpen}
842-
<div class="channel-dropdown-menu">
843-
<input
844-
type="text"
845-
class="channel-dropdown-search"
846-
placeholder="Search channels..."
847-
bind:value={channelSearch}
848-
autofocus
849-
/>
850-
<div class="channel-dropdown-options">
851-
<button
852-
class="channel-dropdown-option"
853-
class:selected={channelFilter === 'all'}
854-
onclick={() => { channelFilter = 'all'; channelDropdownOpen = false; }}
855-
>
856-
All channels
857-
</button>
858-
{#each filteredChannelOptions as channel}
813+
<button
814+
class="tab"
815+
class:active={completedFilter === 'cache'}
816+
onclick={() => (completedFilter = 'cache')}
817+
>
818+
Cache
819+
</button>
820+
<button
821+
class="tab"
822+
class:active={completedFilter === 'library'}
823+
onclick={() => (completedFilter = 'library')}
824+
>
825+
Library
826+
</button>
827+
</div>
828+
{#if availableChannels.length > 1}
829+
<!-- svelte-ignore a11y_no_static_element_interactions -->
830+
<div
831+
class="channel-dropdown"
832+
onkeydown={(e) => { if (e.key === 'Escape') channelDropdownOpen = false; }}
833+
>
834+
<button
835+
class="channel-dropdown-trigger"
836+
onclick={() => { channelDropdownOpen = !channelDropdownOpen; channelSearch = ''; }}
837+
>
838+
<span class="channel-dropdown-label">{channelFilter === 'all' ? 'All channels' : channelFilter}</span>
839+
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="channel-dropdown-chevron" class:open={channelDropdownOpen}>
840+
<path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
841+
</svg>
842+
</button>
843+
{#if channelDropdownOpen}
844+
<div class="channel-dropdown-menu">
845+
<input
846+
type="text"
847+
class="channel-dropdown-search"
848+
placeholder="Search channels..."
849+
bind:value={channelSearch}
850+
autofocus
851+
/>
852+
<div class="channel-dropdown-options">
859853
<button
860854
class="channel-dropdown-option"
861-
class:selected={channelFilter === channel}
862-
onclick={() => { channelFilter = channel; channelDropdownOpen = false; }}
855+
class:selected={channelFilter === 'all'}
856+
onclick={() => { channelFilter = 'all'; channelDropdownOpen = false; }}
863857
>
864-
{channel}
858+
All channels
865859
</button>
866-
{/each}
867-
{#if filteredChannelOptions.length === 0}
868-
<div class="channel-dropdown-empty">No channels found</div>
869-
{/if}
860+
{#each filteredChannelOptions as channel}
861+
<button
862+
class="channel-dropdown-option"
863+
class:selected={channelFilter === channel}
864+
onclick={() => { channelFilter = channel; channelDropdownOpen = false; }}
865+
>
866+
{channel}
867+
</button>
868+
{/each}
869+
{#if filteredChannelOptions.length === 0}
870+
<div class="channel-dropdown-empty">No channels found</div>
871+
{/if}
872+
</div>
870873
</div>
871-
</div>
872-
<!-- svelte-ignore a11y_no_static_element_interactions -->
873-
<div class="channel-dropdown-backdrop" onclick={() => (channelDropdownOpen = false)}></div>
874-
{/if}
875-
</div>
876-
{/if}
877-
<!-- svelte-ignore a11y_no_static_element_interactions -->
878-
<div
879-
class="sort-dropdown"
880-
onkeydown={(e) => { if (e.key === 'Escape') sortDropdownOpen = false; }}
881-
>
874+
<!-- svelte-ignore a11y_no_static_element_interactions -->
875+
<div class="channel-dropdown-backdrop" onclick={() => (channelDropdownOpen = false)}></div>
876+
{/if}
877+
</div>
878+
{/if}
879+
<!-- svelte-ignore a11y_no_static_element_interactions -->
880+
<div
881+
class="sort-dropdown"
882+
onkeydown={(e) => { if (e.key === 'Escape') sortDropdownOpen = false; }}
883+
>
882884
<button
883885
class="channel-dropdown-trigger"
884886
onclick={() => (sortDropdownOpen = !sortDropdownOpen)}
@@ -911,6 +913,7 @@
911913
<div class="channel-dropdown-backdrop" onclick={() => (sortDropdownOpen = false)}></div>
912914
{/if}
913915
</div>
916+
</div>
914917
</div>
915918
<div class="completed-search">
916919
<svg class="search-icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
@@ -1525,6 +1528,19 @@
15251528
align-items: center;
15261529
gap: var(--spacing-md);
15271530
margin-bottom: var(--spacing-lg);
1531+
flex-wrap: wrap;
1532+
}
1533+
1534+
.section-header-left {
1535+
display: flex;
1536+
align-items: center;
1537+
gap: var(--spacing-sm);
1538+
}
1539+
1540+
.section-header-right {
1541+
display: flex;
1542+
align-items: center;
1543+
gap: var(--spacing-sm);
15281544
}
15291545
15301546
.section-header h2 {
@@ -1565,6 +1581,12 @@
15651581
border-color: rgba(255, 255, 255, 0.2);
15661582
}
15671583
1584+
.channel-dropdown-trigger.active {
1585+
background: var(--accent-primary);
1586+
border-color: var(--accent-primary);
1587+
color: #fff;
1588+
}
1589+
15681590
.channel-dropdown-chevron {
15691591
transition: transform 0.15s;
15701592
}

‎src/routes/settings/+page.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -898,6 +898,7 @@
898898
select {
899899
width: 100%;
900900
padding: var(--spacing-md);
901+
padding-right: calc(var(--spacing-md) + 20px);
901902
background: var(--bg-tertiary);
902903
border: 1px solid rgba(255, 255, 255, 0.1);
903904
border-radius: var(--border-radius-md);

0 commit comments

Comments
 (0)