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

Badges: clean print output — suppress outlines, hide app chrome, reset layout container

Browse Source
This commit is contained in:
Scott Idem
2026-03-12 16:52:17 -04:00
parent 25359f12b8
commit c3a4ff45c7
4 changed files with 42 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/routes/+layout.svelte
View File

@@ -290,14 +290,14 @@
</svelte:head>
{#if browser && (is_offline || api_unreachable)}
<div class="fixed top-0 left-0 right-0 z-100 p-4 bg-orange-600/90 text-white text-center shadow-2xl flex items-center justify-center gap-4">
<div class="print:hidden fixed top-0 left-0 right-0 z-100 p-4 bg-orange-600/90 text-white text-center shadow-2xl flex items-center justify-center gap-4">
<span class="text-xl font-bold">{is_offline ? 'Offline' : api_error_msg}</span>
<button class="btn btn-sm variant-filled-white text-orange-600" onclick={() => window.location.reload()}>Retry</button>
</div>
{/if}
{#if browser && flag_expired}
<div class="fixed top-0 left-0 right-0 z-50 px-4 py-2 bg-amber-500 text-white shadow-xl flex items-center justify-between gap-4">
<div class="print:hidden fixed top-0 left-0 right-0 z-50 px-4 py-2 bg-amber-500 text-white shadow-xl flex items-center justify-between gap-4">
<p class="text-sm font-semibold">Your session has expired. Please reload or sign in again.</p>
<div class="flex gap-2 items-center shrink-0">
<button class="btn btn-sm variant-filled-white text-amber-700" onclick={() => window.location.reload()}>Reload</button>
@@ -310,7 +310,7 @@
{@render children?.()}
{#if is_hydrating}
<div class="fixed inset-0 z-99 flex flex-col items-center justify-center bg-surface-50/80 dark:bg-surface-900/80 backdrop-blur-sm transition-opacity duration-500">
<div class="print:hidden fixed inset-0 z-99 flex flex-col items-center justify-center bg-surface-50/80 dark:bg-surface-900/80 backdrop-blur-sm transition-opacity duration-500">
<div class="preset-filled-surface-100-900 p-8 rounded-2xl shadow-2xl flex flex-col items-center gap-4">
<span class="fas fa-cog fa-spin text-5xl text-primary-500"></span>
<div class="text-center font-bold text-xl">Hydrating Aether...</div>
@@ -327,10 +327,13 @@
{/if}
{#if browser && (!$ae_loc?.iframe || $ae_loc?.trusted_access)}
<E_app_sys_menu {data} bind:hide={$ae_loc.sys_menu.hide} bind:expand={$ae_sess.sys_menu.expand} />
<!-- print:hidden wrapper: sys/debug menus are fixed overlays — must not appear on printed pages -->
<div class="print:hidden">
<E_app_sys_menu {data} bind:hide={$ae_loc.sys_menu.hide} bind:expand={$ae_sess.sys_menu.expand} />
<!-- You must be in Edit Mode to initially see the Debug expand button. Once expanded, you can toggle the Edit Mode while still seeing the expanded Debug content. -->
{#if $ae_loc.edit_mode || $ae_loc.debug_menu.expand}
<E_app_debug_menu bind:hide={$ae_loc.debug_menu.hide} bind:expand={$ae_loc.debug_menu.expand} />
{/if}
<!-- You must be in Edit Mode to initially see the Debug expand button. Once expanded, you can toggle the Edit Mode while still seeing the expanded Debug content. -->
{#if $ae_loc.edit_mode || $ae_loc.debug_menu.expand}
<E_app_debug_menu bind:hide={$ae_loc.debug_menu.hide} bind:expand={$ae_loc.debug_menu.expand} />
{/if}
</div>
{/if}

1
src/routes/events/+layout.svelte
View File

@@ -216,6 +216,7 @@
class:opacity-0={yTop > 250}
class="
submenu
print:hidden
z-20
hover:opacity-100
absolute top-0 left-0 right-0

6
src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view_v2.svelte
View File

@@ -1003,9 +1003,15 @@
}
@media print {
/* Remove all decorative outlines — only badge content should print */
.event_badge_wrapper {
outline: none !important;
box-shadow: none;
}
.badge_front,
.badge_back {
outline: none !important;
}
}
.badge_front,

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

@@ -134,6 +134,30 @@
it dynamically here based on the template's layout field rather than putting
it in the compiled layout CSS files.
-->
<!-- Print chrome reset: applied regardless of layout. Hides app nav and removes
the events layout container's background, flex layout, overflow clip, and
width constraints so the badge fills the page cleanly. -->
<style>
@media print {
/* Events layout nav bar */
.submenu { display: none !important; }
/* Events #ae_main_content — override flex, bg, overflow, and size constraints */
#ae_main_content {
display: block !important;
overflow: visible !important;
max-width: none !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
gap: 0 !important;
}
}
</style>
{#if $lq__event_badge_template_obj?.layout === 'badge_3.5x5.5_pvc'}
<style>
@page { size: 3.5in 5.5in; margin: 0; }