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

Badges: panel widens to w-80 while editing, font scaling on active card

Browse Source
This commit is contained in:
Scott Idem
2026-03-12 15:21:13 -04:00
parent 5f6f1b408b
commit 9e64815d62
2 changed files with 38 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_print_controls.svelte
View File

@@ -785,7 +785,7 @@
.field-card--active {
border-color: rgb(99 102 241 / 0.45); /* indigo-500, muted */
box-shadow:
0 0 0 3px rgb(99 102 241 / 0.18), /* soft outer glow — the "zoom ring" */
0 0 0 3px rgb(99 102 241 / 0.18), /* soft outer glow */
0 4px 14px rgb(0 0 0 / 0.11); /* elevation shadow */
}
:global(.dark) .field-card--active {
@@ -821,6 +821,25 @@
overflow: hidden;
}
/* ---- Active card: scale up value text and form inputs for accessibility ----
Physical font-size increase (not transform: scale) so touch targets and text
genuinely get larger — benefits all users, not just visual appearance.
Transition on font-size animates the magnification smoothly.
~150% of text-sm (0.875rem) = 1.3rem for the value display line.
Form inputs go to 1.05rem — larger but still contained in the 240px form width. */
.flex-1 > p:not(.field-label) {
transition: font-size 180ms ease-out, line-height 180ms ease-out;
}
.field-card--active .flex-1 > p:not(.field-label) {
font-size: 1.3rem;
line-height: 1.3;
}
.field-card--active .ctrl-accordion-inner input,
.field-card--active .ctrl-accordion-inner textarea,
.field-card--active .ctrl-accordion-inner select {
font-size: 1.05rem;
}
/* ---- Entrance animation for form content ----
Triggered each time .open is applied to the parent accordion.
Pairs with the height animation: content fades + zooms in from

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

@@ -107,6 +107,12 @@
// value on every keystroke. The badge render merges it over the saved badge
// object so the user can see changes as they type, before saving.
let preview_overrides: Record<string, any> | null = $state(null);
// When any field is being edited, widen the controls panel (w-64 → w-80)
// and adjust the badge area margin to match. The panel is fixed right-0 so
// growing its width expands it leftward into the badge area automatically.
// transition-all on both elements makes the layout shift smooth.
let is_editing = $derived(preview_overrides !== null);
</script>
<svelte:head>
@@ -244,9 +250,10 @@
</header>
<!-- Badge render area.
pr-64 prevents the badge from hiding under the fixed right controls panel.
pr-64/pr-80 prevents the badge from hiding under the fixed right controls panel.
Widens to pr-80 while a field is being edited (panel also widens to match).
On print: pr-0 restores full width, controls panel is hidden. -->
<div class="print:pr-0 pr-64">
<div class="print:pr-0 transition-all duration-200" class:pr-80={is_editing} class:pr-64={!is_editing}>
<!-- null → Element_fit_text auto-scales; a number → manual size override from controls. -->
<!-- preview_overrides: non-null while a field card is open in controls — gives live preview. -->
<Comp_badge_obj_view_v2
@@ -264,11 +271,16 @@
</div>
<!-- Controls panel: fixed to the right edge of the viewport — screen-only.
w-64 (256px) matches pr-64 above. top-20 clears the page header (~80px).
Independently scrollable. Always visible regardless of viewport width. -->
<div class="print:hidden fixed right-0 top-20 bottom-0 w-64 overflow-y-auto z-30
Normally w-64 (256px); expands to w-80 (320px) while a field is being edited
so the scaled value text and form inputs have room without clipping.
Fixed right-0 means width growth expands leftward into the badge area.
top-20 clears the page header (~80px). Independently scrollable. -->
<div class="print:hidden fixed right-0 top-20 bottom-0 overflow-y-auto z-30
border-l border-gray-200 dark:border-gray-700
bg-white dark:bg-zinc-900 p-2">
bg-white dark:bg-zinc-900 p-2
transition-all duration-200"
class:w-80={is_editing}
class:w-64={!is_editing}>
<Comp_badge_print_controls
event_id={$lq__event_badge_obj.event_id as string}
event_badge_id={event_badge_id as string}