From bd2583fde3627fdb321d29d384009ec0e4a40f20 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Mon, 23 Sep 2024 16:42:53 -0400
Subject: [PATCH] Better scaling as the width changes

---
 src/lib/ae_events__event.ts                   |  1 +
 src/lib/element_manage_event_file_li.svelte   |  2 +-
 .../ae_comp__event_session_obj_li.svelte      | 49 +++++++++++++------
 .../event/[slug]/+page.svelte                 | 17 ++++---
 .../events_pres_mgmt/event_page_menu.svelte   | 25 ++++++++++
 5 files changed, 71 insertions(+), 23 deletions(-)

diff --git a/src/lib/ae_events__event.ts b/src/lib/ae_events__event.ts
index 1d6685d5..0a193106 100644
--- a/src/lib/ae_events__event.ts
+++ b/src/lib/ae_events__event.ts
@@ -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_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_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
diff --git a/src/lib/element_manage_event_file_li.svelte b/src/lib/element_manage_event_file_li.svelte
index 73e548ea..7188b0d4 100644
--- a/src/lib/element_manage_event_file_li.svelte
+++ b/src/lib/element_manage_event_file_li.svelte
@@ -528,7 +528,7 @@ onMount(() => {
                 </strong>
                 {ae_util.iso_datetime_formatter(event_file_obj.created_on, 'date_iso')}
                 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} -->
              {:else}
                 <!-- <span class="fas fa-calendar-day mx-1"></span> -->
diff --git a/src/routes/events_pres_mgmt/ae_comp__event_session_obj_li.svelte b/src/routes/events_pres_mgmt/ae_comp__event_session_obj_li.svelte
index f8cbf5e8..c94b578f 100644
--- a/src/routes/events_pres_mgmt/ae_comp__event_session_obj_li.svelte
+++ b/src/routes/events_pres_mgmt/ae_comp__event_session_obj_li.svelte
@@ -41,8 +41,17 @@ let ae_triggers: key_val = {};
 // Functions and Logic
 </script>
 
-
-<section class="ae_comp event_session_obj_li {container_class_li}">
+<!-- xs:max-w-sm lg:max-w-100 -->
+<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}
@@ -50,7 +59,8 @@ let ae_triggers: key_val = {};
 <!-- {#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="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">
         <span class="text-md">
         Sessions:
@@ -65,12 +75,20 @@ let ae_triggers: key_val = {};
         </span>
         {/if}
     </h2>
+
 <table class="table table-auto table-striped table-hover">
 <thead>
     <tr>
         <th>Session</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
             class:hidden={hide__session_location}
             >Location</th>
@@ -93,16 +111,19 @@ let ae_triggers: key_val = {};
                 variant-ghost-secondary hover:variant-filled-secondary
                 min-w-full max-w-md
                 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
                 md:btn-md
                 "
             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 -->
-            <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>
+            <!-- </div> -->
             </span>
             {#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">
@@ -138,7 +159,7 @@ let ae_triggers: key_val = {};
 
     </td>
     <td>
-        <span class="flex flex-col">
+        <span class="flex flex-col text-xs lg:text-sm">
             <span>
             {ae_util.iso_datetime_formatter(session_obj?.start_datetime,'dddd')}
             </span>
@@ -147,7 +168,7 @@ let ae_triggers: key_val = {};
             </span>
         </span>
     <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}
             <span style="break-inside: avoid;">
                 {ae_util.iso_datetime_formatter(session_obj?.start_datetime,'time_12_short')}
@@ -173,7 +194,7 @@ let ae_triggers: key_val = {};
             <a
                 data-sveltekit-preload-data="false"
                 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}"
                 >
                 <span class="fas fa-paper-plane m-1"></span>
@@ -189,7 +210,7 @@ let ae_triggers: key_val = {};
         {#if show__launcher_link}
             <a
                 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}"
                 >
                 <span class="fas fa-plane m-1"></span>
@@ -203,7 +224,7 @@ let ae_triggers: key_val = {};
         {#if show__location_link}
             <a
                 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}"
                 >
                 <span class="fas fa-map-marker-alt m-1"></span>
@@ -215,7 +236,7 @@ let ae_triggers: key_val = {};
     <td
         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}
             <span style="break-inside: avoid;" class="">
                 <span class="fas fa-user mx-1"></span>
@@ -373,7 +394,7 @@ let ae_triggers: key_val = {};
 {/each}
 </tbody>
 </table>
-</section>
+<!-- </section> -->
 
 {:else}
     <p class="text-center text-2xl bg-gray-100 p-4 rounded-md">
diff --git a/src/routes/events_pres_mgmt/event/[slug]/+page.svelte b/src/routes/events_pres_mgmt/event/[slug]/+page.svelte
index d5d7df39..70d95820 100644
--- a/src/routes/events_pres_mgmt/event/[slug]/+page.svelte
+++ b/src/routes/events_pres_mgmt/event/[slug]/+page.svelte
@@ -397,12 +397,11 @@ async function handle_search__event_session(
 <section
     class="
         ae_events_pres_mgmt_event
-        md:container h-full mx-auto
+        container h-full mx-auto
         flex flex-col gap-1
         py-1 px-2 pb-16
         items-center
-        min-w-100
-        w-3/4
+        min-w-full
         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 $lq__event_obj}
+<!-- {#if $lq__event_obj} -->
 <header>
 <h2 class="h3 text-center">{$lq__event_obj?.name}</h2>
 <h3 class="h4 text-center">Presentations - Session Lookup</h3>
 </header>
-{/if}
+<!-- {/if} -->
 
 <!-- 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">
@@ -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 $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-white">
+<!-- <div class="sm:bg-red-100 md:bg-yellow-100 lg:bg-white"> -->
 <Comp_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_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_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}
     log_lvl={log_lvl}
     />
-</div>
+<!-- </div> -->
 {:else}
 <section class="text-center text-2xl bg-yellow-100 p-4 rounded-md lg:max-w-lg space-y-2">
     <div>
@@ -596,8 +595,10 @@ count ids: {event_session_id_random_li?.length ?? 'nothing???'}??? -->
 </section>
 {/if}
 
+
 {:else if $events_loc.pres_mgmt.show_content__event_view == 'manage_files' && $ae_loc.trusted_access}
 
+
     {#if $lq__event_obj}
     <header>
         <h2 class="h3 text-center">{$lq__event_obj?.name}</h2>
diff --git a/src/routes/events_pres_mgmt/event_page_menu.svelte b/src/routes/events_pres_mgmt/event_page_menu.svelte
index da07a460..5e63d8b9 100644
--- a/src/routes/events_pres_mgmt/event_page_menu.svelte
+++ b/src/routes/events_pres_mgmt/event_page_menu.svelte
@@ -315,6 +315,31 @@ let ae_triggers: key_val = {};
                 </button>
             {/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 -->
             {#if $events_loc.pres_mgmt.qry_hidden == 'all'}
                 <button