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

fix(badges): fix 4x6 fanfold header image display and body gap

Browse Source 
Two layout fixes for the badge_4x6_fanfold layout (no background_image_path):

1. badge_header max-height: 1.5in — the Axonius logo (624×232px) renders at
   ~1.49in tall at full badge width. The inherited max-h-[1.00in] was cropping
   the bottom half of the image.

2. badge_body margin-top: 0 — overrides the component-level mt-54 (≈2.25in).
   That margin was needed for the PVC layout where a full-bleed background image
   covered the badge and body text needed to start in the image's designated zone.
   For fanfold badges with a standalone header_path, mt-54 created a 2.25in blank
   gap between the header and the attendee name.

Also updates default fit_heights for badge_4x6_fanfold to match the 4.0in body
height (was sized for 4.5in before the header zone was properly accounted for).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-05-15 15:48:37 -04:00
parent 26fde2a566
commit 50c484a4cc
2 changed files with 28 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/lib/ae_events/badges/css/badge_layout_epson_4x6_fanfold.css
View File

@@ -34,9 +34,27 @@
/* outline: thick solid orange; */
}
/* Body area: 6in total − ~1in header − ~0.5in footer ≈ 4.5in for content */
/*
* Header image zone: 624×232px at full 4in badge width → natural height ≈ 1.49in.
* Override Tailwind's max-h-[1.00in] to avoid cropping the bottom of the image.
* min-h-[.50in] from the component HTML is fine; leave it in place.
*/
[data-layout='badge_4x6_fanfold'] .badge_header {
max-height: 1.5in;
}
/*
* Body area: 6in total − 1.5in header − 0.5in footer = 4.0in for name/title/affiliations.
*
* margin-top: 0 overrides the component-level mt-54 (≈2.25in). That margin was added
* for the PVC badge layout (badge_3.5x5.5_pvc) where a full-bleed background_image_path
* was used — the body needed to start below the background image's logo zone. For
* fanfold badges with a standalone header_path image and no background, mt-54 creates
* a large blank gap between the header and the attendee name.
*/
[data-layout='badge_4x6_fanfold'] .badge_body {
max-height: 4.5in;
margin-top: 0;
max-height: 4.0in;
}
/* Outer wrapper: strip the default padding/gap so the outline hugs the badge.

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

@@ -383,16 +383,17 @@ let fit_heights = $derived.by(() => {
location: '0.5in'
};
} else {
// Default: badge_4x6_fanfold — 4" × 6", most room
// Default: badge_4x6_fanfold — 4" × 6", single-sided with 1.5in header
// Body = 6in − 1.5in header − 0.5in footer = 4.0in
base = {
grp_name_title: '2.5in',
grp_name_title: '2.2in',
grp_name_title_flex: 'around',
name: '1.9in',
title: '0.7in',
grp_aff_loc: '1.9in',
name: '1.7in',
title: '0.65in',
grp_aff_loc: '1.8in',
grp_aff_loc_flex: 'between',
affiliations: '1.3in',
location: '0.55in'
affiliations: '1.2in',
location: '0.5in'
};
}