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); width: 100%; font-family: var(--font);
transition: border-color var(--transition); transition: border-color var(--transition);
} }
input[type="checkbox"] { width: auto; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-accent); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-accent); }
input::placeholder { color: var(--c-muted); } 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 */
.search-bar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; } .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> <label for="s-note-label">Note Field Label</label>
<input id="s-note-label" bind:value={noteLabel} placeholder="Additional note" /> <input id="s-note-label" bind:value={noteLabel} placeholder="Additional note" />
</div> </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} /> <input type="checkbox" bind:checked={noteRequired} />
Note field is required Note field is required
</label> </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> <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"> <div style="display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.35rem">
{#each availableRoles as r} {#each availableRoles as r}
<label style="display:flex;align-items:center;gap:0.35rem;cursor:pointer;font-size:0.875rem;color:var(--c-text)"> <label class="checkbox-label">
<input type="checkbox" style="width:auto" <input type="checkbox"
checked={newRoles.includes(r)} checked={newRoles.includes(r)}
onchange={() => newRoles = toggleItem(r, newRoles)} /> onchange={() => newRoles = toggleItem(r, newRoles)} />
{roleLabel(r)} {roleLabel(r)}
@ -181,8 +181,8 @@
<span style="font-size:0.82rem;color:var(--c-muted);font-weight:500">Departments</span> <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"> <div style="display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.35rem">
{#each $allDepts ?? [] as d} {#each $allDepts ?? [] as d}
<label style="display:flex;align-items:center;gap:0.35rem;cursor:pointer;font-size:0.875rem;color:var(--c-text)"> <label class="checkbox-label">
<input type="checkbox" style="width:auto" <input type="checkbox"
checked={newDeptIDs.includes(d.id)} checked={newDeptIDs.includes(d.id)}
onchange={() => newDeptIDs = toggleItem(d.id, newDeptIDs)} /> onchange={() => newDeptIDs = toggleItem(d.id, newDeptIDs)} />
<span class="dept-dot" style="background:{d.color}"></span> <span class="dept-dot" style="background:{d.color}"></span>
@ -228,8 +228,8 @@
<td> <td>
<div style="display:flex;flex-wrap:wrap;gap:0.4rem"> <div style="display:flex;flex-wrap:wrap;gap:0.4rem">
{#each availableRoles as r} {#each availableRoles as r}
<label style="display:flex;align-items:center;gap:0.3rem;cursor:pointer;font-size:0.82rem;color:var(--c-text)"> <label class="checkbox-label-sm">
<input type="checkbox" style="width:auto" <input type="checkbox"
checked={editRoles.includes(r)} checked={editRoles.includes(r)}
onchange={() => editRoles = toggleItem(r, editRoles)} /> onchange={() => editRoles = toggleItem(r, editRoles)} />
{roleLabel(r)} {roleLabel(r)}
@ -241,8 +241,8 @@
{#if ($allDepts ?? []).length > 0} {#if ($allDepts ?? []).length > 0}
<div style="display:flex;flex-wrap:wrap;gap:0.4rem"> <div style="display:flex;flex-wrap:wrap;gap:0.4rem">
{#each $allDepts ?? [] as d} {#each $allDepts ?? [] as d}
<label style="display:flex;align-items:center;gap:0.3rem;cursor:pointer;font-size:0.82rem;color:var(--c-text)"> <label class="checkbox-label-sm">
<input type="checkbox" style="width:auto" <input type="checkbox"
checked={editDeptIDs.includes(d.id)} checked={editDeptIDs.includes(d.id)}
onchange={() => editDeptIDs = toggleItem(d.id, editDeptIDs)} /> onchange={() => editDeptIDs = toggleItem(d.id, editDeptIDs)} />
{d.name} {d.name}

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

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