Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui(badges): layout & fit-text tweaks; improve template form controls; remove badge modals from event settings; add documentation for passcode security

Browse Source
This commit is contained in:
Scott Idem
2026-04-10 11:44:22 -04:00
parent c9e2284758
commit e542c55500
5 changed files with 499 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/routes/events/[event_id]/(badges)/templates/ae_comp__badge_template_form.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { untrack } from 'svelte';
import { Loader2 } from '@lucide/svelte';
import { ChevronDown, ChevronUp, Loader2 } from '@lucide/svelte';
import type { key_val } from '$lib/stores/ae_stores';
import { events_func } from '$lib/ae_events/ae_events_functions';
import { ae_api } from '$lib/stores/ae_stores';
@@ -296,12 +296,13 @@ function toggle_cfg_controls_auth_editable(key: string) {
<form onsubmit={prevent_default(handle_submit)} class="space-y-4 p-4">
<h3 class="h3">{template_id ? 'Edit' : 'Create New'} Badge Template</h3>
<section class="border-t pt-3">
<button type="button" class="text-sm text-surface-500" onclick={() => (sections_open.general = !sections_open.general)}>
General {sections_open.general ? '▲' : '▼'}
<section class="border-surface-200-800 rounded-xl border">
<button type="button" class="flex w-full items-center justify-between px-4 py-3 text-left font-semibold" onclick={() => (sections_open.general = !sections_open.general)}>
<span>General</span>
{#if sections_open.general}<ChevronUp size="1em" />{:else}<ChevronDown size="1em" />{/if}
</button>
{#if sections_open.general}
<div class="space-y-3 pt-2">
<div class="border-surface-200-800 space-y-3 border-t px-4 py-3">
<label class="label">
<span>Template Name</span>
<input type="text" bind:value={name} class="input" required />
@@ -319,12 +320,13 @@ function toggle_cfg_controls_auth_editable(key: string) {
{/if}
</section>
<section class="border-t pt-3">
<button type="button" class="text-sm text-surface-500" onclick={() => (sections_open.branding = !sections_open.branding)}>
Header & Branding {sections_open.branding ? '▲' : '▼'}
<section class="border-surface-200-800 rounded-xl border">
<button type="button" class="flex w-full items-center justify-between px-4 py-3 text-left font-semibold" onclick={() => (sections_open.branding = !sections_open.branding)}>
<span>Header &amp; Branding</span>
{#if sections_open.branding}<ChevronUp size="1em" />{:else}<ChevronDown size="1em" />{/if}
</button>
{#if sections_open.branding}
<div class="space-y-3 pt-2">
<div class="border-surface-200-800 space-y-3 border-t px-4 py-3">
<label class="label">
<span>Header Path (URL) — top banner image (used when no background image)</span>
<input type="text" bind:value={header_path} class="input" />
@@ -349,12 +351,13 @@ function toggle_cfg_controls_auth_editable(key: string) {
{/if}
</section>
<section class="border-t pt-3">
<button type="button" class="text-sm text-surface-500" onclick={() => (sections_open.footer = !sections_open.footer)}>
Footer {sections_open.footer ? '▲' : '▼'}
<section class="border-surface-200-800 rounded-xl border">
<button type="button" class="flex w-full items-center justify-between px-4 py-3 text-left font-semibold" onclick={() => (sections_open.footer = !sections_open.footer)}>
<span>Footer</span>
{#if sections_open.footer}<ChevronUp size="1em" />{:else}<ChevronDown size="1em" />{/if}
</button>
{#if sections_open.footer}
<div class="space-y-3 pt-2">
<div class="border-surface-200-800 space-y-3 border-t px-4 py-3">
<label class="label">
<span>Footer Text (HTML allowed)</span>
<textarea bind:value={footer_text} class="textarea" rows="2"></textarea>
@@ -363,12 +366,13 @@ function toggle_cfg_controls_auth_editable(key: string) {
{/if}
</section>
<section class="border-t pt-3">
<button type="button" class="text-sm text-surface-500" onclick={() => (sections_open.qr = !sections_open.qr)}>
QR & Wireless {sections_open.qr ? '▲' : '▼'}
<section class="border-surface-200-800 rounded-xl border">
<button type="button" class="flex w-full items-center justify-between px-4 py-3 text-left font-semibold" onclick={() => (sections_open.qr = !sections_open.qr)}>
<span>QR &amp; Wireless</span>
{#if sections_open.qr}<ChevronUp size="1em" />{:else}<ChevronDown size="1em" />{/if}
</button>
{#if sections_open.qr}
<div class="space-y-3 pt-2">
<div class="border-surface-200-800 space-y-3 border-t px-4 py-3">
<label class="label flex items-center gap-2">
<input type="checkbox" bind:checked={cfg_show_qr_front} class="checkbox" />
<span>Show QR Code on Front</span>
@@ -389,12 +393,13 @@ function toggle_cfg_controls_auth_editable(key: string) {
{/if}
</section>
<section class="border-t pt-3">
<button type="button" class="text-sm text-surface-500" onclick={() => (sections_open.tickets = !sections_open.tickets)}>
Tickets {sections_open.tickets ? '▲' : '▼'}
<section class="border-surface-200-800 rounded-xl border">
<button type="button" class="flex w-full items-center justify-between px-4 py-3 text-left font-semibold" onclick={() => (sections_open.tickets = !sections_open.tickets)}>
<span>Tickets</span>
{#if sections_open.tickets}<ChevronUp size="1em" />{:else}<ChevronDown size="1em" />{/if}
</button>
{#if sections_open.tickets}
<div class="space-y-3 pt-2">
<div class="border-surface-200-800 space-y-3 border-t px-4 py-3">
<label class="label">
<span>Ticket 1 Text (HTML allowed)</span>
<textarea bind:value={ticket_1_text} class="textarea" rows="2"></textarea>
@@ -411,12 +416,13 @@ function toggle_cfg_controls_auth_editable(key: string) {
{/if}
</section>
<section class="border-t pt-3">
<button type="button" class="text-sm text-surface-500" onclick={() => (advanced_open = !advanced_open)}>
Advanced (cfg_json) {advanced_open ? '▲' : '▼'}
<section class="border-surface-200-800 rounded-xl border">
<button type="button" class="flex w-full items-center justify-between px-4 py-3 text-left font-semibold" onclick={() => (advanced_open = !advanced_open)}>
<span>Advanced (cfg_json)</span>
{#if advanced_open}<ChevronUp size="1em" />{:else}<ChevronDown size="1em" />{/if}
</button>
{#if advanced_open}
<div class="space-y-4 pt-2">
<div class="border-surface-200-800 space-y-4 border-t px-4 py-3">
<!-- Visibility -->
<div>
@@ -590,7 +596,7 @@ function toggle_cfg_controls_auth_editable(key: string) {
disabled={submit_status === 'loading'}>Cancel</button>
<button
type="submit"
class="btn preset-filled-primary"
class="btn preset-filled-primary-500"
disabled={submit_status === 'loading'}>
{#if submit_status === 'loading'}
<Loader2 size="1em" class="animate-spin" aria-hidden="true" />