Now with the event session search menu separated out. Also other clean up.

src/lib/ae_string_snippets.ts

@@ -16,7 +16,7 @@ string_snippets['classes__core_menu__button_highlight'] = 'btn btn-sm mx-1 varia
 string_snippets['classes__core_menu__button_warning'] = 'btn btn-sm mx-1 variant-soft-warning text-info-300 hover:text-info-800';
 
 // string_snippets['classes__events_pres_mgmt_menu'] = 'flex flex-col items-center space-y-1 border border-blue-200 rounded-md py-1 px-2 hover:bg-blue-100 transition-all duration-700 hover:duration-300';
-string_snippets['classes__events_pres_mgmt_menu'] = 'flex flex-col items-center gap-1 border border-gray-200 rounded-md p-1 hover:bg-gray-100 transition-all duration-700 hover:duration-300';
+string_snippets['classes__events_pres_mgmt_menu'] = 'w-full flex flex-col items-center gap-1 border border-gray-200 rounded-md p-1 hover:bg-gray-100 transition-all duration-700 hover:duration-300';
 
 string_snippets['classes__events_pres_mgmt_menu__button'] = 'btn btn-sm mx-1 variant-soft-tertiary text-info-300 hover:text-info-800';
 string_snippets['classes__events_pres_mgmt_menu__button_highlight'] = 'btn btn-sm mx-1 variant-filled-tertiary text-info-300 hover:text-info-800';

src/routes/events_pres_mgmt/event/[slug]/+page.svelte

@@ -22,6 +22,8 @@ import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$
 import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
 import { events_func } from '$lib/ae_events_functions';
 
+import Event_page_menu from './../../event_page_menu.svelte';
+
 // Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
 $slct.account_id = data.account_id;
 console.log(`$slct.account_id = `, $slct.account_id);
@@ -378,6 +380,7 @@ async function handle_search__event_session(
 
 </script>
 
+
 <svelte:head>
 	<title>
         Event: {ae_util.shorten_string({string: $lq__event_obj?.name, max_length: 12})}
@@ -389,11 +392,9 @@ async function handle_search__event_session(
 <section
     class="
         ae_events_pres_mgmt_event
-        h-full mx-auto
-        flex flex-col
+        md:container h-full mx-auto flex flex-col gap-1 py-1 px-2 pb-16
         items-center
-        space-y-2 pt-0 pb-8
-        min-w-fit
+        min-w-100
         w-3/4
         max-w-max
         "
@@ -409,83 +410,12 @@ async function handle_search__event_session(
 </header>
 {/if}
 
-<div
-    class="pres_mgmt__session_search_help {ae_snip.classes__events_pres_mgmt_menu}"
-    class:border-none={!$events_loc.pres_mgmt.show_content__session_search_help}
-    >
-    <div>
-    <!-- <a href="/events_pres_mgmt/x/" class="{ae_snip.classes__events_pres_mgmt_menu__button}">
-        <span class="fas fa-home mx-1"></span>
-        X
-    </a> -->
-    <a
-        href="/core"
-        class="{ae_snip.classes__events_pres_mgmt_menu__button}"
-        class:hidden={!$ae_loc.administrator_access}
-        >
-        <span class="fas fa-cogs mx-1"></span>
-        &AElig; Core
-    </a>
 
-    <a
-        href="/events_pres_mgmt/event/{$lq__event_obj?.event_id_random}/reports"
-        class="{ae_snip.classes__events_pres_mgmt_menu__button}"
-        class:hidden={!$ae_loc.trusted_access}
-        >
-        <span class="fas fa-chart-line mx-1"></span>
-        Pres Mgmt Reports
-    </a>
+<Event_page_menu
+    data={data}
+    lq__event_obj={lq__event_obj}
+    />
 
-    <button
-        type="button"
-        on:click={() => {
-            $events_loc.pres_mgmt.show_content__session_search_help = !$events_loc.pres_mgmt.show_content__session_search_help;
-        }}
-        class="{ae_snip.classes__events_pres_mgmt_menu__button}"
-        title="Help and information about the session search"
-        >
-        <span class="fas fa-question-circle mx-1"></span>
-        {#if $events_loc.pres_mgmt.show_content__session_search_help}
-            Hide
-        {:else}
-            Show
-        {/if}
-        Help?
-    </button>
-    </div>
-
-    <Element_data_store
-        ds_code="events__pres_mgmt__session_search_help"
-        ds_name="Default: Events - Pres Mgmt Session Search Help"
-        ds_type="html"
-        for_type="event"
-        for_id={$events_slct.event_id}
-        class_li="bg-yellow-100 p-2 rounded-md border border-yellow-200"
-        show_edit={false}
-        show_edit_btn={true}
-        hide={!$events_loc.pres_mgmt.show_content__session_search_help}
-        />
-
-    <div>
-        <button
-            type="button"
-            on:click={() => {
-                $events_loc.pres_mgmt.show_content__session_search_help = !$events_loc.pres_mgmt.show_content__session_search_help;
-            }}
-            class="btn btn-sm mx-1 variant-ghost-error hover:variant-filled-error"
-            class:hidden={!$events_loc.pres_mgmt.show_content__session_search_help}
-            title="Help and information about the session search"
-            >
-            <span class="fas fa-question-circle mx-1"></span>
-            {#if $events_loc.pres_mgmt.show_content__session_search_help}
-                Hide
-            {:else}
-                Show
-            {/if}
-            Help?
-        </button>
-    </div>
-</div>
 
 <div class="variant-ghost-success my-2 p-2 rounded-md flex flex-row items-center">
 

src/routes/events_pres_mgmt/event_page_menu.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+export let data: any;
+
+import type { key_val } from '$lib/ae_stores';
+import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores';
+import { events_func } from '$lib/ae_events_functions';
+
+import Element_ae_crud from '$lib/element_ae_crud.svelte';
+import Element_data_store from '$lib/element_data_store.svelte';
+// import Sign_in_out from './sign_in_out.svelte';
+
+export let lq__event_obj: any;
+
+let ae_tmp: key_val = {};
+let ae_triggers: key_val = {};
+
+</script>
+
+
+<!-- New standard page specific menu 2024-08-01 -->
+<div
+    class="pres_mgmt__session_search {ae_snip.classes__events_pres_mgmt_menu}"
+    class:border-none={!$events_loc.pres_mgmt.show_menu__session_search}
+    >
+
+    <!-- BEGIN: The menu button options -->
+    <div
+        class="flex flex-row flex-wrap gap-1 items-center justify-around w-full">
+
+    <span
+        class="ae_menu__navigation_options"
+        >
+        <a
+            href="/core"
+            class="{ae_snip.classes__events_pres_mgmt_menu__button}"
+            class:hidden={!$ae_loc.administrator_access}
+            >
+            <span class="fas fa-cogs m-1"></span>
+            &AElig; Core
+        </a>
+
+        <a
+            href="/events_pres_mgmt/event/{$lq__event_obj?.event_id_random}/reports"
+            class="{ae_snip.classes__events_pres_mgmt_menu__button}"
+            class:hidden={!$ae_loc.trusted_access}
+            >
+            <span class="fas fa-chart-line m-1"></span>
+            Pres Mgmt Reports
+        </a>
+    </span>
+
+    <span
+        class="ae_menu__object_options"
+        >
+    <button
+        type="button"
+        on:click={() => {
+            if ($events_loc.pres_mgmt.show_menu__session_search == 'help') {
+                $events_loc.pres_mgmt.show_menu__session_search = null;
+            } else {
+                $events_loc.pres_mgmt.show_menu__session_search = 'help';
+            }
+        }}
+        class="{ae_snip.classes__events_pres_mgmt_menu__button}"
+        title="Help and information about the session search"
+        >
+        <span class="fas fa-question-circle m-1"></span>
+        {#if $events_loc.pres_mgmt.show_menu__session_search}
+            Hide
+        {:else}
+            Show
+        {/if}
+        Help?
+    </button>
+    </span>
+
+    <span
+        class="ae_menu__action_options"
+        class:hidden={true}
+        >
+        Nothing here yet.
+    </span>
+
+
+    </div> <!-- END: The menu button options -->
+
+
+    <!-- BEGIN: The expanded menu area for information and options -->
+    <div
+        class="flex flex-row items-center justify-around w-full bg-blue-100 hover:bg-blue-200 border border-blue-200 hover:border-blue-400 p-2 rounded-md"
+        class:hidden={$events_loc.pres_mgmt.show_menu__session != 'options'}
+        >
+
+    </div> <!-- END: The expanded menu area for information and options -->
+
+    <Element_data_store
+        ds_code="events__pres_mgmt__session_search_help"
+        ds_name="Default: Events - Pres Mgmt Session Search Help"
+        ds_type="html"
+        for_type="event"
+        for_id={$events_slct.event_id}
+        class_li="bg-yellow-100 border border-yellow-400 p-2 rounded-md"
+        show_edit={false}
+        show_edit_btn={true}
+        hide={$events_loc.pres_mgmt.show_menu__session_search != 'help'}
+        />
+
+    <div>
+        <button
+            type="button"
+            on:click={() => {
+                $events_loc.pres_mgmt.show_menu__session_search = !$events_loc.pres_mgmt.show_menu__session_search;
+            }}
+            class="btn btn-sm mx-1 variant-ghost-error hover:variant-filled-error"
+            class:hidden={!$events_loc.pres_mgmt.show_menu__session_search}
+            title="Collapse the expanded menu"
+            >
+            <span class="fas fa-chevron-up m-1"></span>
+            {#if $events_loc.pres_mgmt.show_menu__session_search}
+                Hide
+            {:else}
+                Show
+            {/if}
+            <!-- Menu? -->
+        </button>
+    </div>
+</div>

src/routes/events_pres_mgmt/presenter/[slug]/+page.svelte

@@ -57,7 +57,8 @@ let lq__event_presenter_obj = liveQuery(
 
 
 <section
-    class="ae_events_pres_mgmt_event_presenter md:container h-full mx-auto flex flex-col gap-1 py-1 px-2 pb-16"
+    class="ae_events_pres_mgmt_event_presenter
+    md:container h-full mx-auto flex flex-col gap-1 py-1 px-2 pb-16"
     >
 
 

src/routes/events_pres_mgmt/session/[slug]/+page.svelte

@@ -214,7 +214,8 @@ onMount(() => {
 
 
 <section
-    class="ae_events_pres_mgmt_event_session md:container h-full mx-auto flex flex-col gap-1 py-1 px-2 pb-16"
+    class="ae_events_pres_mgmt_event_session
+    md:container h-full mx-auto flex flex-col gap-1 py-1 px-2 pb-16"
     >