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

polish(pres_mgmt): consistent agree/consent modals + contrast + layout fixes

Browse Source 
- Standardize all 3 consent modals (presenter × 2, session POC): same
  placement="top-center" size="lg", no custom height hacks, let Flowbite's
  native <dialog> handle scrolling; consistent footer Close button with X icon
- Modal titles now include person name; removes the double-header (inner <h2>
  in both form components was redundant with the modal title)
- Agreement text wrapper: bg-surface-100-900 → prose dark:prose-invert +
  bg-white dark:bg-gray-900 for proper dark-mode contrast on CMS HTML content
- Section/header bar changes color green when agreed (red when not), with
  check icon; "Change to not agreed?" button style aligned between both forms
- Remove pb-16 from pres_mgmt layout (leftover from defunct sticky action bar)
- Add @source for flowbite-svelte/dist so backdrop:bg-gray-900/50 is generated
  (modal backdrop dim was never active before — Tailwind wasn't scanning it)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-06-23 16:47:46 -04:00
parent 536b445950
commit 7e255a7845
7 changed files with 60 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app.css
View File

@@ -46,6 +46,7 @@ html.light {
@import './styles/ae-firefly-bgh.css';
@source '../node_modules/@skeletonlabs/skeleton-svelte/dist';
@source '../node_modules/flowbite-svelte/dist';
/* Add your theme import for your theme: "osit-custom-theme" here */
/* @plugin '@tailwindcss/forms'; */

2
src/routes/events/[event_id]/(pres_mgmt)/+layout.svelte
View File

@@ -3,6 +3,6 @@ let { children } = $props();
</script>
<section
class="ae_events_pres_mgmt mx-auto flex w-full max-w-7xl flex-col gap-1 px-2 py-1 pb-16">
class="ae_events_pres_mgmt mx-auto flex w-full max-w-7xl flex-col gap-1 px-2 py-1">
{@render children?.()}
</section>

14
src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/+page.svelte
View File

@@ -534,24 +534,22 @@ let presenter_sign_in_url = $derived((() => {
{/if}
</div>
<!-- Main modal -->
<!-- Presenter agree modal -->
<Modal
title="{$lq__event_presenter_obj?.full_name} Presenter Consent and Release and Terms and Conditions"
title="{$lq__event_presenter_obj?.full_name} — Presenter Agreement"
bind:open={$events_sess.pres_mgmt.show_modal__presenter_agree}
autoclose={false}
placement="top-center"
class="relative mx-auto flex w-full flex-col divide-y shadow-md">
size="lg">
<Comp_event_presenter_form_agree {lq__event_presenter_obj} />
{#snippet footer()}
<div class="w-full text-center">
<button
type="button"
onclick={() => {
$events_sess.pres_mgmt.show_modal__presenter_agree = false;
}}
class="btn btn-sm preset-tonal-warning hover:preset-tonal-warning border-warning-500 border">
<X size="1em" class="m-1" />
onclick={() => ($events_sess.pres_mgmt.show_modal__presenter_agree = false)}
class="btn preset-tonal-warning border border-warning-500">
<X size="1em" class="mr-1" />
Close
</button>
</div>

26
src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/ae_comp__event_presenter_form_agree.svelte
View File

@@ -155,17 +155,6 @@ async function handle_update__event_presenter({
</script>
{#if $lq__event_presenter_obj}
<h2 class="h3">
<span class="text-base">Presenter Agreement for:</span><br />
<strong
>{$lq__event_presenter_obj?.full_name}
{#if $lq__event_presenter_obj?.person_primary_email}
({$lq__event_presenter_obj?.person_primary_email ??
'-- not set --'})
{/if}
</strong>
</h2>
{#if !$lq__event_presenter_obj?.agree}
<div class="text-center text-red-500">
<div class="text-red-500">
@@ -181,7 +170,7 @@ async function handle_update__event_presenter({
{/if}
<div
class="bg-surface-100-900 border-surface-200-800 space-y-4 rounded-lg border p-4">
class="border-surface-200-800 prose dark:prose-invert max-w-none space-y-4 rounded-lg border bg-white p-4 dark:bg-gray-900">
<Element_data_store
ds_code="event_presenter_agree_text"
ds_type="html"
@@ -189,9 +178,18 @@ async function handle_update__event_presenter({
</div>
<section
class="space-y-2 rounded-md border border-red-200 bg-red-100 text-lg">
class="space-y-2 rounded-md border text-lg"
class:border-red-200={!$lq__event_presenter_obj?.agree}
class:bg-red-100={!$lq__event_presenter_obj?.agree}
class:border-green-200={$lq__event_presenter_obj?.agree}
class:bg-green-50={$lq__event_presenter_obj?.agree}>
<!-- Highlight the persons name, email, and that whole line. -->
<p class="preset-tonal-warning rounded-t-md p-2 text-lg">
<p class="rounded-t-md p-2 text-lg"
class:preset-tonal-warning={!$lq__event_presenter_obj?.agree}
class:preset-tonal-success={$lq__event_presenter_obj?.agree}>
{#if $lq__event_presenter_obj?.agree}
<Check size="1em" class="mr-1 inline text-green-700" />
{/if}
<strong
>{$lq__event_presenter_obj.full_name} ({$lq__event_presenter_obj.email})</strong>
agrees to the following terms and conditions for the presentation:

22
src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/+page.svelte
View File

@@ -16,6 +16,7 @@ import {
Info,
LoaderCircle,
Upload,
X,
} from '@lucide/svelte';
import { Modal } from 'flowbite-svelte';
import { ae_util } from '$lib/ae_utils/ae_utils';
@@ -291,17 +292,24 @@ if (!$events_sess.pres_mgmt) $events_sess.pres_mgmt = {};
{/if}
</div>
<!-- Modals -->
<!-- Presenter agree modal (opened from the presenter list) -->
<Modal
title="{$lq__event_presenter_obj?.full_name} Presenter Consent"
title="{$lq__event_presenter_obj?.full_name} — Presenter Agreement"
bind:open={$events_sess.pres_mgmt.show_modal__presenter_agree}
autoclose={false}>
autoclose={false}
placement="top-center"
size="lg">
{@const FormAgreeComp = Comp_event_presenter_form_agree as any}
<FormAgreeComp {lq__event_presenter_obj} />
{#snippet footer()}
<button
onclick={() =>
($events_sess.pres_mgmt.show_modal__presenter_agree = false)}
class="btn preset-tonal-warning">Close</button>
<div class="w-full text-center">
<button
type="button"
onclick={() => ($events_sess.pres_mgmt.show_modal__presenter_agree = false)}
class="btn preset-tonal-warning border border-warning-500">
<X size="1em" class="mr-1" />
Close
</button>
</div>
{/snippet}
</Modal>

30
src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/ae_comp__event_session_poc_form_agree.svelte
View File

@@ -127,19 +127,6 @@ async function handle_submit_form(event: SubmitEvent) {
</script>
{#if lq__event_session_obj}
<h2 class="h3">
<span class="text-base"
>{pres_mgmt_loc.current.label__session_poc_name} Agreement for:</span
><br />
<strong
>{lq__event_session_obj?.poc_person_full_name}
{#if lq__event_session_obj?.poc_person_primary_email}
({lq__event_session_obj?.poc_person_primary_email ??
'-- not set --'})
{/if}
</strong>
</h2>
{#if !lq__event_session_obj?.poc_agree}
<div class="text-center text-red-500">
<div class="text-red-500">
@@ -154,7 +141,7 @@ async function handle_submit_form(event: SubmitEvent) {
{/if}
<div
class="bg-surface-100-900 border-surface-200-800 space-y-4 rounded-lg border p-4">
class="border-surface-200-800 prose dark:prose-invert max-w-none space-y-4 rounded-lg border bg-white p-4 dark:bg-gray-900">
<Element_data_store
ds_code="event_session_poc_agree_text"
ds_type="html"
@@ -162,9 +149,18 @@ async function handle_submit_form(event: SubmitEvent) {
</div>
<section
class="space-y-2 rounded-md border border-red-200 bg-red-100 text-lg">
class="space-y-2 rounded-md border text-lg"
class:border-red-200={!lq__event_session_obj?.poc_agree}
class:bg-red-100={!lq__event_session_obj?.poc_agree}
class:border-green-200={lq__event_session_obj?.poc_agree}
class:bg-green-50={lq__event_session_obj?.poc_agree}>
<!-- Highlight the persons name, email, and that whole line. -->
<p class="preset-tonal-warning rounded-t-md p-2 text-lg">
<p class="rounded-t-md p-2 text-lg"
class:preset-tonal-warning={!lq__event_session_obj?.poc_agree}
class:preset-tonal-success={lq__event_session_obj?.poc_agree}>
{#if lq__event_session_obj?.poc_agree}
<Check size="1em" class="mr-1 inline text-green-700" />
{/if}
<strong
>{lq__event_session_obj.poc_person_full_name} ({lq__event_session_obj.poc_person_primary_email})</strong>
agrees to the following terms and conditions for the presentation:
@@ -395,7 +391,7 @@ async function handle_submit_form(event: SubmitEvent) {
// return update_result;
});
}}
class="btn btn-lg preset-tonal-success border-success-500 hover:preset-filled-warning-500 m-2 border">
class="btn btn-lg preset-tonal-warning border-warning-500 hover:preset-filled-error-500 m-2 border">
<X size="1em" class="m-1 text-orange-500" />
Change to not agreed?

18
src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/ae_comp__session_view.svelte
View File

@@ -530,17 +530,23 @@ async function send_poc_email_link() {
</button>
<Modal
title="{pres_mgmt_loc.current.label__session_poc_name}'s Consent and Release"
title="{$lq__event_session_obj?.poc_person_full_name} — {pres_mgmt_loc.current.label__session_poc_name} Agreement"
bind:open={$events_sess.pres_mgmt.show_modal__session_poc_agree}
autoclose={false}
placement="top-center">
placement="top-center"
size="lg">
<Comp_event_session_poc_form_agree
lq__event_session_obj={$lq__event_session_obj} />
{#snippet footer()}
<button
onclick={() =>
($events_sess.pres_mgmt.show_modal__session_poc_agree = false)}
class="btn preset-tonal-warning">Close</button>
<div class="w-full text-center">
<button
type="button"
onclick={() => ($events_sess.pres_mgmt.show_modal__session_poc_agree = false)}
class="btn preset-tonal-warning border border-warning-500">
<X size="1em" class="mr-1" />
Close
</button>
</div>
{/snippet}
</Modal>
{/if}