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_override ??
event_badge_obj?.full_name ?? event_badge_obj?.full_name ??
`${event_badge_obj?.given_name ?? ''} ${event_badge_obj?.family_name ?? ''}`.trim()} `${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 <li
class=" class="
@@ -150,43 +153,75 @@ let visible_badge_obj_li = $derived(
"> ">
<div <div
class="flex w-full flex-row flex-wrap items-center justify-between gap-2"> class="flex w-full flex-row flex-wrap items-center justify-between gap-2">
<!-- Left cluster: name (display only) + info chips --> <!-- Left cluster: main action (name + email + affiliations) -->
<div <div class="flex min-w-0 grow flex-row flex-wrap items-center gap-x-3 gap-y-1">
class="flex min-w-0 grow flex-row flex-wrap items-center gap-x-3 gap-y-1"> {#if can_print}
<!-- Name: always plain display — print action is a separate button --> <a
<span href={print_href}
class="flex shrink-0 flex-row items-center gap-1.5 text-lg font-bold"> 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"
{#if event_badge_obj?.hide} title="
<EyeOff Print badge for
size="1.1em" {display_name}
class="text-gray-400" /> email: <{is_trusted ? event_badge_obj?.email : obscure_email(event_badge_obj?.email)}>
{:else} {event_badge_obj?.affiliations_override ?? event_badge_obj?.affiliations}
<User type: {event_badge_obj?.badge_type}
size="1.1em" id: {event_badge_obj.event_badge_id}
class="text-surface-400" /> "
{/if} >
<span>{display_name}</span> {#if event_badge_obj?.hide}
</span> <EyeOff size="1.1em" class="text-gray-400" />
{:else}
<User size="1.1em" class="text-primary-500" />
{/if}
<!-- Email chip — obscured for non-trusted --> <div class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 min-w-0">
{#if show_sensitive_fields && event_badge_obj?.email} <span class="truncate font-semibold min-w-44">{display_name}</span>
<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}
<!-- Affiliations chip (prefers override) --> {#if show_sensitive_fields && event_badge_obj?.email}
{#if !hide_affiliations && (event_badge_obj?.affiliations_override ?? event_badge_obj?.affiliations)}
<span <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">
class="text-surface-400 flex items-center gap-1 text-xs"> {is_trusted
<MapPin size="1em" /> ? event_badge_obj.email
{event_badge_obj.affiliations_override ?? : obscure_email(event_badge_obj.email)}
event_badge_obj.affiliations} </span>
</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} {/if}
<!-- Badge type chip --> <!-- Badge type chip -->
@@ -205,10 +240,11 @@ let visible_badge_obj_li = $derived(
{#if is_trusted && (!is_printed || is_edit_mode)} {#if is_trusted && (!is_printed || is_edit_mode)}
<a <a
href={`/events/${event_badge_obj?.event_id}/badges/${event_badge_obj?.event_badge_id}/print`} 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 title={is_printed
? `Reprint badge (printed ${print_count}×)` ? `Reprint badge (printed ${print_count}×)`
: 'Print badge'}> : `Print badge for ${display_name}`}>
<Printer size="1em" /> <Printer size="1em" />
{#if is_printed} {#if is_printed}
<span class="text-xs font-bold" <span class="text-xs font-bold"
@@ -260,10 +296,10 @@ let visible_badge_obj_li = $derived(
{#if !is_printed || (is_trusted && is_edit_mode)} {#if !is_printed || (is_trusted && is_edit_mode)}
<button <button
type="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={() => onclick={() =>
send_review_email(event_badge_obj)} 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" /> <Mail size="1em" />
<span class="hidden sm:inline" <span class="hidden sm:inline"
>Email Link</span> >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(); handle_search_trigger();
})} })}
autocomplete="off" 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 <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} {#if $ae_loc.trusted_access}
<span class="flex flex-row flex-wrap items-center justify-center gap-1">
<select <select
bind:value={badges_loc.current.search_badge_type_code} bind:value={badges_loc.current.search_badge_type_code}
onchange={handle_search_trigger} onchange={handle_search_trigger}
@@ -125,6 +126,7 @@ function handle_qr_scan_result(event: {
<option value="affiliations_asc" <option value="affiliations_asc"
>Affiliations ASC</option> >Affiliations ASC</option>
</select> </select>
</span>
<input <input
type="search" type="search"
@@ -144,12 +146,12 @@ function handle_qr_scan_result(event: {
<input <input
type="search" type="search"
placeholder="name, email" placeholder="name, email, company, organization, etc."
id="badge_fulltext_search_qry_str" id="badge_fulltext_search_qry_str"
bind:value={badges_loc.current.fulltext_search_qry_str} bind:value={badges_loc.current.fulltext_search_qry_str}
autocomplete="off" autocomplete="off"
data-lpignore="true" 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) => { onkeyup={(e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
handle_search_trigger(); handle_search_trigger();
@@ -161,7 +163,10 @@ function handle_qr_scan_result(event: {
<div class="flex flex-row items-center justify-center gap-1"> <div class="flex flex-row items-center justify-center gap-1">
<button <button
type="submit" 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'} {#if $events_sess.badges.search_status === 'loading'}
<LoaderCircle class="mx-1 animate-spin" /> <LoaderCircle class="mx-1 animate-spin" />
{:else} {:else}
@@ -182,7 +187,10 @@ function handle_qr_scan_result(event: {
badges_loc.current.qry_affiliations = ''; badges_loc.current.qry_affiliations = '';
handle_search_trigger(); 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"> title="Clear search query">
<RemoveFormatting size="1.25em" /> <RemoveFormatting size="1.25em" />
<span class="hidden md:inline"> Clear </span> <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} {#if session_obj?.hide}
<EyeOff <EyeOff
size="1em" size="1em"
class="flex-none text-gray-400" /> class="text-gray-400" />
{:else} {:else}
<Presentation <Presentation
size="1em" size="1em"
class="text-primary-500 flex-none" /> class="text-primary-500" />
{/if} {/if}
<span class="flex-1">{session_obj?.name}</span> <span class="flex-1">{session_obj?.name}</span>