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:
@@ -437,15 +437,13 @@ function handle_ws_recv(ws_recv_status: any) {
|
|||||||
|
|
||||||
// NOTE: This is not finished yet.
|
// NOTE: This is not finished yet.
|
||||||
if (obj_type == 'event_file') {
|
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);
|
clearInterval(idle_timer_interval);
|
||||||
$events_slct.event_file_id = obj_id;
|
$events_slct.event_file_id = obj_id;
|
||||||
|
|
||||||
|
$events_sess.launcher.modal__title = $events_sess.launcher.modal__title ?? '*';
|
||||||
let modal_title = null;
|
|
||||||
if (!modal_title) {
|
|
||||||
modal_title = '*'; // event_file_obj.filename;
|
|
||||||
}
|
|
||||||
$events_sess.launcher.modal__title = modal_title;
|
|
||||||
|
|
||||||
$events_sess.launcher.modal__open_event_file_id = $events_slct.event_file_id;
|
$events_sess.launcher.modal__open_event_file_id = $events_slct.event_file_id;
|
||||||
// $events_sess.launcher.modal__event_file_obj = event_file_obj;
|
// $events_sess.launcher.modal__event_file_obj = event_file_obj;
|
||||||
@@ -1105,19 +1103,24 @@ $effect(() => {
|
|||||||
|
|
||||||
|
|
||||||
<!-- Main modal -->
|
<!-- 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. -->
|
<!-- **NOTE:** The modal size is intentionally set to "". This makes it undefined and allows the modal to be as large as the content. **NOTE** -->
|
||||||
<!-- bind:open={$events_sess.launcher.modal__open_event_file_id} -->
|
<!-- title={$events_sess.launcher?.modal__title} -->
|
||||||
<!-- {#if $events_sess.launcher.modal__open_event_file_id} -->
|
|
||||||
<Modal
|
<Modal
|
||||||
title={$events_sess.launcher?.modal__title}
|
|
||||||
open={$events_sess.launcher?.modal__open_event_file_id}
|
open={$events_sess.launcher?.modal__open_event_file_id}
|
||||||
autoclose={false}
|
autoclose={false}
|
||||||
|
placement="top-center"
|
||||||
size=""
|
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"
|
class="
|
||||||
dialogClass="fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-0 flex"
|
bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200
|
||||||
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"
|
rounded-lg border-gray-200 dark:border-gray-700
|
||||||
bodyClass='p-0 flex-1 overflow-y-auto overscroll-contain'
|
divide-y divide-gray-200 dark:divide-gray-700 shadow-md
|
||||||
classBody="flex flex-col items-center p-0 md:px-0 py-0"
|
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 () => {
|
onclose={async () => {
|
||||||
$events_sess.launcher.modal__open_event_file_id = null;
|
$events_sess.launcher.modal__open_event_file_id = null;
|
||||||
if ($events_loc.launcher.controller == 'local_push' && $events_sess.launcher.ws_connect_status == 'connected') {
|
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">
|
<!-- <svelte:fragment slot="header">
|
||||||
<div class="flex flex-row items-center justify-between">
|
<div class="flex flex-row items-center justify-between">
|
||||||
<h3 class="text-lg font-semibold">
|
<h3 class="text-lg font-semibold">
|
||||||
@@ -1156,7 +1179,7 @@ $effect(() => {
|
|||||||
<span class="fas fa-times m-1"></span>
|
<span class="fas fa-times m-1"></span>
|
||||||
Close Remote Poster Display Only
|
Close Remote Poster Display Only
|
||||||
</button>
|
</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 -->
|
<!-- /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"> -->
|
<!-- <span class="aspect-9/16 max-h-96"> -->
|
||||||
{#if $events_sess.launcher.modal__open_event_file_id}
|
{#if $events_sess.launcher.modal__open_event_file_id}
|
||||||
|
|||||||
@@ -60,7 +60,6 @@ import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_ev
|
|||||||
import { events_func } from '$lib/ae_events_functions';
|
import { events_func } from '$lib/ae_events_functions';
|
||||||
|
|
||||||
import Element_ae_crud from '$lib/element_ae_crud.svelte';
|
import Element_ae_crud from '$lib/element_ae_crud.svelte';
|
||||||
import { modal } from 'flowbite-svelte';
|
|
||||||
|
|
||||||
|
|
||||||
// *** Functions and Logic
|
// *** Functions and Logic
|
||||||
@@ -384,12 +383,13 @@ async function handle_open_file() {
|
|||||||
>
|
>
|
||||||
{#if (screen_saver_exts.includes(event_file_obj.extension))}
|
{#if (screen_saver_exts.includes(event_file_obj.extension))}
|
||||||
<span class="fas fa-chart-bar m-1" class:hidden="{hide_launch_icon}"></span>
|
<span class="fas fa-chart-bar m-1" class:hidden="{hide_launch_icon}"></span>
|
||||||
Open Poster {event_file_id}
|
Open Poster
|
||||||
|
<!-- {event_file_id} -->
|
||||||
{:else}
|
{:else}
|
||||||
<span class="fas fa-paper-plane m-1" class:hidden="{hide_launch_icon}"></span>
|
<span class="fas fa-paper-plane m-1" class:hidden="{hide_launch_icon}"></span>
|
||||||
{ae_util.shorten_filename({filename: event_file_obj.filename, max_length: max_filename_length})}
|
{ae_util.shorten_filename({filename: event_file_obj.filename, max_length: max_filename_length})}
|
||||||
{/if}
|
{/if}
|
||||||
{$events_sess.launcher.modal__open_event_file_id ?? '-- not set --'}
|
<!-- {$events_sess.launcher.modal__open_event_file_id ?? '-- not set --'} -->
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -85,6 +85,10 @@ let lq__event_file_obj_li = $derived(liveQuery(async () => {
|
|||||||
session_type={event_file_obj?.event_session_type_code ?? 'oral'}
|
session_type={event_file_obj?.event_session_type_code ?? 'oral'}
|
||||||
open_method={event_file_obj?.event_session_type_code == 'poster' ? 'modal' : null}
|
open_method={event_file_obj?.event_session_type_code == 'poster' ? 'modal' : null}
|
||||||
modal_title={lq__event_presenter_obj?.event_presentation_name}
|
modal_title={lq__event_presenter_obj?.event_presentation_name}
|
||||||
|
|
||||||
|
bind:modal__title={$events_sess.launcher.modal__title}
|
||||||
|
bind:modal__open_event_file_id={$events_sess.launcher.modal__open_event_file_id}
|
||||||
|
bind:modal__event_file_obj={$events_sess.launcher.modal__event_file_obj}
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
|
|||||||
@@ -2,9 +2,13 @@
|
|||||||
interface Props {
|
interface Props {
|
||||||
// export let slct_event_presenter_id: string;
|
// export let slct_event_presenter_id: string;
|
||||||
lq__event_presenter_obj: any; // This is not actually the LiveQuery object. This was pulled from the list of presenters for a presentation. With Svelte 5 this should not matter.
|
lq__event_presenter_obj: any; // This is not actually the LiveQuery object. This was pulled from the list of presenters for a presentation. With Svelte 5 this should not matter.
|
||||||
|
hide_name?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
let { lq__event_presenter_obj }: Props = $props();
|
let {
|
||||||
|
lq__event_presenter_obj,
|
||||||
|
hide_name = false
|
||||||
|
}: Props = $props();
|
||||||
|
|
||||||
import type { key_val } from '$lib/ae_stores';
|
import type { key_val } from '$lib/ae_stores';
|
||||||
// import { ae_util } from '$lib/ae_utils/ae_utils';
|
// import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||||
@@ -39,7 +43,9 @@ let lq__event_file_obj_li = $derived(liveQuery(async () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<strong>
|
<strong
|
||||||
|
class:hidden={hide_name}
|
||||||
|
>
|
||||||
{#if lq__event_presenter_obj?.given_name && lq__event_presenter_obj?.given_name != 'Group'}
|
{#if lq__event_presenter_obj?.given_name && lq__event_presenter_obj?.given_name != 'Group'}
|
||||||
<span class="fas fa-user"></span>
|
<span class="fas fa-user"></span>
|
||||||
{lq__event_presenter_obj?.full_name}
|
{lq__event_presenter_obj?.full_name}
|
||||||
|
|||||||
@@ -404,9 +404,30 @@ let ae_promises: key_val = $state({});
|
|||||||
|
|
||||||
<span class="event_presentation_name grow">{event_presentation_obj?.name}</span>
|
<span class="event_presentation_name grow">{event_presentation_obj?.name}</span>
|
||||||
<!-- </div> -->
|
<!-- </div> -->
|
||||||
|
|
||||||
|
<!-- Yes, this is kind of inefficient, but it works for now. -->
|
||||||
|
{#if $lq__event_presenter_obj_li}
|
||||||
|
{#each $lq__event_presenter_obj_li as event_presenter_obj, index}
|
||||||
|
{#if event_presenter_obj.event_presentation_id_random == event_presentation_obj.event_presentation_id_random}
|
||||||
|
<span class="event_presentation_single_presenter italic text-sm text-gray-500">
|
||||||
|
{#if $lq__event_presenter_obj_li[index]?.given_name && $lq__event_presenter_obj_li[index]?.given_name != 'Group'}
|
||||||
|
<span class="fas fa-user"></span>
|
||||||
|
{$lq__event_presenter_obj_li[index]?.full_name}
|
||||||
|
{:else if $lq__event_presenter_obj_li[index]?.given_name == 'Group'}
|
||||||
|
<span class="fas fa-users"></span>
|
||||||
|
{$lq__event_presenter_obj_li[index]?.affiliations}
|
||||||
|
{:else}
|
||||||
|
--not set--
|
||||||
|
{/if }
|
||||||
|
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- The presenter list -->
|
<!-- The presenter list -->
|
||||||
|
|
||||||
{#if $lq__event_presenter_obj_li && $lq__event_presenter_obj_li.length}
|
{#if $lq__event_presenter_obj_li && $lq__event_presenter_obj_li.length}
|
||||||
<ul class="event_presentation_presenter_list">
|
<ul class="event_presentation_presenter_list">
|
||||||
{#each $lq__event_presenter_obj_li as event_presenter_obj, index}
|
{#each $lq__event_presenter_obj_li as event_presenter_obj, index}
|
||||||
@@ -424,12 +445,14 @@ let ae_promises: key_val = $state({});
|
|||||||
{#if type_code == 'poster'}
|
{#if type_code == 'poster'}
|
||||||
<Launcher_presenter_view_posters
|
<Launcher_presenter_view_posters
|
||||||
lq__event_presenter_obj={event_presenter_obj}
|
lq__event_presenter_obj={event_presenter_obj}
|
||||||
|
hide_name={true}
|
||||||
/>
|
/>
|
||||||
{:else}
|
{:else}
|
||||||
<Launcher_presenter_view
|
<Launcher_presenter_view
|
||||||
lq__event_presenter_obj={event_presenter_obj}
|
lq__event_presenter_obj={event_presenter_obj}
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
|
<!-- {index} -->
|
||||||
</li>
|
</li>
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
|
|||||||
Reference in New Issue
Block a user