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

Style clean up. Making things nicer again.

Browse Source
This commit is contained in:
Scott Idem
2026-04-02 21:31:58 -04:00
parent 055bbd9ffd
commit d80202e35b
3 changed files with 91 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -140,6 +140,9 @@ let visible_badge_obj_li = $derived(
event_badge_obj?.full_name_override ??
event_badge_obj?.full_name ??
`${event_badge_obj?.given_name ?? ''} ${event_badge_obj?.family_name ?? ''}`.trim()}
{@const can_print = is_trusted && (!is_printed || is_edit_mode)}
{@const print_href = `/events/${event_badge_obj?.event_id}/badges/${event_badge_obj?.event_badge_id}/print`}
{@const review_href = build_review_url(event_badge_obj)}
<li
class="
@@ -150,43 +153,75 @@ let visible_badge_obj_li = $derived(
">
<div
class="flex w-full flex-row flex-wrap items-center justify-between gap-2">
<!-- Left cluster: name (display only) + info chips -->
<div
class="flex min-w-0 grow flex-row flex-wrap items-center gap-x-3 gap-y-1">
<!-- Name: always plain display — print action is a separate button -->
<span
class="flex shrink-0 flex-row items-center gap-1.5 text-lg font-bold">
{#if event_badge_obj?.hide}
<EyeOff
size="1.1em"
class="text-gray-400" />
{:else}
<User
size="1.1em"
class="text-surface-400" />
{/if}
<span>{display_name}</span>
</span>
<!-- Left cluster: main action (name + email + affiliations) -->
<div class="flex min-w-0 grow flex-row flex-wrap items-center gap-x-3 gap-y-1">
{#if can_print}
<a
href={print_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"
title="
Print badge for
{display_name}
email: <{is_trusted ? event_badge_obj?.email : obscure_email(event_badge_obj?.email)}>
{event_badge_obj?.affiliations_override ?? event_badge_obj?.affiliations}
type: {event_badge_obj?.badge_type}
id: {event_badge_obj.event_badge_id}
"
>
{#if event_badge_obj?.hide}
<EyeOff size="1.1em" class="text-gray-400" />
{:else}
<User size="1.1em" class="text-primary-500" />
{/if}
<!-- Email chip — obscured for non-trusted -->
{#if show_sensitive_fields && event_badge_obj?.email}
<span
class="text-surface-400 flex items-center gap-1 text-xs">
<Mail size="1em" />
{is_trusted
? event_badge_obj.email
: obscure_email(event_badge_obj.email)}
</span>
{/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">{display_name}</span>
<!-- Affiliations chip (prefers override) -->
{#if !hide_affiliations && (event_badge_obj?.affiliations_override ?? event_badge_obj?.affiliations)}
<span
class="text-surface-400 flex items-center gap-1 text-xs">
<MapPin size="1em" />
{event_badge_obj.affiliations_override ??
event_badge_obj.affiliations}
</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">
{is_trusted
? event_badge_obj.email
: obscure_email(event_badge_obj.email)}
</span>
{/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">
{event_badge_obj.affiliations_override ?? event_badge_obj.affiliations}
</span>
{/if}
</div>
</a>
{:else}
<div
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 cursor-not-allowed"
title="Printing not permitted">
{#if event_badge_obj?.hide}
<EyeOff size="1.1em" class="text-gray-400" />
{:else}
<User size="1.1em" class="text-surface-400" />
{/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">{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">
{is_trusted
? event_badge_obj.email
: obscure_email(event_badge_obj.email)}
</span>
{/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">
{event_badge_obj.affiliations_override ?? event_badge_obj.affiliations}
</span>
{/if}
</div>
</div>
{/if}
<!-- Badge type chip -->
@@ -205,10 +240,11 @@ let visible_badge_obj_li = $derived(
{#if is_trusted && (!is_printed || is_edit_mode)}
<a
href={`/events/${event_badge_obj?.event_id}/badges/${event_badge_obj?.event_badge_id}/print`}
class="btn btn-sm preset-tonal-primary flex items-center gap-1"
class="hover:text-primary-800-200 hover:bg-primary-200-800 active:bg-surface-200-700 flex items-center gap-1 px-3 py-2 text-base font-bold transition-colors duration-1000 hover:duration-300 min-w-0 preset-tonal-primary rounded-lg border border-primary-200-800
"
title={is_printed
? `Reprint badge (printed ${print_count}×)`
: 'Print badge'}>
: `Print badge for ${display_name}`}>
<Printer size="1em" />
{#if is_printed}
<span class="text-xs font-bold"
@@ -260,10 +296,10 @@ let visible_badge_obj_li = $derived(
{#if !is_printed || (is_trusted && is_edit_mode)}
<button
type="button"
class="btn btn-sm preset-tonal-surface flex items-center gap-1"
class="hover:text-primary-800-200 hover:bg-primary-200-800 active:bg-surface-200-700 flex items-center gap-1 px-3 py-2 text-base font-bold transition-colors duration-1000 hover:duration-300 min-w-0 preset-tonal-primary rounded-lg border border-primary-200-800"
onclick={() =>
send_review_email(event_badge_obj)}
title="Email a review link to this attendee">
title="Email a review link to {display_name}">
<Mail size="1em" />
<span class="hidden sm:inline"
>Email Link</span>

20
src/routes/events/[event_id]/(badges)/badges/ae_comp__badge_search.svelte
View File

@@ -82,10 +82,11 @@ function handle_qr_scan_result(event: {
handle_search_trigger();
})}
autocomplete="off"
class="search_form preset-tonal-success flex w-full max-w-7xl flex-row flex-wrap items-center justify-center gap-1 rounded-lg px-2 py-2 shadow-sm md:px-12">
class="search_form bg-primary-50-950 border-primary-100-900 flex w-full max-w-7xl flex-col sm:flex-row flex-wrap items-center justify-center gap-1 rounded-lg px-2 py-2 shadow-md md:px-12">
<div
class="flex grow flex-col items-center justify-center gap-1 md:flex-row">
class="flex grow flex-col md:flex-row flex-wrap items-center justify-center gap-1">
{#if $ae_loc.trusted_access}
<span class="flex flex-row flex-wrap items-center justify-center gap-1">
<select
bind:value={badges_loc.current.search_badge_type_code}
onchange={handle_search_trigger}
@@ -125,6 +126,7 @@ function handle_qr_scan_result(event: {
<option value="affiliations_asc"
>Affiliations ASC</option>
</select>
</span>
<input
type="search"
@@ -144,12 +146,12 @@ function handle_qr_scan_result(event: {
<input
type="search"
placeholder="name, email"
placeholder="name, email, company, organization, etc."
id="badge_fulltext_search_qry_str"
bind:value={badges_loc.current.fulltext_search_qry_str}
autocomplete="off"
data-lpignore="true"
class="input grow font-mono text-lg transition-all"
class="input grow font-mono text-lg transition-all focus:bg-white min-w-96 md:max-w-1/2 border-l-2 border-b-2 border-l-primary-500 border-b-primary-500"
onkeyup={(e) => {
if (e.key === 'Enter') {
handle_search_trigger();
@@ -161,7 +163,10 @@ function handle_qr_scan_result(event: {
<div class="flex flex-row items-center justify-center gap-1">
<button
type="submit"
class="btn btn-lg preset-tonal-success border-success-500 hover:preset-tonal-success w-48 border text-2xl font-bold transition-all">
class="
hover:text-primary-800-200 hover:bg-primary-200-800 active:bg-surface-200-700 flex items-center justify-center gap-1 px-3 py-2 text-2xl font-bold transition-all duration-1000 hover:duration-300 min-w-0 preset-tonal-success rounded-lg border border-success-200-800
w-48
">
{#if $events_sess.badges.search_status === 'loading'}
<LoaderCircle class="mx-1 animate-spin" />
{:else}
@@ -182,7 +187,10 @@ function handle_qr_scan_result(event: {
badges_loc.current.qry_affiliations = '';
handle_search_trigger();
}}
class="btn btn-sm preset-outlined-tertiary-100-900 hover:preset-filled-tertiary-100-900 text-xs transition-all"
class="
hover:text-tertiary-800-200 hover:bg-tertiary-200-800 active:bg-surface-200-700 flex items-center justify-center gap-1 px-3 py-2 text-sm font-bold transition-all duration-1000 hover:duration-300 min-w-0 preset-outlined-tertiary rounded-lg border border-tertiary-200-800
"
title="Clear search query">
<RemoveFormatting size="1.25em" />
<span class="hidden md:inline"> Clear </span>

4
src/routes/events/ae_comp__event_session_obj_li.svelte
View File

@@ -155,11 +155,11 @@ function toggle_details(id: string) {
{#if session_obj?.hide}
<EyeOff
size="1em"
class="flex-none text-gray-400" />
class="text-gray-400" />
{:else}
<Presentation
size="1em"
class="text-primary-500 flex-none" />
class="text-primary-500" />
{/if}
<span class="flex-1">{session_obj?.name}</span>