Cleaning up the styles for the Session related content.

This commit is contained in:
Scott Idem
2026-05-15 14:44:57 -04:00
parent 631a77158c
commit 21a44f96fa
2 changed files with 48 additions and 26 deletions

View File

@@ -209,7 +209,7 @@ if (!$events_sess.pres_mgmt) $events_sess.pres_mgmt = {};
{:else} {:else}
<!-- Metadata Section: Session identity card — name, time, room, host, description --> <!-- Metadata Section: Session identity card — name, time, room, host, description -->
<div <div
class="bg-surface-50-950 border-surface-200-800 rounded-xl border p-4 shadow-sm"> class="">
<Session_view <Session_view
{lq__event_presenter_obj} {lq__event_presenter_obj}
{lq__event_session_obj} {lq__event_session_obj}

View File

@@ -136,11 +136,23 @@ $effect(() => {
Show: name, time, room, host, description. Hide admin noise unless edit_mode. Show: name, time, room, host, description. Hide admin noise unless edit_mode.
Section 508: all interactive elements labelled, focus rings, sufficient contrast. Section 508: all interactive elements labelled, focus rings, sufficient contrast.
--> -->
<section class="space-y-3"> <section class="space-y-2">
<!-- SESSION HERO: Name + Schedule + Room --> <!-- SESSION HERO: Name + Schedule + Room -->
<div <div
class="border-surface-200-800 bg-surface-50-900 overflow-hidden rounded-xl border shadow-sm"> class="
<div class="flex flex-col gap-3 px-4 pt-4 pb-3"> border-surface-200-800 bg-surface-50-900 overflow-hidden rounded-xl border shadow-sm
flex flex-col
items-center justify-center
gap-3 px-4 py-2
transition-all
w-full
"
>
<!-- <div class="
"
> -->
<!-- QR code: floats top-right, compact by default, toggle to enlarge. <!-- QR code: floats top-right, compact by default, toggle to enlarge.
Only rendered once the async URL is resolved (string), never while Only rendered once the async URL is resolved (string), never while
it is still the boolean `true` loading placeholder. --> it is still the boolean `true` loading placeholder. -->
@@ -180,26 +192,25 @@ $effect(() => {
<!-- Session Name: the primary identity check --> <!-- Session Name: the primary identity check -->
{#if $lq__event_session_obj} {#if $lq__event_session_obj}
<div>
{#if $ae_loc.edit_mode}
<Element_ae_obj_field_editor
object_type={'event_session'}
object_id={$lq__event_session_obj.id}
field_name={'name'}
field_type={'text'}
current_value={$lq__event_session_obj.name}
on_success={() =>
events_func.load_ae_obj_id__event_session({
api_cfg: $ae_api,
event_session_id: $lq__event_session_obj.id
})}>
<div class="text-lg leading-snug font-bold">
{$lq__event_session_obj.name}
</div>
</Element_ae_obj_field_editor>
{/if}
{#if $ae_loc.edit_mode} {#if $ae_loc.edit_mode}
<div>
<Element_ae_obj_field_editor
object_type={'event_session'}
object_id={$lq__event_session_obj.id}
field_name={'name'}
field_type={'text'}
current_value={$lq__event_session_obj.name}
on_success={() =>
events_func.load_ae_obj_id__event_session({
api_cfg: $ae_api,
event_session_id: $lq__event_session_obj.id
})}>
<div class="text-lg leading-snug font-bold">
{$lq__event_session_obj.name}
</div>
</Element_ae_obj_field_editor>
<Element_ae_obj_field_editor <Element_ae_obj_field_editor
object_type="event_session" object_type="event_session"
object_id={$lq__event_session_obj.id} object_id={$lq__event_session_obj.id}
@@ -216,8 +227,9 @@ $effect(() => {
<span class="badge preset-tonal-surface mt-1 text-xs" <span class="badge preset-tonal-surface mt-1 text-xs"
>code: {$lq__event_session_obj.code}</span> >code: {$lq__event_session_obj.code}</span>
</Element_ae_obj_field_editor> </Element_ae_obj_field_editor>
</div>
{/if} {/if}
</div>
{:else} {:else}
<!-- Skeleton placeholder while LiveQuery resolves --> <!-- Skeleton placeholder while LiveQuery resolves -->
<!-- <div class="bg-surface-200-800 h-7 w-2/3 animate-pulse rounded"> <!-- <div class="bg-surface-200-800 h-7 w-2/3 animate-pulse rounded">
@@ -226,7 +238,15 @@ $effect(() => {
<!-- Date/Time + Room as info chips --> <!-- Date/Time + Room as info chips -->
{#if $lq__event_session_obj} {#if $lq__event_session_obj}
<div class="flex flex-wrap items-center gap-2"> <div class="
flex flex-wrap
items-center justify-center
gap-2
transition-all
max-w-xl
"
>
<div class="flex flex-wrap items-center gap-1">
<span <span
class="bg-primary-500/10 text-primary-700 dark:text-primary-300 inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-semibold transition-colors duration-200"> class="bg-primary-500/10 text-primary-700 dark:text-primary-300 inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-semibold transition-colors duration-200">
<button <button
@@ -306,7 +326,7 @@ $effect(() => {
</div> </div>
{/if} {/if}
<div class="flex flex-wrap items-center gap-2"> <div class="flex flex-wrap items-center gap-1">
<!-- Room/Location: editable in edit_mode via select from this event's locations. <!-- Room/Location: editable in edit_mode via select from this event's locations.
WHY: event_location_id is a FK — staff need to pick from known rooms, WHY: event_location_id is a FK — staff need to pick from known rooms,
not type a raw UUID. The liveQuery above loads locations for this event. --> not type a raw UUID. The liveQuery above loads locations for this event. -->
@@ -340,12 +360,14 @@ $effect(() => {
</span> </span>
{/if} {/if}
</div> </div>
</div>
{:else} {:else}
<div <div
class="bg-surface-200-800 h-5 w-1/2 animate-pulse rounded-full"> class="bg-surface-200-800 h-5 w-1/2 animate-pulse rounded-full">
</div> </div>
{/if} {/if}
</div> <!-- </div> -->
</div> </div>
<!-- Host / POC: visible when assigned and layout config allows --> <!-- Host / POC: visible when assigned and layout config allows -->