Better scaling as the width changes

2024-09-23 16:42:53 -04:00
parent 80b394f16b
commit bd2583fde3
5 changed files with 71 additions and 23 deletions
--- 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
--- 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> -->
--- 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">
--- 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>
--- 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