diff --git a/README.md b/README.md index 80a43e5..71132c4 100644 --- a/README.md +++ b/README.md @@ -9,8 +9,8 @@ Turnpike handles gate check-in, volunteer scheduling, and department coordinatio - **Participant & ticket management** — CSV import (CrowdWork/Zeffy auto-detected), search, check-in - **Volunteer scheduling** — departments, shifts with capacity, conflict detection, reordering - **Public volunteer signup** — self-registration form with email confirmation, auto-participant linking -- **Volunteer kiosk** — code-authenticated self-service shift signup, no login required -- **Gate check-in** — full-screen UI with QR scanner, volunteer dual check-in +- **Volunteer kiosk** — public volunteer flow: signup, email confirmation, code-authenticated shift self-scheduling +- **Gate kiosk** — full-screen check-in UI with QR scanner for gatekeepers - **Schedule** — create shifts, assign volunteers, manage assignments with conflict awareness - **Role-based access** — admin, ticketing, staffing, colead (department-scoped), gatekeeper - **Offline-first PWA** — installs on phones/tablets, full offline check-in with background sync @@ -64,7 +64,7 @@ See [docs/INSTALLATION.md](docs/INSTALLATION.md) for systemd, Docker, NixOS, and | `ticketing` | Participants, tickets, import. No user management | | `staffing` | All departments: volunteers, shifts, schedule. No user management or settings | | `colead` | Own department only: volunteers and shifts scoped to assigned department(s) | -| `gatekeeper` | Full-screen check-in UI with QR scanner. No access to other pages | +| `gatekeeper` | Full-screen Gate Kiosk with QR scanner. No access to other pages | See [docs/USAGE.md](docs/USAGE.md) for detailed workflow documentation. diff --git a/docs/USAGE.md b/docs/USAGE.md index 6c5b9b7..23572eb 100644 --- a/docs/USAGE.md +++ b/docs/USAGE.md @@ -16,7 +16,7 @@ After logging in, create accounts for your team under **Users**. Each user gets | **ticketing** | Participants, Tickets, Import | Manage participants and tickets, run CSV imports | | **staffing** | Dashboard, Schedule, Volunteers, Departments | Manage volunteers, departments, and shifts across all departments. No user management or settings | | **colead** | Dashboard, Schedule, Volunteers | Manage volunteers and shifts within their assigned department(s) only | -| **gatekeeper** | Full-screen Gate UI | Check in ticket holders (search + QR scan). No access to other pages | +| **gatekeeper** | Full-screen Gate Kiosk | Check in ticket holders (search + QR scan). No access to other pages | Coleads are scoped to one or more departments. When creating a colead user, assign their department(s). @@ -95,7 +95,15 @@ Under **Volunteers**, you can: - Create volunteers manually (name, email, department) - Assign volunteers to departments - Mark volunteers as co-leads -- Check in volunteers +- Mark volunteers as ready (briefed at the volunteer station) + +### Volunteer statuses + +| Status | Meaning | +|--------|---------| +| **Unconfirmed** | Signed up but hasn't confirmed their email | +| **Confirmed** | Email confirmed, not yet briefed | +| **Ready** | Briefed at the volunteer station, has what they need to report for shifts | Volunteers are separate from participants. A person can be both a ticket holder and a volunteer. When a volunteer signs up via the public form, they are automatically linked to their participant record by email. @@ -117,7 +125,7 @@ Shifts can be reordered within a department to reflect priority or sequence usin ## Volunteer Kiosk -The kiosk lets volunteers self-select shifts without logging in. +The Volunteer Kiosk is the public-facing flow for volunteers: signup, email confirmation, and shift self-scheduling. The shift scheduling page lets volunteers self-select shifts without logging in. ### Setup @@ -145,15 +153,16 @@ No login is required. The kiosk code authenticates the request. Kiosk codes use the character set `A-Z, 2-9` (excluding 0/O, 1/I/L to avoid ambiguity when reading aloud or on printed badges). -## Gate Check-In +## Gate Kiosk -Users with the **gatekeeper** role see a dedicated full-screen UI: +Users with the **gatekeeper** role see a dedicated full-screen Gate Kiosk: - **QR scanner** — uses the device camera via the BarcodeDetector API. Scanned codes populate the search field. - **Search** — type a name to filter tickets in real-time (searches local IndexedDB, works offline). -- **Volunteer dual check-in** — if a ticket holder is also a volunteer, the gate UI shows their volunteer status and offers to check in both simultaneously. - **Recent check-ins** — the last 10 check-ins are shown for quick reference. +Admins and ticketing leads can also check in tickets directly from the **Participants** page by expanding a participant's tickets. + Gate devices should install Turnpike as a PWA (Add to Home Screen) for the best experience. Check-ins are stored locally and sync when connectivity is available. ## Schedule diff --git a/frontend/src/app.css b/frontend/src/app.css index c5de1fe..d36f2f7 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -207,4 +207,32 @@ tr:hover td { background: rgba(255,255,255,0.02); } } .page { padding: 1rem; } .stats { grid-template-columns: repeat(2, 1fr); } + + /* Touch targets */ + .btn { min-height: 44px; padding: 0.6rem 1rem; } + .btn-sm { min-height: 44px; padding: 0.5rem 0.75rem; font-size: 0.85rem; } + + /* Page header & actions */ + .page-header { flex-wrap: wrap; gap: 0.75rem; } + .page-title { width: 100%; } + .actions { flex-wrap: wrap; } + + /* Search bar */ + .search-bar { flex-wrap: wrap; } + .search-bar input { max-width: none; flex: 1 1 100%; } + + /* Table → card layout */ + .table-wrap { overflow-x: visible; } + table { display: block; } + thead { display: none; } + tbody { display: flex; flex-direction: column; gap: 0.5rem; } + tr { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: center; + padding: 0.75rem; border: 1px solid var(--c-border); border-radius: var(--radius-lg); + background: var(--c-surface); } + tr:hover td { background: transparent; } + td { display: inline; padding: 0; border: none; } + td:empty { display: none; } + + /* Forms */ + .form-grid { grid-template-columns: 1fr !important; } } diff --git a/frontend/src/pages/Participants.svelte b/frontend/src/pages/Participants.svelte index 26f5c63..ef2274f 100644 --- a/frontend/src/pages/Participants.svelte +++ b/frontend/src/pages/Participants.svelte @@ -243,7 +243,7 @@ {#if showAdd && canManage}
-
+
@@ -362,7 +362,7 @@ onclick={mergeMode && mergeSource?.id !== p.id ? () => { mergeTarget = p } : null} style={mergeMode && mergeSource?.id !== p.id ? 'cursor:pointer' : ''} > - + {p.preferred_name || '—'} {#if p.pronouns} · {p.pronouns} @@ -397,7 +397,7 @@ {/if} {#if canManage} - + {#if !mergeMode} @@ -504,4 +504,14 @@ .edit-fields { display: flex; gap: 0.4rem; flex-wrap: wrap; } .edit-fields input { flex: 1; min-width: 120px; font-size: 0.825rem; padding: 0.3rem 0.5rem; width: auto; } + @media (max-width: 640px) { + .td-name { width: 100%; } + .td-actions { width: 100%; } + .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%; } + } diff --git a/frontend/src/pages/Users.svelte b/frontend/src/pages/Users.svelte index c683fb9..c649964 100644 --- a/frontend/src/pages/Users.svelte +++ b/frontend/src/pages/Users.svelte @@ -148,7 +148,7 @@ {#if showAdd}
-
+
@@ -213,8 +213,8 @@ {#each users as u (u.id)} {#if editID === u.id} - - {u.username} {#if u.id === me}you{/if} + + {u.username} {#if u.id === me}you{/if} @@ -213,7 +213,7 @@ {@const dept = deptFor(v.department_id)} {@const participant = participantFor(v.participant_id)} - + {v.name} {#if v.is_lead} Co-Lead @@ -245,13 +245,13 @@
{/if} - + {#if !v.checked_in} checkIn(v)} /> {/if} {#if canManage} - +
{/if}
+ +