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

Refactored inline styles.

Browse source
This commit is contained in:
Pen Anderson 2026-03-11 10:04:30 -05:00
parent faa359751d
commit 374316944e
7 changed files with 42 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/app.css
View file

@ -66,6 +66,9 @@ a:hover { color: var(--c-accent-h); }
/* Cards */ /* Cards */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 1.25rem; } .card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 1.25rem; }
.card + .card, .card + form, form + .card, form + form { margin-top: 1.5rem; }
.card-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 1rem; }
.card-hint { font-size: 0.78rem; color: var(--c-muted); }
/* Stats */ /* Stats */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
@ -106,6 +109,8 @@ input, select, textarea {
input[type="checkbox"] { width: auto; } 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); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid .full { grid-column: 1 / -1; }
.checkbox-label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; } .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); } .checkbox-label-sm { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; cursor: pointer; color: var(--c-text); }
@ -131,6 +136,7 @@ tr:hover td { background: rgba(255,255,255,0.02); }
padding: 0.18rem 0.55rem; border-radius: 99px; padding: 0.18rem 0.55rem; border-radius: 99px;
font-size: 0.72rem; font-weight: 600; font-size: 0.72rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em; text-transform: uppercase; letter-spacing: 0.04em;
margin-left: 0.3rem;
} }
.badge-checked { background: rgba(34,197,94,0.15); color: var(--c-success); } .badge-checked { background: rgba(34,197,94,0.15); color: var(--c-success); }
.badge-confirmed { background: rgba(99,102,241,0.15); color: var(--c-accent-h); } .badge-confirmed { background: rgba(99,102,241,0.15); color: var(--c-accent-h); }

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

@ -160,7 +160,7 @@
<p class="text-muted" style="font-size:0.85rem;margin-top:2rem"> <p class="text-muted" style="font-size:0.85rem;margin-top:2rem">
Welcome, <strong style="color:var(--c-text)">{session?.user?.preferred_name}</strong> Welcome, <strong style="color:var(--c-text)">{session?.user?.preferred_name}</strong>
· {#each roles as r}<span class="badge badge-role" style="margin-right:0.25rem">{r}</span>{/each} · {#each roles as r}<span class="badge badge-role">{r}</span>{/each}
</p> </p>
</div> </div>

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

@ -248,7 +248,7 @@
{#if showAdd && canManage} {#if showAdd && canManage}
<div class="card" style="margin-bottom:1.5rem"> <div class="card" style="margin-bottom:1.5rem">
<form onsubmit={addParticipant}> <form onsubmit={addParticipant}>
<div class="form-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem"> <div class="form-grid">
<div class="form-group"> <div class="form-group">
<label for="p-name">Preferred Name</label> <label for="p-name">Preferred Name</label>
<input id="p-name" bind:value={newName} placeholder="Preferred name" /> <input id="p-name" bind:value={newName} placeholder="Preferred name" />

4
frontend/src/pages/ScheduleBoard.svelte
View file

@ -275,7 +275,7 @@
{#if showAdd && canManage} {#if showAdd && canManage}
<div class="card" style="margin-bottom:1.5rem"> <div class="card" style="margin-bottom:1.5rem">
<form onsubmit={addShift}> <form onsubmit={addShift}>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem"> <div class="form-grid">
<div class="form-group"> <div class="form-group">
<label for="s-dept">Department *</label> <label for="s-dept">Department *</label>
<select id="s-dept" bind:value={newDeptID} required> <select id="s-dept" bind:value={newDeptID} required>
@ -380,7 +380,7 @@
<span class="board-cap">{assigned.length}</span> <span class="board-cap">{assigned.length}</span>
{/if} {/if}
{#if hasConflict} {#if hasConflict}
<span class="badge badge-lead" style="margin-left:0.3rem">⚠ conflict</span> <span class="badge badge-lead">⚠ conflict</span>
{/if} {/if}
</div> </div>

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

@ -173,14 +173,14 @@
<div class="text-muted">Loading…</div> <div class="text-muted">Loading…</div>
{:else} {:else}
<form onsubmit={saveEvent}> <form onsubmit={saveEvent}>
<div class="card" style="margin-bottom:1.5rem"> <div class="card">
<h2 style="font-size:0.95rem;font-weight:700;margin-bottom:1rem">Event</h2> <h2 class="card-title">Event</h2>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem"> <div class="form-grid">
<div class="form-group" style="grid-column:1/-1"> <div class="form-group full">
<label for="e-name">Event Name *</label> <label for="e-name">Event Name *</label>
<input id="e-name" bind:value={eventName} required placeholder="My Event 2026" /> <input id="e-name" bind:value={eventName} required placeholder="My Event 2026" />
</div> </div>
<div class="form-group" style="grid-column:1/-1"> <div class="form-group full">
<label for="e-venue">Venue</label> <label for="e-venue">Venue</label>
<input id="e-venue" bind:value={eventVenue} placeholder="Location name" /> <input id="e-venue" bind:value={eventVenue} placeholder="Location name" />
</div> </div>
@ -192,7 +192,7 @@
<label for="e-end">End Date *</label> <label for="e-end">End Date *</label>
<input id="e-end" type="date" bind:value={eventEndDate} required /> <input id="e-end" type="date" bind:value={eventEndDate} required />
</div> </div>
<div class="form-group" style="grid-column:1/-1"> <div class="form-group full">
<label for="e-tz">Timezone</label> <label for="e-tz">Timezone</label>
<input id="e-tz" bind:value={eventTimezone} placeholder="America/Chicago" list="tz-list" /> <input id="e-tz" bind:value={eventTimezone} placeholder="America/Chicago" list="tz-list" />
<datalist id="tz-list"> <datalist id="tz-list">
@ -211,11 +211,11 @@
</form> </form>
<form onsubmit={save}> <form onsubmit={save}>
<div class="card" style="margin-bottom:1.5rem"> <div class="card">
<h2 style="font-size:0.95rem;font-weight:700;margin-bottom:1rem">SMTP Email</h2> <h2 class="card-title">SMTP Email</h2>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem"> <div class="form-grid">
<div class="form-group" style="grid-column:1"> <div class="form-group">
<label for="s-host">SMTP Host</label> <label for="s-host">SMTP Host</label>
<input id="s-host" bind:value={smtpHost} placeholder="smtp.fastmail.com" /> <input id="s-host" bind:value={smtpHost} placeholder="smtp.fastmail.com" />
</div> </div>
@ -243,22 +243,21 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="s-url">Base URL <span class="text-muted" style="font-weight:400">(for kiosk links in emails)</span></label> <label for="s-url">Base URL <span class="card-hint" style="font-weight:400">(for kiosk links in emails)</span></label>
<input id="s-url" bind:value={baseURL} placeholder="https://events.example.com" /> <input id="s-url" bind:value={baseURL} placeholder="https://events.example.com" />
</div> </div>
<!-- Discourse SSO --> <h2 class="card-title" style="margin-top:1.5rem">Discourse SSO</h2>
<h2 style="font-size:0.95rem;font-weight:700;margin:1.5rem 0 1rem">Discourse SSO</h2> <p class="card-hint" style="margin-bottom:1rem">
<p class="text-muted" style="font-size:0.78rem;margin-bottom:1rem">
Enable DiscourseConnect SSO so users can log in with their Discourse account. Enable DiscourseConnect SSO so users can log in with their Discourse account.
Set the same secret in your Discourse admin under Connect &gt; discourse connect secret. Set the same secret in your Discourse admin under Connect &gt; discourse connect secret.
</p> </p>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem"> <div class="form-grid">
<div class="form-group" style="grid-column:1/-1"> <div class="form-group full">
<label for="sso-url">Discourse URL</label> <label for="sso-url">Discourse URL</label>
<input id="sso-url" bind:value={discourseSSOUrl} placeholder="https://forum.example.com" /> <input id="sso-url" bind:value={discourseSSOUrl} placeholder="https://forum.example.com" />
</div> </div>
<div class="form-group" style="grid-column:1/-1"> <div class="form-group full">
<label for="sso-secret">SSO Secret</label> <label for="sso-secret">SSO Secret</label>
<input id="sso-secret" type="password" bind:value={discourseSSOSecret} <input id="sso-secret" type="password" bind:value={discourseSSOSecret}
placeholder="Leave blank to keep existing" autocomplete="new-password" /> placeholder="Leave blank to keep existing" autocomplete="new-password" />
@ -274,8 +273,8 @@
</form> </form>
<!-- Test email --> <!-- Test email -->
<div class="card" style="margin-bottom:1.5rem"> <div class="card">
<h2 style="font-size:0.95rem;font-weight:700;margin-bottom:1rem">Test Email</h2> <h2 class="card-title">Test Email</h2>
<div style="display:flex;gap:0.5rem;align-items:flex-end"> <div style="display:flex;gap:0.5rem;align-items:flex-end">
<div class="form-group" style="flex:1;margin-bottom:0"> <div class="form-group" style="flex:1;margin-bottom:0">
<label for="s-test">Send to</label> <label for="s-test">Send to</label>
@ -288,8 +287,8 @@
</div> </div>
<!-- Volunteer Signup --> <!-- Volunteer Signup -->
<div class="card" style="margin-bottom:1.5rem"> <div class="card">
<h2 style="font-size:0.95rem;font-weight:700;margin-bottom:1rem">Volunteer Signup</h2> <h2 class="card-title">Volunteer Signup</h2>
<div class="form-group"> <div class="form-group">
<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" />
@ -298,14 +297,14 @@
<input type="checkbox" bind:checked={noteRequired} /> <input type="checkbox" bind:checked={noteRequired} />
Note field is required Note field is required
</label> </label>
<p class="text-muted" style="font-size:0.78rem;margin-top:0.75rem"> <p class="card-hint" style="margin-top:0.75rem">
Signup form: <a href="/volunteer-signup" target="_blank" style="color:var(--c-accent)">/volunteer-signup</a> Signup form: <a href="/volunteer-signup" target="_blank" style="color:var(--c-accent)">/volunteer-signup</a>
</p> </p>
</div> </div>
<!-- Shift Signups --> <!-- Shift Signups -->
<div class="card" style="margin-bottom:1.5rem"> <div class="card">
<h2 style="font-size:0.95rem;font-weight:700;margin-bottom:1rem">Shift Signups</h2> <h2 class="card-title">Shift Signups</h2>
<div style="display:flex;align-items:center;gap:1rem"> <div style="display:flex;align-items:center;gap:1rem">
<span style="font-size:0.875rem"> <span style="font-size:0.875rem">
Status: <strong>{shiftSignupsOpen ? 'Open' : 'Closed'}</strong> Status: <strong>{shiftSignupsOpen ? 'Open' : 'Closed'}</strong>
@ -320,7 +319,7 @@
</button> </button>
</div> </div>
{#if !shiftSignupsOpen} {#if !shiftSignupsOpen}
<p class="text-muted" style="font-size:0.78rem;margin-top:0.75rem"> <p class="card-hint" style="margin-top:0.75rem">
Opening signups will email all confirmed volunteers their shift signup links. Opening signups will email all confirmed volunteers their shift signup links.
</p> </p>
{/if} {/if}
@ -328,8 +327,8 @@
<!-- Data Management --> <!-- Data Management -->
<div class="card"> <div class="card">
<h2 style="font-size:0.95rem;font-weight:700;margin-bottom:0.5rem">Data Management</h2> <h2 class="card-title" style="margin-bottom:0.5rem">Data Management</h2>
<p class="text-muted" style="font-size:0.78rem;margin-bottom:1rem"> <p class="card-hint" style="margin-bottom:1rem">
Permanently delete all records of a given type. This cannot be undone. Permanently delete all records of a given type. This cannot be undone.
</p> </p>
<div style="display:flex;flex-wrap:wrap;gap:0.5rem"> <div style="display:flex;flex-wrap:wrap;gap:0.5rem">

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

@ -268,11 +268,11 @@
<td class="td-name"> <td class="td-name">
<strong>{u.preferred_name || u.email}</strong> <strong>{u.preferred_name || u.email}</strong>
{#if u.id === me} {#if u.id === me}
<span class="badge badge-role" style="margin-left:0.4rem">you</span> <span class="badge badge-role">you</span>
{/if} {/if}
<br><span class="text-muted" style="font-size:0.8rem">{u.email}</span> <br><span class="text-muted" style="font-size:0.8rem">{u.email}</span>
</td> </td>
<td>{#each u.roles ?? [] as r}<span class="badge badge-role" style="margin-right:0.25rem">{roleLabel(r)}</span>{/each}</td> <td>{#each u.roles ?? [] as r}<span class="badge badge-role">{roleLabel(r)}</span>{/each}</td>
<td class="text-muted">{deptNamesFor(u.department_ids || [])}</td> <td class="text-muted">{deptNamesFor(u.department_ids || [])}</td>
<td class="td-actions"> <td class="td-actions">
<div class="actions"> <div class="actions">

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

@ -181,7 +181,7 @@
{#if showAdd && canManage} {#if showAdd && canManage}
<div class="card" style="margin-bottom:1.5rem"> <div class="card" style="margin-bottom:1.5rem">
<form onsubmit={addVolunteer}> <form onsubmit={addVolunteer}>
<div class="form-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem"> <div class="form-grid">
<div class="form-group"> <div class="form-group">
<label for="v-name">Preferred Name *</label> <label for="v-name">Preferred Name *</label>
<input id="v-name" bind:value={newName} required placeholder="What they go by" /> <input id="v-name" bind:value={newName} required placeholder="What they go by" />
@ -301,12 +301,12 @@
<td class="td-name"> <td class="td-name">
<strong>{v.name}</strong> <strong>{v.name}</strong>
{#if v.is_lead} {#if v.is_lead}
<span class="badge badge-lead" style="margin-left:0.4rem">Co-Lead</span> <span class="badge badge-lead">Co-Lead</span>
{/if} {/if}
{#if !v.participant_id} {#if !v.participant_id}
<span class="badge badge-unchecked" style="margin-left:0.4rem" title="Not linked to a participant">No ticket</span> <span class="badge badge-unchecked" title="Not linked to a participant">No ticket</span>
{:else if !participantHasTickets(v.participant_id)} {:else if !participantHasTickets(v.participant_id)}
<span class="badge badge-partial" style="margin-left:0.4rem" title="No ticket on file">No ticket</span> <span class="badge badge-partial" title="No ticket on file">No ticket</span>
{/if} {/if}
{#if participant?.ticket_name && participant.ticket_name !== v.name} {#if participant?.ticket_name && participant.ticket_name !== v.name}
<div class="text-muted" style="font-size:0.78rem">Ticket: {participant.ticket_name}</div> <div class="text-muted" style="font-size:0.78rem">Ticket: {participant.ticket_name}</div>