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

Badges: print centering via display:contents — collapse wrappers, body as flex center

Browse Source
This commit is contained in:
Scott Idem
2026-03-12 17:21:56 -04:00
parent 11a6d5d35c
commit f26416de22
9 changed files with 891 additions and 1851 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -147,69 +147,82 @@
it in the compiled layout CSS files.
-->
<!-- Print chrome reset + centering: applied regardless of layout.
Hides app nav, resets the events layout container, and centers the badge
both horizontally and vertically on the printed page.
<!-- Print layout strategy — applied regardless of badge layout:
Future manual margins: read from badge template cfg_json as
{ "print_margin": { "top": "0.25in", ... } }
and inject into @page margin via a dynamic <style> block. -->
Instead of trying to coerce #ae_main_content into a centering container
(which requires fighting its min-height, overflow, max-width, flex-col etc.),
we use `display: contents` to dissolve the intermediate wrappers from the
layout. This makes .event_badge_wrapper a direct flex child of <body>, and
body becomes the single centering container for the whole printed page.
For PVC / fanfold: the @page size below matches the badge exactly, so
margin: 0 fills the page cleanly. If per-template margins are needed,
set cfg_json: { "print_margin": { "top": "0.25in", ... } } on the template
and a dynamic @page rule can be injected here via print_margin_cfg. -->
<style>
@media print {
/* Fill the physical page height so flex vertical-centering works */
/* Full-page reset */
html, body {
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
/* Events layout nav bar */
.submenu { display: none !important; }
/* Events #ae_main_content — convert to a full-page flex centering container */
#ae_main_content {
/* Body is the sole centering flex container.
.event_badge_wrapper is its only non-hidden flex child
once the intermediate wrappers are collapsed via display:contents. */
body {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
max-width: none !important;
width: 100% !important;
min-height: 100vh !important;
height: 100% !important;
padding: 0 !important;
}
/* Hide app chrome */
.submenu { display: none !important; }
/* Dissolve layout wrappers — removes their boxes from the layout while
keeping children renderable. The badge section floats up to body
as a direct flex child, so body's centering applies to it directly.
This avoids all height-chain and overflow-clip issues. */
#ae_main_content,
#badge_render_area {
display: contents !important;
}
/* Badge wrapper: reset screen-only mx-auto; the @page size = badge size
so margin: 0 fills the page exactly.
gap/padding are stripped to eliminate any whitespace bleed. */
.event_badge_wrapper {
margin: 0 !important;
background: transparent !important;
padding: 0 !important;
gap: 0 !important;
}
/* Badge render wrapper — strip screen-only right padding; flex-center the badge */
#badge_render_area {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
/* Never split the front or back across pages */
.badge_front,
.badge_back {
break-inside: avoid;
page-break-inside: avoid;
}
}
</style>
<!-- @page paper size: matched to the badge stock per template layout.
margin: 0 so the badge occupies the full printable area.
If per-template offsets are needed, inject a dynamic style element
here driven by print_margin_cfg (parsed from template cfg_json). -->
{#if $lq__event_badge_template_obj?.layout === 'badge_3.5x5.5_pvc'}
<style>
@page { size: 3.5in 5.5in; margin: 0; }
@media print { body { margin: 0; padding: 0; } .event_badge_wrapper { gap: 0 !important; padding: 0 !important; } }
</style>
{:else if $lq__event_badge_template_obj?.layout === 'badge_4x5_fanfold'}
<style>
@page { size: 4in 10in; margin: 0; }
@media print { body { margin: 0; padding: 0; } .event_badge_wrapper { gap: 0 !important; padding: 0 !important; } }
</style>
{:else}
<!-- Default: badge_4x6_fanfold or layout not yet set -->
<style>
@page { size: 4in 12in; margin: 0; }
@media print { body { margin: 0; padding: 0; } .event_badge_wrapper { gap: 0 !important; padding: 0 !important; } }
</style>
{/if}