Things are looking and working better. Note the Modal size is set to "". This allows it to stretch to the full width of the screen.

This commit is contained in:
Scott Idem
2025-10-13 18:17:32 -04:00
parent 8f7c1bf428
commit 0bc04bf899
5 changed files with 77 additions and 21 deletions

View File

@@ -437,15 +437,13 @@ function handle_ws_recv(ws_recv_status: any) {
// NOTE: This is not finished yet.
if (obj_type == 'event_file') {
// We are assuming this is for digital posters and needs to be opened in the modal.
$events_sess.launcher.modal__open_event_file_id = null;
clearInterval(idle_timer_interval);
$events_slct.event_file_id = obj_id;
let modal_title = null;
if (!modal_title) {
modal_title = '*'; // event_file_obj.filename;
}
$events_sess.launcher.modal__title = modal_title;
$events_sess.launcher.modal__title = $events_sess.launcher.modal__title ?? '*';
$events_sess.launcher.modal__open_event_file_id = $events_slct.event_file_id;
// $events_sess.launcher.modal__event_file_obj = event_file_obj;
@@ -1105,19 +1103,24 @@ $effect(() => {
<!-- Main modal -->
<!-- NOTE: The modal size is intentionally set to "". This makes it undefined and allows the modal to be as large as the content. -->
<!-- bind:open={$events_sess.launcher.modal__open_event_file_id} -->
<!-- {#if $events_sess.launcher.modal__open_event_file_id} -->
<!-- **NOTE:** The modal size is intentionally set to "". This makes it undefined and allows the modal to be as large as the content. **NOTE** -->
<!-- title={$events_sess.launcher?.modal__title} -->
<Modal
title={$events_sess.launcher?.modal__title}
open={$events_sess.launcher?.modal__open_event_file_id}
autoclose={false}
placement="top-center"
size=""
class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y m-0"
dialogClass="fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-0 flex"
classHeader="px-1 py-0 md:px-1 md:py-0 absolute top-0 start-0 end-0 bg-gray-200 dark:bg-gray-800 opacity-50 hover:opacity-75"
bodyClass='p-0 flex-1 overflow-y-auto overscroll-contain'
classBody="flex flex-col items-center p-0 md:px-0 py-0"
class="
bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200
rounded-lg border-gray-200 dark:border-gray-700
divide-y divide-gray-200 dark:divide-gray-700 shadow-md
relative
flex flex-col
"
bodyClass='p-0 overflow-y-auto overscroll-contain'
headerClass='p-1 md:p-2 flex flex-row items-center justify-between'
footerClass='text-center'
onclose={async () => {
$events_sess.launcher.modal__open_event_file_id = null;
if ($events_loc.launcher.controller == 'local_push' && $events_sess.launcher.ws_connect_status == 'connected') {
@@ -1135,6 +1138,26 @@ $effect(() => {
}}
>
{#snippet header()}
<!-- <div class="flex flex-row items-center justify-between"> -->
<h3 class="text-lg font-semibold">
{$events_sess.launcher?.modal__title ?? 'Digital Poster Display'}
</h3>
<button
type="button"
onclick={() => {
$events_sess.launcher.modal__open_event_file_id = null;
if ($events_loc.launcher.controller == 'local_push' && $events_sess.launcher.ws_connect_status == 'connected') {
}
}}
title="Close Modal"
>
<span class="fas fa-times m-1"></span>
<span class="hidden ">Close</span>
</button>
<!-- </div> -->
{/snippet}
<!-- <svelte:fragment slot="header">
<div class="flex flex-row items-center justify-between">
<h3 class="text-lg font-semibold">
@@ -1156,7 +1179,7 @@ $effect(() => {
<span class="fas fa-times m-1"></span>
Close Remote Poster Display Only
</button>
Open: {$ae_api.base_url} {$events_sess.launcher.modal__open_event_file_id}
<!-- Open: {$ae_api.base_url} {$events_sess.launcher.modal__open_event_file_id} -->
<!-- /event/file/{$events_slct.event_file_obj.event_file_id_random}/download?filename={$events_slct.event_file_obj.filename}&x_no_account_id_token=direct-download -->
<!-- <span class="aspect-9/16 max-h-96"> -->
{#if $events_sess.launcher.modal__open_event_file_id}