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,6 @@
|
||||
<script lang="ts">
|
||||
import Input from '$ui/components/primitives/Input.svelte';
|
||||
import Field from '$ui/components/primitives/Field.svelte';
|
||||
import { timeFormat } from '$ui/stores/time-zone.js';
|
||||
import RelativeTime from '$ui/components/RelativeTime.svelte';
|
||||
import Breadcrumbs from '$ui/components/primitives/Breadcrumbs.svelte';
|
||||
@@ -468,11 +470,8 @@
|
||||
}}
|
||||
>
|
||||
<fieldset disabled={busy || cleaning}>
|
||||
<label
|
||||
>Plutainer image<input
|
||||
required
|
||||
bind:value={runtimeImage}
|
||||
/></label
|
||||
<Field label="Plutainer image">
|
||||
<Input required bind:value={runtimeImage} /></Field
|
||||
><Button type="submit" disabled={busy || !host.connected}
|
||||
>Pull runtime image</Button
|
||||
>
|
||||
@@ -509,50 +508,43 @@
|
||||
<h2>Host configuration</h2>
|
||||
{#if canManage}<form onsubmit={save}>
|
||||
<fieldset disabled={busy || cleaning}>
|
||||
<label
|
||||
>Friendly name<input
|
||||
required
|
||||
maxlength="200"
|
||||
bind:value={name}
|
||||
/></label
|
||||
<Field label="Friendly name">
|
||||
<Input required maxlength={200} bind:value={name} /></Field
|
||||
>
|
||||
<div class="fields">
|
||||
<label
|
||||
>First game port<input
|
||||
<Field label="First game port">
|
||||
<Input
|
||||
type="number"
|
||||
min="1"
|
||||
max="65535"
|
||||
required
|
||||
bind:value={portMin}
|
||||
/></label
|
||||
><label
|
||||
>Last game port<input
|
||||
/></Field
|
||||
><Field label="Last game port">
|
||||
<Input
|
||||
type="number"
|
||||
min={portMin}
|
||||
max="65535"
|
||||
required
|
||||
bind:value={portMax}
|
||||
/></label
|
||||
/></Field
|
||||
>
|
||||
</div>
|
||||
<label
|
||||
>Local bind address<input
|
||||
required
|
||||
bind:value={bindAddress}
|
||||
/></label
|
||||
><label
|
||||
>Public / NAT address<input
|
||||
<Field label="Local bind address">
|
||||
<Input required bind:value={bindAddress} /></Field
|
||||
><Field label="Public / NAT address">
|
||||
<Input
|
||||
bind:value={publicAddress}
|
||||
placeholder="Optional public hostname or address"
|
||||
/></label
|
||||
><label
|
||||
>Minimum free game storage (GiB)<input
|
||||
/></Field
|
||||
><Field label="Minimum free game storage (GiB)">
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.1"
|
||||
required
|
||||
bind:value={minimumFreeGB}
|
||||
/></label
|
||||
/></Field
|
||||
><Button type="submit" disabled={busy}>Save settings</Button>
|
||||
</fieldset>
|
||||
</form>{:else}<dl>
|
||||
@@ -745,20 +737,7 @@
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
label {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 10px;
|
||||
color: var(--text-primary);
|
||||
background: var(--surface-sunken);
|
||||
border: 1px solid var(--border-control);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.fields > * {
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
|
||||
Reference in New Issue
Block a user