Use shared form controls and enforce UI patterns (Refs #110)
CI / checks (push) Successful in 4m51s
CI / checks (push) Successful in 4m51s
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user