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

Badges: center badge vertically + horizontally in print preview; scaffold print_margin_cfg

Browse Source
This commit is contained in:
Scott Idem
2026-03-12 17:05:41 -04:00
parent c3a4ff45c7
commit 11a6d5d35c
3 changed files with 373 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -113,6 +113,18 @@
// growing its width expands it leftward into the badge area automatically.
// transition-all on both elements makes the layout shift smooth.
let is_editing = $derived(preview_overrides !== null);
// Print margin config from badge template cfg_json.
// When set, overrides the default @page margin: 0 for per-template positioning.
// Expected format in cfg_json: { "print_margin": { "top": "0.25in", "right": "0.25in", "bottom": "0.25in", "left": "0.25in" } }
// All four edges are optional; omitted edges fall back to 0.
// TODO: inject into @page rule via a dynamic <style> block once a UI exists to set this value.
let print_margin_cfg = $derived.by(() => {
try {
const cfg = JSON.parse($lq__event_badge_template_obj?.cfg_json ?? '{}');
return (cfg?.print_margin as { top?: string; right?: string; bottom?: string; left?: string } | null) ?? null;
} catch { return null; }
});
</script>
<svelte:head>
@@ -135,26 +147,51 @@
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. -->
<!-- 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.
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. -->
<style>
@media print {
/* Fill the physical page height so flex vertical-centering works */
html, body {
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
/* Events layout nav bar */
.submenu { display: none !important; }
/* Events #ae_main_content — override flex, bg, overflow, and size constraints */
/* Events #ae_main_content — convert to a full-page flex centering container */
#ae_main_content {
display: block !important;
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;
height: auto !important;
min-height: 0 !important;
min-height: 100vh !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !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;
}
}
</style>
@@ -276,8 +313,9 @@
<!-- Badge render area.
pr-64/pr-80 prevents the badge from hiding under the fixed right controls panel.
Widens to pr-80 while a field is being edited (panel also widens to match).
On print: pr-0 restores full width, controls panel is hidden. -->
<div class="print:pr-0 transition-all duration-200" class:pr-80={is_editing} class:pr-64={!is_editing}>
On print: pr-0 restores full width; the #badge_render_area id triggers flex-centering
from the @media print rules above. -->
<div id="badge_render_area" class="print:pr-0 transition-all duration-200" class:pr-80={is_editing} class:pr-64={!is_editing}>
<!-- null → Element_fit_text auto-scales; a number → manual size override from controls. -->
<!-- preview_overrides: non-null while a field card is open in controls — gives live preview. -->
<Comp_badge_obj_view_v2