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

This commit is contained in:
2026-10-10 00:19:48 -04:00
parent 8d1bb69591
commit cc9c10226e
54 changed files with 1431 additions and 1449 deletions
+28 -40
View File
@@ -1,4 +1,7 @@
<script lang="ts">
import Input from '$ui/components/primitives/Input.svelte';
import Select from '$ui/components/primitives/Select.svelte';
import Field from '$ui/components/primitives/Field.svelte';
import { onMount } from 'svelte';
import { page } from '$app/state';
import { confirmAction } from '$ui/confirm.js';
@@ -215,8 +218,8 @@
>
<fieldset disabled={busy}>
<div class="fields">
<label
>Game<select
<Field label="Game">
<Select
bind:value={settings.game}
disabled={!!editing}
onchange={() => {
@@ -225,60 +228,60 @@
}}
><option value="t5">Black Ops I</option><option value="t6"
>Black Ops II</option
></select
></label
></Select
></Field
>
<label
>Scope<select bind:value={settings.mapSlug} disabled={!!editing}
<Field label="Scope">
<Select bind:value={settings.mapSlug} disabled={!!editing}
><option value="*">Every map in this game</option
>{#each zombieMaps(settings.game) as map}<option value={map.slug}
>{map.friendly}</option
>{/each}</select
></label
>{/each}</Select
></Field
>
<label
>Autoscaling<select bind:value={settings.mode}
<Field label="Autoscaling">
<Select bind:value={settings.mode}
><option value="off">Off</option
>{#if report.removalAvailable}<option value="create-destroy"
>On</option
>{/if}</select
></label
>{/if}</Select
></Field
>
<label
>Minimum running lobbies<input
<Field label="Minimum running lobbies">
<Input
type="number"
min="1"
max="20"
required
bind:value={settings.minimum}
/></label
/></Field
>
<label
>Maximum lobbies<input
<Field label="Maximum lobbies">
<Input
type="number"
min="1"
max="20"
required
bind:value={settings.maximum}
/></label
/></Field
>
<label
>Empty spare target<input
<Field label="Empty spare target">
<Input
type="number"
min="1"
max="20"
required
bind:value={settings.spares}
/></label
/></Field
>
<label
>Empty duration in minutes<input
<Field label="Empty duration in minutes">
<Input
type="number"
min="1"
max="1440"
required
bind:value={settings.emptyMinutes}
/></label
/></Field
>
</div>
{#if settings.mapSlug === '*'}<p>
@@ -356,22 +359,7 @@
gap: 16px;
margin-bottom: 20px;
}
label {
display: flex;
flex-direction: column;
gap: 8px;
font-size: var(--text-sm);
}
input,
select {
padding: 10px;
min-width: 0;
color: var(--text-primary);
background: var(--surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
font: inherit;
}
fieldset {
border: 0;
padding: 0;