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

fix(badges): punch hole markers — z-index above header + 1mm safety inset

Browse Source 
z-index: 10 ensures markers always render above the header image regardless
of DOM order. Inset 1mm on all sides from physical hole boundary to account
for printer registration variance (3mm-tall slot has no margin for error).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-06-04 19:56:29 -04:00
parent 7bf76bf766
commit 4831f4b81b
1 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -670,37 +670,40 @@ const code_to_icon: {
<!-- Punch-out hole markers: X overlays at physical badge clip slot positions.
Slots: 5/8in wide × 1/8in tall, 1/4in from top, 3/8in from left/right edges.
Center slot: horizontally centered. Markers print so attendees know to push them out. -->
Center slot: horizontally centered. Markers print so attendees know to push them out.
z-index: 10 keeps markers above the header image regardless of DOM order.
Inset ~1mm on all sides from the physical hole boundary — safety margin for printer
registration variance (slots are only 3mm tall, registration matters). -->
{#if punch_holes_left}
<div class="punch_hole_marker pointer-events-none absolute"
aria-hidden="true"
style="top: 0.25in; left: 0.375in; width: 0.625in; height: 0.125in;">
<svg width="100%" height="100%" viewBox="0 0 50 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="49" height="9" fill="rgba(255,255,255,0.4)" stroke="#777" stroke-width="1" stroke-dasharray="4,2"/>
<line x1="0" y1="0" x2="50" y2="10" stroke="#777" stroke-width="1"/>
<line x1="50" y1="0" x2="0" y2="10" stroke="#777" stroke-width="1"/>
style="top: calc(0.25in + 1mm); left: calc(0.375in + 1mm); width: calc(0.625in - 2mm); height: calc(0.125in - 2mm); z-index: 10;">
<svg width="100%" height="100%" viewBox="0 0 50 8" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="49" height="7" fill="rgba(255,255,255,0.4)" stroke="#777" stroke-width="1" stroke-dasharray="4,2"/>
<line x1="0" y1="0" x2="50" y2="8" stroke="#777" stroke-width="1"/>
<line x1="50" y1="0" x2="0" y2="8" stroke="#777" stroke-width="1"/>
</svg>
</div>
{/if}
{#if punch_holes_right}
<div class="punch_hole_marker pointer-events-none absolute"
aria-hidden="true"
style="top: 0.25in; right: 0.375in; width: 0.625in; height: 0.125in;">
<svg width="100%" height="100%" viewBox="0 0 50 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="49" height="9" fill="rgba(255,255,255,0.4)" stroke="#777" stroke-width="1" stroke-dasharray="4,2"/>
<line x1="0" y1="0" x2="50" y2="10" stroke="#777" stroke-width="1"/>
<line x1="50" y1="0" x2="0" y2="10" stroke="#777" stroke-width="1"/>
style="top: calc(0.25in + 1mm); right: calc(0.375in + 1mm); width: calc(0.625in - 2mm); height: calc(0.125in - 2mm); z-index: 10;">
<svg width="100%" height="100%" viewBox="0 0 50 8" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="49" height="7" fill="rgba(255,255,255,0.4)" stroke="#777" stroke-width="1" stroke-dasharray="4,2"/>
<line x1="0" y1="0" x2="50" y2="8" stroke="#777" stroke-width="1"/>
<line x1="50" y1="0" x2="0" y2="8" stroke="#777" stroke-width="1"/>
</svg>
</div>
{/if}
{#if punch_holes_center}
<div class="punch_hole_marker pointer-events-none absolute"
aria-hidden="true"
style="top: 0.25in; left: 50%; transform: translateX(-50%); width: 0.625in; height: 0.125in;">
<svg width="100%" height="100%" viewBox="0 0 50 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="49" height="9" fill="rgba(255,255,255,0.4)" stroke="#777" stroke-width="1" stroke-dasharray="4,2"/>
<line x1="0" y1="0" x2="50" y2="10" stroke="#777" stroke-width="1"/>
<line x1="50" y1="0" x2="0" y2="10" stroke="#777" stroke-width="1"/>
style="top: calc(0.25in + 1mm); left: 50%; transform: translateX(-50%); width: calc(0.625in - 2mm); height: calc(0.125in - 2mm); z-index: 10;">
<svg width="100%" height="100%" viewBox="0 0 50 8" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="49" height="7" fill="rgba(255,255,255,0.4)" stroke="#777" stroke-width="1" stroke-dasharray="4,2"/>
<line x1="0" y1="0" x2="50" y2="8" stroke="#777" stroke-width="1"/>
<line x1="50" y1="0" x2="0" y2="8" stroke="#777" stroke-width="1"/>
</svg>
</div>
{/if}