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

feat(badges): add 4×6 fanfold layout CSS for Epson single-sided stock

Browse Source 
Introduces badge_layout_epson_4x6_fanfold.css (layout code badge_4x6_fanfold)
for the Axonius Adapt 2026 June show. Wires @page size to 4in×6in in the print
page and cleans up the stale 4in×12in default. Imports new CSS in badge component.
Measured stock: 4in × 6in portrait with 5/8in lanyard hole 1/4in from top.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-05-15 15:26:13 -04:00
parent 21a44f96fa
commit 26fde2a566
4 changed files with 71 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/lib/ae_events/badges/css/badge_layout_epson_4x6_fanfold.css Normal file
View File

@@ -0,0 +1,63 @@
/* =============================================================================
Badge Layout: Epson ColorWorks — Fanfold 4" × 6" (Single-sided)
layout code: badge_4x6_fanfold
Badge stock: 4in wide × 6in per label, single-sided continuous fanfold
Used for: Axonius Adapt 2026 (June 2026)
Physical notes (measured 2026-05-15):
Overall: 4.0in × 6.0in (portrait)
Lanyard hole: 5/8in wide × 1/8in tall, centered horizontally,
1/4in from top edge, 3/8in from each side edge.
Keep decorative header content below the hole zone (~3/8in from top).
Print behavior:
Single-sided only. Set duplex=0 on the template — the badge_back section
will not render at all. @page size (4in × 6in) is injected dynamically
by print/+page.svelte <svelte:head> based on the layout field.
CSS scope:
All rules scoped under [data-layout="badge_4x6_fanfold"] to avoid conflicts
with other layouts compiled into the same bundle. These override the
Tailwind utility classes (w-[4in], min-h-[6.0in], etc.) hardcoded on the
badge sections — attribute + class selectors win over single class selectors.
============================================================================= */
/* --- Badge front --- */
[data-layout='badge_4x6_fanfold'] .badge_front {
min-width: 4in;
width: 4in;
min-height: 6in;
max-height: 6in;
/* debug */
/* outline: thick solid orange; */
}
/* Body area: 6in total − ~1in header − ~0.5in footer ≈ 4.5in for content */
[data-layout='badge_4x6_fanfold'] .badge_body {
max-height: 4.5in;
}
/* Outer wrapper: strip the default padding/gap so the outline hugs the badge.
badge_front above supplies the exact 4×6in card size. */
[data-layout='badge_4x6_fanfold'].event_badge_wrapper {
padding: 0;
gap: 0;
min-height: 0;
min-width: 4in;
width: 4in;
max-width: 4in;
}
@media print {
[data-layout='badge_4x6_fanfold'].event_badge_wrapper {
width: 4in !important;
height: 6in !important;
max-width: 4in !important;
max-height: 6in !important;
/* overflow: visible so any intentional bleed element is not clipped by the
wrapper — the Epson driver clips at the physical label edge. */
overflow: visible !important;
}
}

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

@@ -72,6 +72,7 @@ let {
// Each file scopes rules under [data-layout="..."] on the wrapper section.
// @page rules (paper size) are injected per-template in print/+page.svelte.
import '$lib/ae_events/badges/css/badge_layout_epson_4x5_fanfold.css';
import '$lib/ae_events/badges/css/badge_layout_epson_4x6_fanfold.css';
import '$lib/ae_events/badges/css/badge_layout_zebra_zc10l_pvc.css';
import { untrack } from 'svelte';

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

@@ -293,8 +293,10 @@ let page_size_css = $derived(
$lq__event_badge_template_obj?.layout === 'badge_3.5x5.5_pvc'
? '3.5in 5.5in'
: $lq__event_badge_template_obj?.layout === 'badge_4x5_fanfold'
? '4in 10in'
: '4in 12in' // Default: badge_4x6_fanfold or layout not yet set
? '4in 10in' // duplex fanfold: 5in front + 5in back = 10in strip
: $lq__event_badge_template_obj?.layout === 'badge_4x6_fanfold'
? '4in 6in' // single-sided fanfold: front only
: '4in 6in' // fallback: unknown layout, assume single-sided 4×6
);
// @page size + optional per-template margin override from cfg_json.print_margin.
// print_margin_cfg is parsed from the template's cfg_json field — allows per-event