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

Fine tuning the styles

Browse Source
This commit is contained in:
Scott Idem
2026-06-02 18:14:55 -04:00
parent 4292aebc56
commit 04018a27ed
1 changed files with 51 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_obj_li.svelte
View File

@@ -192,7 +192,8 @@ let visible_badge_obj_li = $derived(
{#if row_clickable}
<a
href={row_href}
class="hover:text-primary-800-200 hover:bg-primary-200-800 active:bg-surface-200-700 flex items-center gap-3 justify-start px-3 py-2 text-left text-lg font-bold flex-1 transition-colors duration-1000 hover:duration-300 min-w-0 preset-tonal-primary rounded-lg
class="hover:text-primary-800-200 hover:bg-primary-200-800 active:bg-surface-200-800 flex items-center gap-3 justify-start px-3 py-2 text-left text-lg font-bold flex-1
transition-all duration-1000 hover:duration-300 min-w-0 preset-tonal-primary rounded-lg
max-w-4xl
"
title={is_trusted
@@ -207,12 +208,28 @@ let visible_badge_obj_li = $derived(
<User size="1.1em" class="text-primary-500" />
{/if}
<div class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 min-w-0">
<span class="truncate font-semibold min-w-44 max-w-64">{display_name}</span>
<div class="
flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 min-w-0
hover:scale-115
ease-in-out
transition-all duration-1000 hover:duration-500
hover:bg-primary-200-800 active:bg-primary-200-800
">
<span class="truncate font-semibold min-w-44 max-w-64 ">{display_name}</span>
{#if show_sensitive_fields && event_badge_obj?.email}
<span class="text-surface-600-400 bg-surface-100-900 rounded px-1.5 py-0.5 font-mono text-sm select-all hover:bg-surface-100-900 truncate min-w-52 max-w-64">
<span class="
text-surface-600-400
bg-surface-100-900 rounded
px-1.5 py-0.5
font-mono text-sm
select-all hover:bg-surface-100-900
hover:text-surface-900-100
truncate min-w-52 max-w-64
transition-all duration-1000 hover:duration-100
"
>
{is_trusted
? event_badge_obj.email
: obscure_email(event_badge_obj.email)}
@@ -221,7 +238,15 @@ let visible_badge_obj_li = $derived(
{#if !hide_affiliations && (event_badge_obj?.affiliations_override ?? event_badge_obj?.affiliations)}
<span class="text-surface-600-400 bg-surface-100-900 rounded px-1.5 py-0.5 font-mono text-sm italic select-all hover:bg-surface-100-900 truncate min-w-52 max-w-64">
<span class="
text-surface-600-400 bg-surface-100-900 rounded
px-1.5 py-0.5
font-mono italic text-sm
select-all hover:bg-surface-100-900
hover:text-surface-900-100
truncate min-w-52 max-w-64
transition-all duration-1000 hover:duration-100
">
{event_badge_obj.affiliations_override ?? event_badge_obj.affiliations}
</span>
{/if}
@@ -229,7 +254,9 @@ let visible_badge_obj_li = $derived(
</a>
{:else if is_attendee_printed}
<!-- Public attendee, badge already printed: show check-in status, no action -->
<div class="flex items-center gap-3 justify-start px-3 py-2 flex-1 min-w-0 rounded-lg bg-success-500/10">
<div class="
flex items-center gap-3 justify-start px-3 py-2 flex-1 min-w-0 rounded-lg bg-success-500/10
">
<Check size="1.1em" class="text-success-600 dark:text-success-400 shrink-0" />
<div class="flex flex-col min-w-0">
<span class="truncate font-semibold">{display_name}</span>
@@ -266,7 +293,15 @@ let visible_badge_obj_li = $derived(
<span class="truncate font-semibold min-w-44">{display_name}</span>
{#if show_sensitive_fields && event_badge_obj?.email}
<span class="text-surface-600-400 bg-surface-100-900 rounded px-1.5 py-0.5 font-mono text-sm select-all hover:bg-surface-100-900 truncate min-w-52">
<span class="
text-surface-600-400 bg-surface-100-900 rounded
px-1.5 py-0.5
font-mono italic text-sm
select-all hover:bg-surface-100-900
hover:text-surface-900-100
truncate min-w-52 max-w-64
transition-all duration-1000 hover:duration-100
">
{is_trusted
? event_badge_obj.email
: obscure_email(event_badge_obj.email)}
@@ -274,7 +309,15 @@ let visible_badge_obj_li = $derived(
{/if}
{#if !hide_affiliations && (event_badge_obj?.affiliations_override ?? event_badge_obj?.affiliations)}
<span class="text-surface-600-400 bg-surface-100-900 rounded px-1.5 py-0.5 font-mono text-sm italic select-all hover:bg-surface-100-900 truncate min-w-52">
<span class="
text-surface-600-400 bg-surface-100-900 rounded
px-1.5 py-0.5
font-mono italic text-sm
select-all hover:bg-surface-100-900
hover:text-surface-900-100
truncate min-w-52 max-w-64
transition-all duration-1000 hover:duration-100
">
{event_badge_obj.affiliations_override ?? event_badge_obj.affiliations}
</span>
{/if}