Better scaling as the width changes

This commit is contained in:
Scott Idem
2024-09-23 16:42:53 -04:00
parent 80b394f16b
commit bd2583fde3
5 changed files with 71 additions and 23 deletions

View File

@@ -281,6 +281,7 @@ export function sync_config__event_pres_mgmt(
pres_mgmt_cfg_local.hide__session_location = pres_mgmt_cfg_remote?.hide__session_location ?? false; pres_mgmt_cfg_local.hide__session_location = pres_mgmt_cfg_remote?.hide__session_location ?? false;
pres_mgmt_cfg_local.hide__session_msg = pres_mgmt_cfg_remote?.hide__session_msg ?? false; pres_mgmt_cfg_local.hide__session_msg = pres_mgmt_cfg_remote?.hide__session_msg ?? false;
// pres_mgmt_cfg_local.hide__session_li_poc_field = pres_mgmt_cfg_remote?.hide__session_li_poc_field ?? false; // This should still allow the POC name to be shown.
pres_mgmt_cfg_local.hide__session_poc_profile = pres_mgmt_cfg_remote?.hide__session_poc_profile ?? false; // This should still allow the POC name to be shown. pres_mgmt_cfg_local.hide__session_poc_profile = pres_mgmt_cfg_remote?.hide__session_poc_profile ?? false; // This should still allow the POC name to be shown.
pres_mgmt_cfg_local.hide__session_poc_biography = pres_mgmt_cfg_remote?.hide__session_poc_biography ?? false; // New and in progress pres_mgmt_cfg_local.hide__session_poc_biography = pres_mgmt_cfg_remote?.hide__session_poc_biography ?? false; // New and in progress
pres_mgmt_cfg_local.hide__session_poc_profile_pic = pres_mgmt_cfg_remote?.hide__session_poc_profile_pic ?? false; // New and in progress pres_mgmt_cfg_local.hide__session_poc_profile_pic = pres_mgmt_cfg_remote?.hide__session_poc_profile_pic ?? false; // New and in progress

View File

@@ -528,7 +528,7 @@ onMount(() => {
</strong> </strong>
{ae_util.iso_datetime_formatter(event_file_obj.created_on, 'date_iso')} {ae_util.iso_datetime_formatter(event_file_obj.created_on, 'date_iso')}
at at
<strong>{ae_util.iso_datetime_formatter(event_file_obj.created_on, 'time_long')}</strong> <strong>{ae_util.iso_datetime_formatter(event_file_obj.created_on, 'time_12_short_no_leading')}</strong>
<!-- {event_file_obj.updated_on} --> <!-- {event_file_obj.updated_on} -->
{:else} {:else}
<!-- <span class="fas fa-calendar-day mx-1"></span> --> <!-- <span class="fas fa-calendar-day mx-1"></span> -->

View File

@@ -41,8 +41,17 @@ let ae_triggers: key_val = {};
// Functions and Logic // Functions and Logic
</script> </script>
<!-- xs:max-w-sm lg:max-w-100 -->
<section class="ae_comp event_session_obj_li {container_class_li}"> <section
class="
ae_comp event_session_obj_li
sm:bg-red-100 md:bg-yellow-100 lg:bg-white
py-2 space-y-2
min-w-full
w-full
container overflow-x-scroll {container_class_li}
"
>
{#if $lq__event_session_obj_li?.length} {#if $lq__event_session_obj_li?.length}
@@ -50,7 +59,8 @@ let ae_triggers: key_val = {};
<!-- {#if $events_slct?.event_session_obj_li && $events_slct.event_session_obj_li.length > 0} --> <!-- {#if $events_slct?.event_session_obj_li && $events_slct.event_session_obj_li.length > 0} -->
<!-- <section class="ae_h_scrollfix py-2 space-y-2"> --> <!-- <section class="ae_h_scrollfix py-2 space-y-2"> -->
<section class="py-2 space-y-2 xs:max-w-sm lg:max-w-100 container overflow-x-scroll"> <!-- <section class="py-2 space-y-2 xs:max-w-sm lg:max-w-100 container overflow-x-scroll"> -->
<h2 class="h3"> <h2 class="h3">
<span class="text-md"> <span class="text-md">
Sessions: Sessions:
@@ -65,12 +75,20 @@ let ae_triggers: key_val = {};
</span> </span>
{/if} {/if}
</h2> </h2>
<table class="table table-auto table-striped table-hover"> <table class="table table-auto table-striped table-hover">
<thead> <thead>
<tr> <tr>
<th>Session</th> <th>Session</th>
<th>Date</th> <th>Date</th>
<th>Start/End</th> <th>
<span class="md:hidden">
Times
</span>
<span class="hidden md:inline">
Start&ndash;End
</span>
</th>
<th <th
class:hidden={hide__session_location} class:hidden={hide__session_location}
>Location</th> >Location</th>
@@ -93,16 +111,19 @@ let ae_triggers: key_val = {};
variant-ghost-secondary hover:variant-filled-secondary variant-ghost-secondary hover:variant-filled-secondary
min-w-full max-w-md min-w-full max-w-md
sm:w-80 sm:w-80
md:max-w-xs md:p-2 text-xs md:text-sm lg:text-base
md:max-w-xs md:p-1
sm:btn-sm sm:btn-sm
md:btn-md md:btn-md
" "
title="{session_obj?.name} - {session_obj?.event_session_id_random}" title="{session_obj?.name} - {session_obj?.event_session_id_random}"
> >
<span class="fas fa-eye mx-1"></span> <span class="fas fa-eye m-0.25"></span>
<!-- overflow-x-scroll --> <!-- overflow-x-scroll -->
<span class="grow overflow-hidden"> <span class="grow overflow-hidden text-wrap text-left max-h-8 sm:max-h-10 md:max-h-10 lg:max-h-12">
<!-- <div> -->
<strong>{session_obj?.name}</strong> <strong>{session_obj?.name}</strong>
<!-- </div> -->
</span> </span>
{#if session_obj?.file_count_all} {#if session_obj?.file_count_all}
<span class="badge variant-glass-success hover:variant-filled-success" title="{session_obj?.file_count_all}&times; files under session"> <span class="badge variant-glass-success hover:variant-filled-success" title="{session_obj?.file_count_all}&times; files under session">
@@ -138,7 +159,7 @@ let ae_triggers: key_val = {};
</td> </td>
<td> <td>
<span class="flex flex-col"> <span class="flex flex-col text-xs lg:text-sm">
<span> <span>
{ae_util.iso_datetime_formatter(session_obj?.start_datetime,'dddd')} {ae_util.iso_datetime_formatter(session_obj?.start_datetime,'dddd')}
</span> </span>
@@ -147,7 +168,7 @@ let ae_triggers: key_val = {};
</span> </span>
</span> </span>
<td> <td>
<span class="flex flex-col items-center md:flex-row md:items-start md:text-center max-w-36"> <span class="flex flex-col items-center md:flex-row md:items-start md:text-center max-w-36 text-xs lg:text-sm">
{#if session_obj?.start_datetime} {#if session_obj?.start_datetime}
<span style="break-inside: avoid;"> <span style="break-inside: avoid;">
{ae_util.iso_datetime_formatter(session_obj?.start_datetime,'time_12_short')} {ae_util.iso_datetime_formatter(session_obj?.start_datetime,'time_12_short')}
@@ -173,7 +194,7 @@ let ae_triggers: key_val = {};
<a <a
data-sveltekit-preload-data="false" data-sveltekit-preload-data="false"
href="/event/{session_obj?.event_id_random}/launcher/{session_obj?.event_location_id_random}" href="/event/{session_obj?.event_id_random}/launcher/{session_obj?.event_location_id_random}"
class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary" class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary text-xs lg:text-sm"
title="Launcher: {session_obj?.event_location_name} {session_obj?.event_location_id_random}" title="Launcher: {session_obj?.event_location_name} {session_obj?.event_location_id_random}"
> >
<span class="fas fa-paper-plane m-1"></span> <span class="fas fa-paper-plane m-1"></span>
@@ -189,7 +210,7 @@ let ae_triggers: key_val = {};
{#if show__launcher_link} {#if show__launcher_link}
<a <a
href="/events_pres_mgmt/launcher/{session_obj?.event_id_random}?location_id={session_obj?.event_location_id_random}" href="/events_pres_mgmt/launcher/{session_obj?.event_id_random}?location_id={session_obj?.event_location_id_random}"
class="btn btn-sm variant-glass-surface hover:variant-filled-secondary" class="btn btn-sm variant-glass-surface hover:variant-filled-secondary text-xs lg:text-sm"
title="Launcher: {session_obj?.event_location_name} {session_obj?.event_location_id_random}" title="Launcher: {session_obj?.event_location_name} {session_obj?.event_location_id_random}"
> >
<span class="fas fa-plane m-1"></span> <span class="fas fa-plane m-1"></span>
@@ -203,7 +224,7 @@ let ae_triggers: key_val = {};
{#if show__location_link} {#if show__location_link}
<a <a
href="/events_pres_mgmt/location/{session_obj?.event_location_id_random}" href="/events_pres_mgmt/location/{session_obj?.event_location_id_random}"
class="btn btn-sm variant-glass-surface hover:variant-filled-tertiary" class="btn btn-sm variant-glass-surface hover:variant-filled-tertiary text-xs lg:text-sm"
title="Location: {session_obj?.event_location_name} {session_obj?.event_location_id_random}" title="Location: {session_obj?.event_location_name} {session_obj?.event_location_id_random}"
> >
<span class="fas fa-map-marker-alt m-1"></span> <span class="fas fa-map-marker-alt m-1"></span>
@@ -215,7 +236,7 @@ let ae_triggers: key_val = {};
<td <td
class:hidden={hide__session_poc} class:hidden={hide__session_poc}
> >
<span class="flex flex-col items-start lg:flex-row lg:items-center lg:justify-between"> <span class="flex flex-col items-start lg:flex-row lg:items-center lg:justify-between text-xs lg:text-sm">
{#if session_obj?.poc_person_full_name} {#if session_obj?.poc_person_full_name}
<span style="break-inside: avoid;" class=""> <span style="break-inside: avoid;" class="">
<span class="fas fa-user mx-1"></span> <span class="fas fa-user mx-1"></span>
@@ -373,7 +394,7 @@ let ae_triggers: key_val = {};
{/each} {/each}
</tbody> </tbody>
</table> </table>
</section> <!-- </section> -->
{:else} {:else}
<p class="text-center text-2xl bg-gray-100 p-4 rounded-md"> <p class="text-center text-2xl bg-gray-100 p-4 rounded-md">

View File

@@ -397,12 +397,11 @@ async function handle_search__event_session(
<section <section
class=" class="
ae_events_pres_mgmt_event ae_events_pres_mgmt_event
md:container h-full mx-auto container h-full mx-auto
flex flex-col gap-1 flex flex-col gap-1
py-1 px-2 pb-16 py-1 px-2 pb-16
items-center items-center
min-w-100 min-w-full
w-3/4
max-w-max max-w-max
" "
> >
@@ -417,12 +416,12 @@ async function handle_search__event_session(
{#if !$events_loc.pres_mgmt.show_content__event_view || $events_loc.pres_mgmt.show_content__event_view == 'default'} {#if !$events_loc.pres_mgmt.show_content__event_view || $events_loc.pres_mgmt.show_content__event_view == 'default'}
{#if $lq__event_obj} <!-- {#if $lq__event_obj} -->
<header> <header>
<h2 class="h3 text-center">{$lq__event_obj?.name}</h2> <h2 class="h3 text-center">{$lq__event_obj?.name}</h2>
<h3 class="h4 text-center">Presentations - Session Lookup</h3> <h3 class="h4 text-center">Presentations - Session Lookup</h3>
</header> </header>
{/if} <!-- {/if} -->
<!-- This session search section should be moved to a separate Svelte component --> <!-- This session search section should be moved to a separate Svelte component -->
<div class="variant-ghost-success my-2 p-2 rounded-md flex flex-row items-center"> <div class="variant-ghost-success my-2 p-2 rounded-md flex flex-row items-center">
@@ -559,17 +558,17 @@ count ids: {event_session_id_random_li?.length ?? 'nothing???'}??? -->
<!-- {#if $events_slct.event_session_obj_li?.length && $events_slct.event_session_obj_li?.length == event_session_id_random_li?.length} --> <!-- {#if $events_slct.event_session_obj_li?.length && $events_slct.event_session_obj_li?.length == event_session_id_random_li?.length} -->
{#if $lq_kv__event_session_obj_li && $lq_kv__event_session_obj_li?.length > 0 && event_session_id_random_li && event_session_id_random_li?.length > 0} {#if $lq_kv__event_session_obj_li && $lq_kv__event_session_obj_li?.length > 0 && event_session_id_random_li && event_session_id_random_li?.length > 0}
<!-- <div class="sm:bg-red-200 md:bg-yellow-200 lg:bg-green-200 md:max-w-screen-md lg:max-w-screen-lg xl:max-w-screen-xl overflow-x-scroll outline"> --> <!-- <div class="sm:bg-red-200 md:bg-yellow-200 lg:bg-green-200 md:max-w-screen-md lg:max-w-screen-lg xl:max-w-screen-xl overflow-x-scroll outline"> -->
<div class="sm:bg-red-200 md:bg-yellow-200 lg:bg-white"> <!-- <div class="sm:bg-red-100 md:bg-yellow-100 lg:bg-white"> -->
<Comp_event_session_obj_li <Comp_event_session_obj_li
lq__event_session_obj_li={lq_kv__event_session_obj_li} lq__event_session_obj_li={lq_kv__event_session_obj_li}
hide__session_location={$events_loc.pres_mgmt.hide__session_location} hide__session_location={$events_loc.pres_mgmt.hide__session_location}
hide__session_poc={$events_loc.pres_mgmt.hide__session_poc} hide__session_poc={$events_loc.pres_mgmt.hide__session_poc || $events_loc.pres_mgmt.hide__session_li_poc_field}
show__launcher_link={$ae_loc.manager_access || $ae_loc.administrator_access && $events_loc.pres_mgmt.show__launcher_link} show__launcher_link={$ae_loc.manager_access || $ae_loc.administrator_access && $events_loc.pres_mgmt.show__launcher_link}
show__launcher_link_legacy={$ae_loc.manager_access || $ae_loc.trusted_access && $events_loc.pres_mgmt.show__launcher_link_legacy} show__launcher_link_legacy={$ae_loc.manager_access || $ae_loc.trusted_access && $events_loc.pres_mgmt.show__launcher_link_legacy}
show__location_link={$events_loc.pres_mgmt.show_content__location_link} show__location_link={$events_loc.pres_mgmt.show_content__location_link}
log_lvl={log_lvl} log_lvl={log_lvl}
/> />
</div> <!-- </div> -->
{:else} {:else}
<section class="text-center text-2xl bg-yellow-100 p-4 rounded-md lg:max-w-lg space-y-2"> <section class="text-center text-2xl bg-yellow-100 p-4 rounded-md lg:max-w-lg space-y-2">
<div> <div>
@@ -596,8 +595,10 @@ count ids: {event_session_id_random_li?.length ?? 'nothing???'}??? -->
</section> </section>
{/if} {/if}
{:else if $events_loc.pres_mgmt.show_content__event_view == 'manage_files' && $ae_loc.trusted_access} {:else if $events_loc.pres_mgmt.show_content__event_view == 'manage_files' && $ae_loc.trusted_access}
{#if $lq__event_obj} {#if $lq__event_obj}
<header> <header>
<h2 class="h3 text-center">{$lq__event_obj?.name}</h2> <h2 class="h3 text-center">{$lq__event_obj?.name}</h2>

View File

@@ -315,6 +315,31 @@ let ae_triggers: key_val = {};
</button> </button>
{/if} {/if}
<!-- Button to toggle between showing and not showing the launcher and location links -->
{#if !$events_loc.pres_mgmt?.hide__session_li_poc_field}
<button
disabled={!$ae_loc.authenticated_access}
on:click={() => {
$events_loc.pres_mgmt.hide__session_li_poc_field = true;
}}
class="btn btn-sm variant-ghost-success"
>
<span class="fas fa-toggle-on m-1"></span>
Showing POC
</button>
{:else}
<button
disabled={!$ae_loc.authenticated_access}
on:click={() => {
$events_loc.pres_mgmt.hide__session_li_poc_field = false;
}}
class="btn btn-sm variant-ringed-warning"
>
<span class="fas fa-toggle-off m-1"></span>
Show POC
</button>
{/if}
<!-- Button to toggle between the showing hidden sessions --> <!-- Button to toggle between the showing hidden sessions -->
{#if $events_loc.pres_mgmt.qry_hidden == 'all'} {#if $events_loc.pres_mgmt.qry_hidden == 'all'}
<button <button