josh/electric-cherry
1
0
Fork 0
Code Issues 18 Pull Requests Actions Packages Projects Releases Wiki Activity

Use shared form controls and enforce UI patterns (Refs #110)
CI / checks (push) Successful in 4m51s
Details

Browse Source
This commit is contained in:
josh
2026-10-10 00:19:48 -04:00
parent 8d1bb69591
commit cc9c10226e
54 changed files with 1431 additions and 1449 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/leaderboard/+page.svelte
+30 -33
View File
@@ -1,4 +1,7 @@
<script lang="ts">
import Field from '$ui/components/primitives/Field.svelte';
import Input from '$ui/components/primitives/Input.svelte';
import Select from '$ui/components/primitives/Select.svelte';
import RelativeTime from '$ui/components/RelativeTime.svelte';
let { data: initial }: { data: import('./$types').PageData } = $props();
import { onMount, untrack } from 'svelte';
@@ -262,9 +265,8 @@
{#snippet filterFields(suffix: string)}
<div class="filters">
<div class="field">
<label for={`leaderboard-game${suffix}`}>Game</label>
<select
<Field label="Game" forId={`leaderboard-game${suffix}`}>
<Select
id={`leaderboard-game${suffix}`}
value={game}
onchange={(event) =>
@@ -273,11 +275,10 @@
<option value="">All games</option>{#each games as item (item.key)}<option
value={item.key}>{item.label}</option
>{/each}
</select>
</div>
<div class="field">
<label for={`leaderboard-map${suffix}`}>Map</label>
<select
</Select>
</Field>
<Field label="Map" forId={`leaderboard-map${suffix}`}>
<Select
id={`leaderboard-map${suffix}`}
value={map}
onchange={(event) => updateFilters({ map: event.currentTarget.value })}
@@ -291,11 +292,10 @@
? ` · ${item.game === 't5' ? 'BO1' : 'BO2'}`
: ''}</option
>{/each}
</select>
</div>
<div class="field">
<label for={`leaderboard-players${suffix}`}>Players</label>
<select
</Select>
</Field>
<Field label="Players" forId={`leaderboard-players${suffix}`}>
<Select
id={`leaderboard-players${suffix}`}
value={players}
onchange={(event) => updateFilters({ players: event.currentTarget.value })}
@@ -304,14 +304,13 @@
<option value="">All squad sizes</option>{#each squadSizes as size}<option
value={size.key}>{size.label}</option
>{/each}
</select><span id={`players-help${suffix}`} class="sr-only"
</Select><span id={`players-help${suffix}`} class="sr-only"
>Players recorded at the start of each match. Matches with unknown starting
counts appear only under All squad sizes.</span
>
</div>
<div class="field">
<label for={`leaderboard-metric${suffix}`}>Rank by</label>
<select
</Field>
<Field label="Rank by" forId={`leaderboard-metric${suffix}`}>
<Select
id={`leaderboard-metric${suffix}`}
value={metric}
onchange={(event) => updateFilters({ metric: event.currentTarget.value })}
@@ -319,8 +318,8 @@
{#each leaderboardMetrics as item (item.key)}<option value={item.key}
>{item.label}</option
>{/each}
</select>
</div>
</Select>
</Field>
<form
class="search"
onsubmit={(event) => {
@@ -330,15 +329,16 @@
}}
role="search"
>
<label for={`leaderboard-search${suffix}`}>Find a player</label>
<input
id={`leaderboard-search${suffix}`}
type="search"
bind:value={search}
maxlength="100"
placeholder="Name or GUID"
aria-describedby={`search-help${suffix}`}
/><span id={`search-help${suffix}`} class="sr-only"
<Field label="Find a player" forId={`leaderboard-search${suffix}`}>
<Input
id={`leaderboard-search${suffix}`}
type="search"
bind:value={search}
maxlength={100}
placeholder="Name or GUID"
aria-describedby={`search-help${suffix}`}
/></Field
><span id={`search-help${suffix}`} class="sr-only"
>Press Enter to search. Player ranks are preserved.</span
>
</form>
@@ -700,7 +700,6 @@
.search {
grid-column: 1 / -1;
}
.field,
.search {
display: flex;
flex-direction: column;
@@ -712,12 +711,10 @@
font-size: var(--text-xs);
}
input,
select,
button {
font: inherit;
}
input,
select {
input {
min-height: 42px;
width: 100%;
padding: 9px 12px;
src/routes/leaderboard/players/[guid]/+page.svelte
+19 -25
View File
@@ -1,4 +1,6 @@
<script lang="ts">
import Select from '$ui/components/primitives/Select.svelte';
import Field from '$ui/components/primitives/Field.svelte';
import RelativeTime from '$ui/components/RelativeTime.svelte';
import { playerCompletionLabel } from '$ui/player-match.js';
import { onMount } from 'svelte';
@@ -389,17 +391,17 @@
description="Choose the leaderboard ranking and match history. Lifetime records stay unchanged."
>
<div class="scope-controls" aria-busy={filtering}>
<label
>Game<select
<Field label="Game">
<Select
value={scope.game}
onchange={(event) => void updateScope({ game: event.currentTarget.value, map: '' })}
><option value="">All games</option><option value="t5">Black Ops I</option><option
value="t6">Black Ops II</option
></select
></label
></Select
></Field
>
<label
>Map<select
<Field label="Map">
<Select
value={scope.map}
onchange={(event) => void updateScope({ map: event.currentTarget.value })}
><option value="">All maps</option
@@ -408,26 +410,26 @@
>{/if}{#each filteredMaps as map (`${map.game}:${map.key}`)}<option
value={map.key}
>{map.name}{!scope.game ? ` · ${gameName(map.game)}` : ''}</option
>{/each}</select
></label
>{/each}</Select
></Field
>
<label
>Players<select
<Field label="Players">
<Select
value={scope.players ?? ''}
onchange={(event) => void updateScope({ players: event.currentTarget.value })}
><option value="">All squad sizes</option><option value="1">Solo</option><option
value="2">Duo</option
><option value="3">Trio</option><option value="4">Four players</option></select
></label
><option value="3">Trio</option><option value="4">Four players</option></Select
></Field
>
<label
>Rank by<select
<Field label="Rank by">
<Select
value={scope.metric}
onchange={(event) => void updateScope({ metric: event.currentTarget.value })}
>{#each leaderboardMetrics as metric}<option value={metric.key}
>{metric.label}</option
>{/each}</select
></label
>{/each}</Select
></Field
>
</div>
{#snippet actions()}<Button onclick={() => (filterOpen = false)}>Done</Button>{/snippet}
@@ -608,15 +610,7 @@
display: grid;
gap: var(--space-4);
}
.scope-controls label {
display: grid;
gap: var(--space-2);
color: var(--text-secondary);
font-size: var(--text-sm);
}
.scope-controls select {
width: 100%;
}
.mobile-records {
display: none;
}