pen/Turnpike
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Revised form styles.

Browse source
This commit is contained in:
Pen Anderson 2026-03-11 09:33:52 -05:00
parent dc08723500
commit faa359751d
4 changed files with 16 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/app.css
View file

@ -103,8 +103,11 @@ input, select, textarea {
width: 100%; font-family: var(--font);
transition: border-color var(--transition);
}
input[type="checkbox"] { width: auto; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-accent); }
input::placeholder { color: var(--c-muted); }
.checkbox-label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; }
.checkbox-label-sm { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; cursor: pointer; color: var(--c-text); }
/* Search */
.search-bar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }

2
frontend/src/pages/Settings.svelte
View file

@ -294,7 +294,7 @@
<label for="s-note-label">Note Field Label</label>
<input id="s-note-label" bind:value={noteLabel} placeholder="Additional note" />
</div>
<label style="display:inline-flex;align-items:center;gap:0.5rem;font-size:0.875rem;cursor:pointer">
<label class="checkbox-label">
<input type="checkbox" bind:checked={noteRequired} />
Note field is required
</label>

16
frontend/src/pages/Users.svelte
View file

@ -167,8 +167,8 @@
<span style="font-size:0.82rem;color:var(--c-muted);font-weight:500">Roles</span>
<div style="display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.35rem">
{#each availableRoles as r}
<label style="display:flex;align-items:center;gap:0.35rem;cursor:pointer;font-size:0.875rem;color:var(--c-text)">
<input type="checkbox" style="width:auto"
<label class="checkbox-label">
<input type="checkbox"
checked={newRoles.includes(r)}
onchange={() => newRoles = toggleItem(r, newRoles)} />
{roleLabel(r)}
@ -181,8 +181,8 @@
<span style="font-size:0.82rem;color:var(--c-muted);font-weight:500">Departments</span>
<div style="display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.35rem">
{#each $allDepts ?? [] as d}
<label style="display:flex;align-items:center;gap:0.35rem;cursor:pointer;font-size:0.875rem;color:var(--c-text)">
<input type="checkbox" style="width:auto"
<label class="checkbox-label">
<input type="checkbox"
checked={newDeptIDs.includes(d.id)}
onchange={() => newDeptIDs = toggleItem(d.id, newDeptIDs)} />
<span class="dept-dot" style="background:{d.color}"></span>
@ -228,8 +228,8 @@
<td>
<div style="display:flex;flex-wrap:wrap;gap:0.4rem">
{#each availableRoles as r}
<label style="display:flex;align-items:center;gap:0.3rem;cursor:pointer;font-size:0.82rem;color:var(--c-text)">
<input type="checkbox" style="width:auto"
<label class="checkbox-label-sm">
<input type="checkbox"
checked={editRoles.includes(r)}
onchange={() => editRoles = toggleItem(r, editRoles)} />
{roleLabel(r)}
@ -241,8 +241,8 @@
{#if ($allDepts ?? []).length > 0}
<div style="display:flex;flex-wrap:wrap;gap:0.4rem">
{#each $allDepts ?? [] as d}
<label style="display:flex;align-items:center;gap:0.3rem;cursor:pointer;font-size:0.82rem;color:var(--c-text)">
<input type="checkbox" style="width:auto"
<label class="checkbox-label-sm">
<input type="checkbox"
checked={editDeptIDs.includes(d.id)}
onchange={() => editDeptIDs = toggleItem(d.id, editDeptIDs)} />
{d.name}

8
frontend/src/pages/Volunteers.svelte
View file

@ -209,8 +209,8 @@
<input id="v-note" bind:value={newNote} placeholder="Optional note" />
</div>
<div style="margin-bottom:1rem">
<label style="display:flex;align-items:center;gap:0.5rem;cursor:pointer">
<input type="checkbox" style="width:auto" bind:checked={newIsLead} />
<label class="checkbox-label">
<input type="checkbox" bind:checked={newIsLead} />
Department lead
</label>
</div>
@ -281,8 +281,8 @@
</select>
</td>
<td class="td-edit-checks">
<label style="display:flex;align-items:center;gap:0.4rem;cursor:pointer;white-space:nowrap">
<input type="checkbox" style="width:auto" bind:checked={editIsLead} /> Co-Lead
<label class="checkbox-label-sm" style="white-space:nowrap">
<input type="checkbox" bind:checked={editIsLead} /> Co-Lead
</label>
</td>
<td class="td-edit-note">