feat(events): collapse session description by default with toggle
This commit is contained in:
@@ -38,6 +38,9 @@
|
|||||||
$events_sess.pres_mgmt.show_modal__presenter_agree = false;
|
$events_sess.pres_mgmt.show_modal__presenter_agree = false;
|
||||||
$events_sess.pres_mgmt.show_content__presenter_start = false;
|
$events_sess.pres_mgmt.show_content__presenter_start = false;
|
||||||
|
|
||||||
|
// Description expand/collapse — collapsed by default (descriptions can be long)
|
||||||
|
let desc_expanded = $state(false);
|
||||||
|
|
||||||
// QR Code Generation Logic
|
// QR Code Generation Logic
|
||||||
$events_sess.pres_mgmt.session__updated_on = null;
|
$events_sess.pres_mgmt.session__updated_on = null;
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
@@ -171,12 +174,29 @@
|
|||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Description: shown only when present —
|
<!-- Description: shown only when present. Collapsed by default (can be long). -->
|
||||||
long descriptions are scrollable via the parent container -->
|
|
||||||
{#if $lq__event_session_obj?.description}
|
{#if $lq__event_session_obj?.description}
|
||||||
<div class="rounded-lg border border-surface-200-800 bg-surface-50-900 px-4 py-3">
|
<div class="rounded-lg border border-surface-200-800 bg-surface-50-900 px-4 py-3">
|
||||||
<span class="text-xs font-bold uppercase tracking-wide opacity-40 block mb-1">Description</span>
|
<button
|
||||||
<p class="whitespace-pre-wrap text-sm leading-relaxed">{$lq__event_session_obj.description}</p>
|
type="button"
|
||||||
|
class="w-full flex items-center justify-between gap-2 text-left focus-visible:ring-2 focus-visible:ring-primary-500 rounded"
|
||||||
|
onclick={() => desc_expanded = !desc_expanded}
|
||||||
|
aria-expanded={desc_expanded}
|
||||||
|
>
|
||||||
|
<span class="text-xs font-bold uppercase tracking-wide opacity-40">Description</span>
|
||||||
|
<span class="text-xs opacity-40 shrink-0">
|
||||||
|
{#if desc_expanded}
|
||||||
|
<span class="fas fa-chevron-up" aria-hidden="true"></span>
|
||||||
|
<span class="sr-only">Collapse description</span>
|
||||||
|
{:else}
|
||||||
|
<span class="fas fa-chevron-down" aria-hidden="true"></span>
|
||||||
|
<span class="sr-only">Expand description</span>
|
||||||
|
{/if}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
{#if desc_expanded}
|
||||||
|
<p class="whitespace-pre-wrap text-sm leading-relaxed mt-2">{$lq__event_session_obj.description}</p>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user