Badges: fix print centering — dissolve .main_content; hide footer/scroll buttons from print; document print layout architecture

This commit is contained in:
Scott Idem
2026-03-12 17:28:25 -04:00
parent f26416de22
commit 05aa0288cb
3 changed files with 46 additions and 3 deletions

View File

@@ -256,6 +256,43 @@ in DB and may be needed:
---
## Print Layout Architecture
### How the print CSS works
The print page (`print/+page.svelte`) injects `<style>` blocks into `<svelte:head>` that
take effect only in `@media print`. The strategy uses `display: contents` to dissolve
intermediate layout wrappers so `body` becomes the sole centering flex container.
**Wrappers dissolved via `display: contents`:**
| Selector | Source | Why dissolved |
|---|---|---|
| `#ae_main_content` | `events/+layout.svelte` | `overflow-auto`, `flex-col`, `max-w-7xl`, `bg-gray-50` |
| `.main_content` | `events/+layout.svelte` | `pb-48`, `pt-20+`, `grow`, `items-center`, `justify-start` |
| `#badge_render_area` | `print/+page.svelte` | Screen-only right-padding offset for controls panel |
**App chrome hidden via `print:hidden`:**
- `nav.submenu` (events layout nav bar)
- `footer.footer` (events layout footer)
- Scroll-to-top / scroll-to-bottom button div
- Kiosk header (`<header>` in print page)
- Controls panel (`<div>` fixed right in print page)
- Debug info section (edit mode only)
- Root layout: offline banner, session expired banner, hydration overlay, sys/debug menus
**Result:** `body { display: flex; align-items: center; justify-content: center }` directly
centers `section.event_badge_wrapper` with no intermediate wrappers in the way.
**`@page` size:** Matched to badge stock per layout code. `margin: 0` fills the page.
For the PVC layout the page size equals the card exactly, so centering is redundant
but harmless. For layouts where stock ≠ page, centering positions the badge correctly.
**Future per-template margins:** `print_margin_cfg` is already parsed from `cfg_json`
in `print/+page.svelte`. A dynamic `@page { margin: ... }` injection can be built from
that value when a UI for it exists.
---
## Related Files
| File | Role |