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

fix(badges): polish print page chrome; fix header overlap with controls panel

Browse Source 
- Add pr-64/pr-80 + transition to page <header> so Review/Email actions
  stay clear of the fixed right controls panel (same as badge_render_area)
- Remove redundant Re-print button from header — controls panel Test button
  covers the same use case; having both caused clipping and confusion
- Fix datetime formatting: toLocaleString → ae_util.iso_datetime_formatter
  (date_full_no_year + time_12_long) for consistent display with badge list
- Unify loading state to p-16/text-xl/mb-2 matching badge list style
- Polish Badge Not Found layout; swap button weights (Back = primary action)
- Add left-edge shadow to controls panel for better visual separation
- Badge view debug section: gate to administrator_access, add object ID
  labels, add hover:max-h-64 expand and transition on pre blocks

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-06-02 19:11:37 -04:00
parent 04018a27ed
commit 1b6aeb5b02
2 changed files with 50 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte
View File

@@ -1225,22 +1225,41 @@ const code_to_icon: {
<!-- End if for lq__event_badge_obj && lq__event_badge_template_obj -->
</section>
{#if $ae_loc.edit_mode}
{#if $ae_loc.edit_mode && $ae_loc.administrator_access}
<div class="print:hidden">
<h1 class="mt-4 text-lg font-bold">Debug Information</h1>
<div>
Badge Object ID: {$lq__event_badge_obj?.event_badge_id}:
<pre
class="bg-surface-200 border-surface-300 text-surface-900 mt-4 max-h-32 overflow-auto rounded border p-2 text-xs break-words whitespace-pre-wrap dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100">{JSON.stringify(
class="bg-surface-200 border-surface-300 text-surface-900 max-h-32 hover:max-h-64 overflow-auto rounded border p-2 text-xs wrap-break-words whitespace-pre-wrap dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 transition-all duration-500">{JSON.stringify(
$lq__event_badge_obj,
null,
2
)}</pre>
</div>
<hr />
<div>
Badge Template Object ID: {$lq__event_badge_template_obj?.event_badge_template_id}:
<pre
class="bg-surface-200 border-surface-300 text-surface-900 mt-4 max-h-32 overflow-auto rounded border p-2 text-xs break-words whitespace-pre-wrap dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100">{JSON.stringify(
class="bg-surface-200 border-surface-300 text-surface-900 max-h-32 hover:max-h-64 overflow-auto rounded border p-2 text-xs wrap-break-words whitespace-pre-wrap dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 transition-all duration-500">{JSON.stringify(
$lq__event_badge_template_obj,
null,
2
)}</pre>
</div>
<!-- <div>
Event Object ID: {$lq__event_obj?.event_id}:
<pre
class="bg-surface-200 border-surface-300 text-surface-900 max-h-32 hover:max-h-64 overflow-auto rounded border p-2 text-xs wrap-break-words whitespace-pre-wrap dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-100 transition-all duration-500">{JSON.stringify(
$lq__event_obj,
null,
2
)}</pre>
</div> -->
</div>
{/if}

64
src/routes/events/[event_id]/(badges)/badges/[badge_id]/print/+page.svelte
View File

@@ -11,11 +11,13 @@ import { untrack } from 'svelte';
import { liveQuery } from 'dexie';
import { browser } from '$app/environment';
import { fade } from 'svelte/transition';
import { ae_loc, ae_sess } from '$lib/stores/ae_stores';
import { db_events } from '$lib/ae_events/db_events';
import { events_loc } from '$lib/stores/ae_events_stores';
import { page } from '$app/state';
import { ArrowLeft, Eye, LoaderCircle, Mail, Printer } from '@lucide/svelte';
import { ArrowLeft, Eye, LoaderCircle, Mail } from '@lucide/svelte';
import { ae_util } from '$lib/ae_utils/ae_utils';
import Comp_badge_obj_view from '../ae_comp__badge_obj_view.svelte';
import Comp_badge_print_controls from '../ae_comp__badge_print_controls.svelte';
@@ -390,9 +392,13 @@ $effect(() => {
{#if $lq__event_badge_obj && $lq__event_badge_obj.event_id && event_badge_id}
<!-- Kiosk header: screen-only chrome. Minimal — the badge render is the focus.
Hidden when hide_chrome is on (toggle with [H] or the controls panel button). -->
<!-- pr-64/pr-80 mirrors badge_render_area so the right-side actions stay clear of the
fixed controls panel. transition-all animates when the panel widens for editing. -->
<header
class="mb-3 flex w-full flex-row flex-wrap items-center justify-between gap-2 border-b border-gray-300 pb-2 print:hidden"
class:hidden={hide_chrome}>
class="mb-3 flex w-full flex-row flex-wrap items-center justify-between gap-2 border-b border-gray-300 dark:border-gray-700 pb-2 transition-all duration-200 print:hidden"
class:hidden={hide_chrome}
class:pr-80={is_editing}
class:pr-64={!is_editing}>
<!-- Left: Back + attendee name + status indicator -->
<div class="flex min-w-0 flex-row items-center gap-2">
<a
@@ -430,34 +436,20 @@ $effect(() => {
</p>
{:else if is_printed && $lq__event_badge_obj.print_last_datetime}
<p class="text-xs text-gray-400">
Last printed {new Date(
$lq__event_badge_obj.print_last_datetime
).toLocaleString()}
Last printed {ae_util.iso_datetime_formatter($lq__event_badge_obj.print_last_datetime, 'date_full_no_year')} {ae_util.iso_datetime_formatter($lq__event_badge_obj.print_last_datetime, 'time_12_long')}
</p>
{/if}
</div>
</div>
<!-- Right: secondary / staff-only actions -->
<!-- Right: secondary / staff-only actions.
Re-print was removed — the controls panel "Test" button covers that use case
without duplicating the action here where it competes with the panel. -->
<div class="flex shrink-0 flex-row items-center gap-1">
<!-- Re-print shortcut: only in edit mode when already printed.
Calls window.print() only — does NOT increment print_count.
Use the "Print Badge" button in the right panel for the canonical
first print (tracks count + navigates back to search). -->
{#if is_trusted && is_printed && is_edit_mode}
<button
type="button"
class="btn btn-sm preset-tonal-surface flex items-center gap-1"
onclick={() => window.print()}
title={`Re-trigger print dialog — already printed ${print_count}×`}>
<Printer size="1em" />
<span class="hidden text-xs sm:inline">Re-print</span>
</button>
{/if}
<!-- Review page: Trusted + Edit Mode -->
{#if is_trusted && is_edit_mode}
<a
transition:fade={{ duration: 150 }}
href={build_review_url()}
class="btn btn-sm preset-tonal-secondary flex items-center gap-1"
title="Open badge review page">
@@ -470,6 +462,7 @@ $effect(() => {
Temporarily restricted — TODO: restore broader access after Axonius 2026 -->
{#if is_admin && is_edit_mode}
<button
transition:fade={{ duration: 150 }}
type="button"
class="btn btn-sm preset-tonal-surface flex items-center gap-1"
onclick={() => send_review_email()}
@@ -516,9 +509,10 @@ $effect(() => {
bottom-24: clears the sys bar (fixed bottom-12 h-9 = 84px from bottom). -->
<div
class="fixed top-20 right-0 bottom-24 z-30 overflow-x-hidden overflow-y-auto border-l
border-gray-200 bg-white p-2
transition-all duration-200 dark:border-gray-700
dark:bg-zinc-900 print:hidden"
border-gray-200 dark:border-gray-700
bg-white dark:bg-zinc-900
shadow-[-2px_0_8px_rgb(0_0_0/0.06)] dark:shadow-[-2px_0_8px_rgb(0_0_0/0.3)]
p-2 transition-all duration-200 print:hidden"
class:w-80={is_editing}
class:w-64={!is_editing}>
<Comp_badge_print_controls
@@ -538,27 +532,25 @@ $effect(() => {
bind:name_two_lines />
</div>
{:else if is_loading_idb || !event_badge_id}
<div
class="flex flex-col items-center justify-center gap-4 p-20 opacity-50">
<LoaderCircle size="3em" class="animate-spin" />
<p class="text-center text-xl font-bold">Loading Badge...</p>
<div class="flex w-full flex-col items-center justify-center p-16 text-center opacity-50">
<LoaderCircle size="3em" class="mx-auto mb-2 animate-spin" />
<p class="text-xl">Loading Badge...</p>
</div>
{:else}
<div class="card space-y-4 p-8 text-center">
<h2 class="text-error-500 text-2xl font-bold">Badge Not Found</h2>
<p class="opacity-70">
No record found for ID: <span class="font-mono"
>{event_badge_id}</span>
<div class="flex w-full flex-col items-center justify-center p-16 text-center">
<p class="text-error-500 mb-2 text-2xl font-bold">Badge Not Found</p>
<p class="mb-6 opacity-60 text-sm">
No record for ID: <span class="font-mono">{event_badge_id}</span>
</p>
<div class="flex justify-center gap-2">
<button
class="btn preset-filled-primary"
class="btn preset-tonal-surface"
onclick={() => window.location.reload()}>
Retry
</button>
<a
href={`/events/${event_id}/badges`}
class="btn preset-tonal-surface">
class="btn preset-filled-primary">
Back to Search
</a>
</div>