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

Moved action buttons on mobile cards.

Browse source
This commit is contained in:
Pen Anderson 2026-03-05 09:56:54 -06:00
parent 07f7d3d245
commit d439306657
4 changed files with 25 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

23
frontend/src/pages/Departments.svelte
View file

@ -100,7 +100,7 @@
{#if showAdd && canCreate}
<div class="card" style="margin-bottom:1.5rem">
<form onsubmit={addDept}>
<div style="display:grid;grid-template-columns:1fr 1fr auto;gap:1rem;align-items:end">
<div class="form-grid" style="display:grid;grid-template-columns:1fr 1fr auto;gap:1rem;align-items:end">
<div class="form-group" style="margin-bottom:0">
<label for="d-name">Name *</label>
<input id="d-name" bind:value={newName} required placeholder="e.g. Security" />
@ -142,8 +142,8 @@
<tbody>
{#each $allDepts ?? [] as d (d.id)}
{#if editID === d.id}
<tr>
<td>
<tr class="edit-row">
<td class="td-name">
<div style="display:flex;align-items:center;gap:0.5rem">
<input type="color" bind:value={editColor} style="width:36px;height:36px;padding:0.1rem;border-radius:4px;cursor:pointer;flex-shrink:0" />
<input bind:value={editName} required placeholder="Name" style="margin:0" />
@ -153,7 +153,7 @@
<input bind:value={editDesc} placeholder="Description" style="margin:0" />
</td>
{#if canCreate}
<td>
<td class="td-actions">
<div class="actions">
<button class="btn btn-primary btn-sm" onclick={() => saveDept(d)} disabled={saving}>
{saving ? '…' : 'Save'}
@ -165,13 +165,13 @@
</tr>
{:else}
<tr>
<td>
<td class="td-name">
<span class="dept-dot" style="background:{d.color};margin-right:0.5rem"></span>
<strong>{d.name}</strong>
</td>
<td class="text-muted">{d.description || '—'}</td>
<td class="td-desc text-muted">{d.description || '—'}</td>
{#if canCreate}
<td>
<td class="td-actions">
<div class="actions">
<button class="btn btn-ghost btn-sm" onclick={() => startEdit(d)}>Edit</button>
{#if canDelete}
@ -188,3 +188,12 @@
</div>
{/if}
</div>
<style>
@media (max-width: 640px) {
.td-name { width: 100%; }
.td-desc { width: 100%; }
.td-actions { width: 100%; display: flex; justify-content: flex-end; }
.edit-row td { width: 100%; }
}
</style>

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

@ -506,11 +506,9 @@
@media (max-width: 640px) {
.td-name { width: 100%; }
.td-actions { width: 100%; }
.td-actions { width: 100%; display: flex; justify-content: flex-end; }
.ticket-rows { padding: 0; border: none; border-radius: 0; margin-top: -0.5rem; }
.ticket-rows td { width: 100%; }
.ticket-row { flex-direction: column; gap: 0.35rem; }
.ticket-row div:last-child { text-align: left; }
.edit-row { padding: 0.75rem; }
.edit-row td { width: 100%; }
}

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

@ -278,7 +278,7 @@
<style>
@media (max-width: 640px) {
.td-name { width: 100%; }
.td-actions { width: 100%; }
.td-actions { width: 100%; display: flex; justify-content: flex-end; }
.edit-row td { width: 100%; }
}
</style>

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

@ -228,14 +228,14 @@
<div class="text-muted" style="font-size:0.78rem">{v.note}</div>
{/if}
</td>
<td class="text-muted">
<td class="td-dept text-muted">
{#if dept}
<span class="dept-dot" style="background:{dept.color};margin-right:0.4rem"></span>{dept.name}
{:else}
—
{/if}
</td>
<td>
<td class="td-status">
<span class="badge {v.checked_in ? 'badge-checked' : v.email_confirmed ? 'badge-confirmed' : 'badge-unchecked'}">
{v.checked_in ? 'Ready' : v.email_confirmed ? 'Confirmed' : 'Unconfirmed'}
</span>
@ -269,8 +269,10 @@
<style>
@media (max-width: 640px) {
.td-name { width: 100%; }
.td-ready { width: 100%; }
.td-actions { width: 100%; }
.td-name { flex: 1; min-width: 0; order: 1; }
.td-ready { flex-shrink: 0; align-self: flex-start; order: 2; }
.td-dept { width: 100%; order: 3; }
.td-status { width: 100%; order: 4; }
.td-actions { width: 100%; order: 5; display: flex; justify-content: flex-end; }
}
</style>