feat(badges): layout CSS system — data-layout attribute, @page injection, style_href
Two compiled layout CSS files in src/lib/ae_events/badges/css/:
- badge_layout_epson_4x5_fanfold.css — 4"×5" per side, Epson ColorWorks C3500
fanfold duplex; preferred for general conference use (ISHLT, demos)
- badge_layout_zebra_zc10l_pvc.css — 3.5"×5.5" PVC card, Zebra ZC10L,
single-sided (pair with duplex=0 on template)
Rules scoped under [data-layout="..."] on the wrapper — beats Tailwind utility
class specificity without !important. Vite hot-reloads these in dev.
Badge component: add data-layout attribute from template.layout field; import
both layout CSS files (falls back to Tailwind 4"×6" defaults if layout unset).
Print page svelte:head: inject @page paper-size rule per layout code
(@page cannot use attribute selectors so it must be dynamic). Also wire
style_href as a <link> for per-event external client branding CSS.
db_events.ts Badge_template interface: add style_href and duplex fields.
MODULE doc: update layout codes table with badge_4x5_fanfold entry.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,42 @@
|
||||
/* =============================================================================
|
||||
Badge Layout: Epson ColorWorks C3500/C4000 / ExpoBadge 4" × 5" Fanfold (Duplex)
|
||||
layout code: badge_4x5_fanfold
|
||||
Badge stock: 4in wide × 5in per side, double-sided, continuous fanfold
|
||||
Used for: ISHLT, general conference use, preferred demo layout
|
||||
|
||||
Print behavior:
|
||||
Front (5") and back (5") render stacked on screen. When printed, the browser
|
||||
sends a 4" × 10" strip to the Epson ColorWorks driver. @page size is injected
|
||||
dynamically by print/+page.svelte <svelte:head> based on the layout field.
|
||||
|
||||
CSS scope:
|
||||
All rules scoped under [data-layout="badge_4x5_fanfold"] to avoid conflicts
|
||||
with other layouts rendered on the same page. These override the Tailwind
|
||||
utility classes (w-[4in], min-h-[6.0in], etc.) that are hardcoded on the
|
||||
badge sections — attribute + class selectors win over single class selectors.
|
||||
============================================================================= */
|
||||
|
||||
/* --- Badge front --- */
|
||||
|
||||
[data-layout="badge_4x5_fanfold"] .badge_front {
|
||||
width: 4in;
|
||||
min-height: 5in;
|
||||
max-height: 5in;
|
||||
}
|
||||
|
||||
/* Body area: 5in total − ~1in header − ~0.5in footer = ~3.5in for content */
|
||||
[data-layout="badge_4x5_fanfold"] .badge_body {
|
||||
max-height: 3.5in;
|
||||
}
|
||||
|
||||
/* --- Badge back --- */
|
||||
|
||||
[data-layout="badge_4x5_fanfold"] .badge_back {
|
||||
width: 4in;
|
||||
min-height: 5in;
|
||||
max-height: 5in;
|
||||
}
|
||||
|
||||
[data-layout="badge_4x5_fanfold"] .badge_back_content {
|
||||
max-height: 4.5in;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
/* =============================================================================
|
||||
Badge Layout: Zebra ZC10L — PVC Card 3.5" × 5.5"
|
||||
layout code: badge_3.5x5.5_pvc
|
||||
Badge stock: 3.5in × 5.5in PVC card (CR80 portrait equivalent)
|
||||
Used for: Axonius NYC (April 2026), single-sided events
|
||||
|
||||
Print behavior:
|
||||
Single-sided only. Set duplex=0 on the template — the badge_back section
|
||||
will not render at all. @page size (3.5in × 5.5in) is injected dynamically
|
||||
by print/+page.svelte <svelte:head> based on the layout field.
|
||||
|
||||
CSS scope:
|
||||
All rules scoped under [data-layout="badge_3.5x5.5_pvc"] to avoid conflicts.
|
||||
These override the hardcoded Tailwind utility classes on the badge sections.
|
||||
============================================================================= */
|
||||
|
||||
/* --- Badge front --- */
|
||||
|
||||
[data-layout="badge_3.5x5.5_pvc"] .badge_front {
|
||||
width: 3.5in;
|
||||
min-height: 5.5in;
|
||||
max-height: 5.5in;
|
||||
}
|
||||
|
||||
/* Body area: 5.5in total − ~1in header − ~0.5in footer = ~4in for content.
|
||||
Same as the current Tailwind default — no body override needed. */
|
||||
|
||||
/* No .badge_back rules — duplex=0 on the template means the back section
|
||||
is not rendered at all (see show_badge_back in ae_comp__badge_obj_view.svelte). */
|
||||
@@ -251,6 +251,8 @@ export interface Badge_template {
|
||||
|
||||
layout?: null | string;
|
||||
style_filename?: null | string;
|
||||
style_href?: null | string;
|
||||
duplex?: null | number | boolean;
|
||||
|
||||
enable?: null | boolean;
|
||||
hide?: null | boolean;
|
||||
|
||||
Reference in New Issue
Block a user