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

ui(badges): layout & fit-text tweaks; improve template form controls; remove badge modals from event settings; add documentation for passcode security

Browse Source
This commit is contained in:
Scott Idem
2026-04-10 11:44:22 -04:00
parent c9e2284758
commit e542c55500
5 changed files with 499 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -342,10 +342,10 @@ let fit_heights = $derived.by(() => {
grp_name_title: '1.6in',
grp_name_title_flex: 'around',
name: '1.4in',
title: '0.4in',
grp_aff_loc: '.4in',
title: '0.9in',
grp_aff_loc: '1.0in',
grp_aff_loc_flex: 'end',
affiliations: '0.4in',
affiliations: '1.0in',
location: '0.0in'
};
@@ -602,19 +602,19 @@ const code_to_icon: {
<!-- *** badge_front section start *** -->
<section
class="badge_front badge_type__{effective_badge_type_code.toLowerCase()}
group relative m-0
flex max-h-[6.0in]
min-h-[6.0in]
min-w-3.5
w-[4in]
max-w-fit
flex-col
items-end justify-end gap-0
overflow-visible
p-0
text-center hover:outline-2 hover:outline-red-500/75
hover:outline-dashed
"
group relative m-0
flex max-h-[6.0in]
min-h-[6.0in]
min-w-3.5
w-[4in]
max-w-fit
flex-col
items-end justify-end gap-0
overflow-visible
p-0
text-center hover:outline-2 hover:outline-red-500/75
hover:outline-dashed
"
style="{bg_image_path
? `background-image: url('${bg_image_path}'); background-size: cover; background-position: top center; background-repeat: no-repeat;`
: ''}{demo_bg_style ? ` ${demo_bg_style}` : ''}">
@@ -669,15 +669,17 @@ const code_to_icon: {
<div
class="badge_body
m-0
flex grow
flex-col
items-center
justify-end overflow-clip
p-0 px-8 pb-1
text-black
gap-0
"
m-0 grow
min-w-full w-full max-w-fit
flex
flex-col
items-center
justify-evenly overflow-clip
mt-54
p-0 px-8 pb-1
text-black
gap-0
"
style="{body_text_color_style}">
<!--
person_name container: explicit height from fit_heights so Element_fit_text
@@ -686,12 +688,14 @@ const code_to_icon: {
-->
<div
class="person_name
m-0 flex
flex-col
gap-2
overflow-hidden p-0
hover:outline-2 hover:outline-gray-500/75 hover:outline-dashed
"
grow
w-full
m-0 flex
flex-col items-start justify-center
gap-2
overflow-hidden p-0
hover:outline-2 hover:outline-gray-500/75 hover:outline-dashed
"
style="height: {fit_heights.grp_name_title}; justify-content: {flex_justify(
fit_heights.grp_name_title_flex
)}">
@@ -703,16 +707,23 @@ const code_to_icon: {
max=80 (fills badge width for short names like "Bob")
-->
<Element_fit_text
min={36}
min={34}
max={80}
manual_size={font_size_name ?? null}
height={fit_heights.name}
class="full_name_override_all leading-none hover:bg-pink-100/50">
class="full_name_override_all
grow
leading-none hover:bg-pink-100/50
"
>
<!-- class:name_pad_short
class:name_pad_mid
class:name_pad_long -->
<div
class="full_name_override"
class:name_pad_short
class:name_pad_mid
class:name_pad_long
style="text-align: {align_name};">
{#if display_name}
@@ -733,7 +744,12 @@ const code_to_icon: {
max={38}
manual_size={font_size_title ?? null}
height={fit_heights.title}
class="professional_title leading-none hover:bg-pink-100/50">
class="professional_title
grow
leading-none
hover:bg-pink-100/50
"
>
<div style="text-align: {align_title};">{@html display_title}</div>
</Element_fit_text>
{/if}
@@ -1285,16 +1301,16 @@ const code_to_icon: {
* correctly regardless of badge template or font size.
*/
.name_pad_short {
padding-left: 18%;
/* padding-left: 18%; */
padding-right: 18%;
}
.name_pad_mid {
padding-left: 8%;
padding-right: 8%;
/* padding-left: 8%; */
padding-right: 10%;
}
.name_pad_long {
padding-left: 2%;
padding-right: 2%;
/* padding-left: 2%; */
/* padding-right: 0%; */
}
/*