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 Select from '$ui/components/primitives/Select.svelte';
|
||||
import Input from '$ui/components/primitives/Input.svelte';
|
||||
import Field from '$ui/components/primitives/Field.svelte';
|
||||
import RelativeTime from '$ui/components/RelativeTime.svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { contextHref } from '$lib/navigation-context.js';
|
||||
@@ -158,8 +161,8 @@
|
||||
ariaLabel="Beta views"
|
||||
/>
|
||||
</div>
|
||||
<label class="search"
|
||||
>Search<input
|
||||
<Field class="search" label="Search">
|
||||
<Input
|
||||
type="search"
|
||||
bind:value={search}
|
||||
oninput={() => {
|
||||
@@ -167,11 +170,11 @@
|
||||
saveContext();
|
||||
}}
|
||||
placeholder="Name, beta number, file, or server"
|
||||
maxlength="200"
|
||||
/></label
|
||||
maxlength={200}
|
||||
/></Field
|
||||
>
|
||||
<label
|
||||
>Status<select
|
||||
<Field label="Status">
|
||||
<Select
|
||||
bind:value={status}
|
||||
onchange={() => {
|
||||
pageNumber = 1;
|
||||
@@ -187,7 +190,7 @@
|
||||
{:else}<option value="promoted">Promoted</option><option value="rolled-back"
|
||||
>Rolled back</option
|
||||
>{/if}
|
||||
</select></label
|
||||
</Select></Field
|
||||
>
|
||||
{#if betas.length && (search || status)}<Button
|
||||
variant="ghost"
|
||||
@@ -320,27 +323,12 @@
|
||||
align-self: flex-end;
|
||||
max-width: 100%;
|
||||
}
|
||||
label {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.search {
|
||||
|
||||
.toolbar :global(.search) {
|
||||
flex: 1;
|
||||
min-width: 240px;
|
||||
}
|
||||
input,
|
||||
select {
|
||||
padding: 10px 12px;
|
||||
min-height: 40px;
|
||||
background: var(--surface-sunken);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-control);
|
||||
border-radius: var(--radius-sm);
|
||||
font: inherit;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.table-scroll {
|
||||
overflow-x: auto;
|
||||
}
|
||||
@@ -444,7 +432,7 @@
|
||||
td {
|
||||
padding: 12px 8px;
|
||||
}
|
||||
.search {
|
||||
.toolbar :global(.search) {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.pagination {
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
<script lang="ts">
|
||||
import Select from '$ui/components/primitives/Select.svelte';
|
||||
import Input from '$ui/components/primitives/Input.svelte';
|
||||
import Field from '$ui/components/primitives/Field.svelte';
|
||||
import { countLabel } from '$ui/plural.js';
|
||||
import { page } from '$app/stores';
|
||||
import { contextHref, safeReturnHref } from '$lib/navigation-context.js';
|
||||
@@ -667,29 +670,30 @@
|
||||
<form onsubmit={openBeta} class="beta-form">
|
||||
<h2 bind:this={stepHeading} tabindex="-1">{steps[step]}</h2>
|
||||
{#if step === 0}
|
||||
<label
|
||||
>Beta label (optional)<input
|
||||
<Field label="Beta label (optional)">
|
||||
<Input
|
||||
bind:value={betaLabel}
|
||||
maxlength="120"
|
||||
maxlength={120}
|
||||
placeholder="For example, Town balance update"
|
||||
/><span class="muted"
|
||||
>Shown in the beta list so others can identify this test.</span
|
||||
></label
|
||||
></Field
|
||||
>
|
||||
<div class="picks">
|
||||
{#each picks as pick, index (pick.key)}<section class="pick-row">
|
||||
<label
|
||||
>File {index + 1}<select
|
||||
<Field
|
||||
>{#snippet label()}File {index + 1}{/snippet}
|
||||
<Select
|
||||
bind:value={pick.scriptId}
|
||||
onchange={() => onPickFile(index)}
|
||||
><option value={null}>Choose a file</option
|
||||
>{#each eligibleFor(index) as file}<option value={file.id}
|
||||
>[{file.kind}] {file.name}</option
|
||||
>{/each}</select
|
||||
></label
|
||||
>{/each}</Select
|
||||
></Field
|
||||
>
|
||||
<label
|
||||
>Exact version<select
|
||||
<Field label="Exact version">
|
||||
<Select
|
||||
bind:value={pick.versionId}
|
||||
disabled={pick.scriptId === null ||
|
||||
loadingVersions.has(pick.key)}
|
||||
@@ -702,8 +706,8 @@
|
||||
0,
|
||||
8
|
||||
)} · {version.state.replaceAll('-', ' ')}</option
|
||||
>{/each}</select
|
||||
></label
|
||||
>{/each}</Select
|
||||
></Field
|
||||
>
|
||||
<Button
|
||||
ariaLabel={`Remove file ${index + 1}`}
|
||||
@@ -742,8 +746,8 @@
|
||||
At launch, Electric Cherry chooses compatible servers with the fewest
|
||||
current players. Every requested instance must pass the test plan.
|
||||
</p>
|
||||
<label class="instance-count"
|
||||
>Instances per game<input
|
||||
<Field class="instance-count" label="Instances per game">
|
||||
<Input
|
||||
type="number"
|
||||
min="1"
|
||||
max="1000"
|
||||
@@ -756,7 +760,7 @@
|
||||
: event.currentTarget.valueAsNumber)}
|
||||
/><span class="muted"
|
||||
>The same number applies to every game in this beta.</span
|
||||
></label
|
||||
></Field
|
||||
>
|
||||
<p class="muted">
|
||||
{applicableGames
|
||||
@@ -812,14 +816,14 @@
|
||||
</fieldset>
|
||||
{#if selectionMode === 'manual' && candidateServers.length}
|
||||
<div class="filters">
|
||||
<label
|
||||
>Find servers<input
|
||||
<Field label="Find servers">
|
||||
<Input
|
||||
type="search"
|
||||
bind:value={search}
|
||||
placeholder="Name, map, lobby…"
|
||||
/></label
|
||||
><label
|
||||
>Game<select bind:value={serverGame}
|
||||
/></Field
|
||||
><Field label="Game">
|
||||
<Select bind:value={serverGame}
|
||||
><option value="">All games</option
|
||||
>{#each [...new Set(fleetServers
|
||||
.map((s) => s.game)
|
||||
@@ -829,16 +833,16 @@
|
||||
: game === 't6'
|
||||
? 'Black Ops II'
|
||||
: game}</option
|
||||
>{/each}</select
|
||||
></label
|
||||
><label
|
||||
>Availability<select bind:value={availability}
|
||||
>{/each}</Select
|
||||
></Field
|
||||
><Field label="Availability">
|
||||
<Select bind:value={availability}
|
||||
><option value="">All servers</option><option value="empty"
|
||||
>Confirmed empty</option
|
||||
><option value="occupied">Occupied</option><option
|
||||
value="unknown">Unknown / stale / offline</option
|
||||
></select
|
||||
></label
|
||||
></Select
|
||||
></Field
|
||||
>
|
||||
</div>
|
||||
<div class="actions">
|
||||
@@ -999,8 +1003,7 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.beta-form input:not([type='checkbox']):not([type='radio']),
|
||||
.beta-form select {
|
||||
.beta-form input:not([type='checkbox']):not([type='radio']) {
|
||||
border-color: var(--border-control);
|
||||
}
|
||||
.page,
|
||||
@@ -1081,8 +1084,7 @@
|
||||
color: var(--text-secondary);
|
||||
min-width: 0;
|
||||
}
|
||||
input:not([type='checkbox']):not([type='radio']),
|
||||
select {
|
||||
input:not([type='checkbox']):not([type='radio']) {
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
padding: 9px 12px;
|
||||
@@ -1108,7 +1110,7 @@
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
.instance-count {
|
||||
.automatic-selection :global(.instance-count) {
|
||||
max-width: 400px;
|
||||
}
|
||||
.advanced-selection {
|
||||
@@ -1148,7 +1150,8 @@
|
||||
.filters {
|
||||
align-items: end;
|
||||
}
|
||||
.filters label {
|
||||
|
||||
.filters :global(.field) {
|
||||
flex: 1 1 180px;
|
||||
}
|
||||
.draft-status,
|
||||
@@ -1217,7 +1220,8 @@
|
||||
.pick-row {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
}
|
||||
.pick-row label:first-child {
|
||||
|
||||
.pick-row > :global(.field:first-child) {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
.steps {
|
||||
|
||||
Reference in New Issue
Block a user