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}
<!-- Metadata Section: Session identity card — name, time, room, host, description -->
<div
class="bg-surface-50-950 border-surface-200-800 rounded-xl border p-4 shadow-sm">
class="">
<Session_view
{lq__event_presenter_obj}
{lq__event_session_obj}

View File

@@ -136,11 +136,23 @@ $effect(() => {
Show: name, time, room, host, description. Hide admin noise unless edit_mode.
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 -->
<div
class="border-surface-200-800 bg-surface-50-900 overflow-hidden rounded-xl border shadow-sm">
<div class="flex flex-col gap-3 px-4 pt-4 pb-3">
class="
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.
Only rendered once the async URL is resolved (string), never while
it is still the boolean `true` loading placeholder. -->
@@ -180,26 +192,25 @@ $effect(() => {
<!-- Session Name: the primary identity check -->
{#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}
<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
object_type="event_session"
object_id={$lq__event_session_obj.id}
@@ -216,8 +227,9 @@ $effect(() => {
<span class="badge preset-tonal-surface mt-1 text-xs"
>code: {$lq__event_session_obj.code}</span>
</Element_ae_obj_field_editor>
</div>
{/if}
</div>
{:else}
<!-- Skeleton placeholder while LiveQuery resolves -->
<!-- <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 -->
{#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
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
@@ -306,7 +326,7 @@ $effect(() => {
</div>
{/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.
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. -->
@@ -340,12 +360,14 @@ $effect(() => {
</span>
{/if}
</div>
</div>
{:else}
<div
class="bg-surface-200-800 h-5 w-1/2 animate-pulse rounded-full">
</div>
{/if}
</div>
<!-- </div> -->
</div>
<!-- Host / POC: visible when assigned and layout config allows -->