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 */
.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 { 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:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-accent); }
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-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;
font-size: 0.72rem; font-weight: 600;
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-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">
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>
</div>

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

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

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

@ -173,14 +173,14 @@
<div class="text-muted">Loading…</div>
{:else}
<form onsubmit={saveEvent}>
<div class="card" style="margin-bottom:1.5rem">
<h2 style="font-size:0.95rem;font-weight:700;margin-bottom:1rem">Event</h2>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
<div class="form-group" style="grid-column:1/-1">
<div class="card">
<h2 class="card-title">Event</h2>
<div class="form-grid">
<div class="form-group full">
<label for="e-name">Event Name *</label>
<input id="e-name" bind:value={eventName} required placeholder="My Event 2026" />
</div>
<div class="form-group" style="grid-column:1/-1">
<div class="form-group full">
<label for="e-venue">Venue</label>
<input id="e-venue" bind:value={eventVenue} placeholder="Location name" />
</div>
@ -192,7 +192,7 @@
<label for="e-end">End Date *</label>
<input id="e-end" type="date" bind:value={eventEndDate} required />
</div>
<div class="form-group" style="grid-column:1/-1">
<div class="form-group full">
<label for="e-tz">Timezone</label>
<input id="e-tz" bind:value={eventTimezone} placeholder="America/Chicago" list="tz-list" />
<datalist id="tz-list">
@ -211,11 +211,11 @@
</form>
<form onsubmit={save}>
<div class="card" style="margin-bottom:1.5rem">
<h2 style="font-size:0.95rem;font-weight:700;margin-bottom:1rem">SMTP Email</h2>
<div class="card">
<h2 class="card-title">SMTP Email</h2>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
<div class="form-group" style="grid-column:1">
<div class="form-grid">
<div class="form-group">
<label for="s-host">SMTP Host</label>
<input id="s-host" bind:value={smtpHost} placeholder="smtp.fastmail.com" />
</div>
@ -243,22 +243,21 @@
</div>
<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" />
</div>
<!-- Discourse SSO -->
<h2 style="font-size:0.95rem;font-weight:700;margin:1.5rem 0 1rem">Discourse SSO</h2>
<p class="text-muted" style="font-size:0.78rem;margin-bottom:1rem">
<h2 class="card-title" style="margin-top:1.5rem">Discourse SSO</h2>
<p class="card-hint" style="margin-bottom:1rem">
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.
</p>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
<div class="form-group" style="grid-column:1/-1">
<div class="form-grid">
<div class="form-group full">
<label for="sso-url">Discourse URL</label>
<input id="sso-url" bind:value={discourseSSOUrl} placeholder="https://forum.example.com" />
</div>
<div class="form-group" style="grid-column:1/-1">
<div class="form-group full">
<label for="sso-secret">SSO Secret</label>
<input id="sso-secret" type="password" bind:value={discourseSSOSecret}
placeholder="Leave blank to keep existing" autocomplete="new-password" />
@ -274,8 +273,8 @@
</form>
<!-- Test email -->
<div class="card" style="margin-bottom:1.5rem">
<h2 style="font-size:0.95rem;font-weight:700;margin-bottom:1rem">Test Email</h2>
<div class="card">
<h2 class="card-title">Test Email</h2>
<div style="display:flex;gap:0.5rem;align-items:flex-end">
<div class="form-group" style="flex:1;margin-bottom:0">
<label for="s-test">Send to</label>
@ -288,8 +287,8 @@
</div>
<!-- Volunteer Signup -->
<div class="card" style="margin-bottom:1.5rem">
<h2 style="font-size:0.95rem;font-weight:700;margin-bottom:1rem">Volunteer Signup</h2>
<div class="card">
<h2 class="card-title">Volunteer Signup</h2>
<div class="form-group">
<label for="s-note-label">Note Field Label</label>
<input id="s-note-label" bind:value={noteLabel} placeholder="Additional note" />
@ -298,14 +297,14 @@
<input type="checkbox" bind:checked={noteRequired} />
Note field is required
</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>
</p>
</div>
<!-- Shift Signups -->
<div class="card" style="margin-bottom:1.5rem">
<h2 style="font-size:0.95rem;font-weight:700;margin-bottom:1rem">Shift Signups</h2>
<div class="card">
<h2 class="card-title">Shift Signups</h2>
<div style="display:flex;align-items:center;gap:1rem">
<span style="font-size:0.875rem">
Status: <strong>{shiftSignupsOpen ? 'Open' : 'Closed'}</strong>
@ -320,7 +319,7 @@
</button>
</div>
{#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.
</p>
{/if}
@ -328,8 +327,8 @@
<!-- Data Management -->
<div class="card">
<h2 style="font-size:0.95rem;font-weight:700;margin-bottom:0.5rem">Data Management</h2>
<p class="text-muted" style="font-size:0.78rem;margin-bottom:1rem">
<h2 class="card-title" style="margin-bottom:0.5rem">Data Management</h2>
<p class="card-hint" style="margin-bottom:1rem">
Permanently delete all records of a given type. This cannot be undone.
</p>
<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">
<strong>{u.preferred_name || u.email}</strong>
{#if u.id === me}
<span class="badge badge-role" style="margin-left:0.4rem">you</span>
<span class="badge badge-role">you</span>
{/if}
<br><span class="text-muted" style="font-size:0.8rem">{u.email}</span>
</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="td-actions">
<div class="actions">

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

@ -181,7 +181,7 @@
{#if showAdd && canManage}
<div class="card" style="margin-bottom:1.5rem">
<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">
<label for="v-name">Preferred Name *</label>
<input id="v-name" bind:value={newName} required placeholder="What they go by" />
@ -301,12 +301,12 @@
<td class="td-name">
<strong>{v.name}</strong>
{#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 !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)}
<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 participant?.ticket_name && participant.ticket_name !== v.name}
<div class="text-muted" style="font-size:0.78rem">Ticket: {participant.ticket_name}</div>