Making things look good. Now with scroll to top and bottom for Journals and Events.

src/lib/e_app_sys_menu.svelte

@@ -173,7 +173,9 @@ max-w-max -->
     {/if}
 
     {#if $ae_loc?.user_id}
+    <!-- This is currently not set to show if not expanded. Saving space. -->
     <div
+        class:hidden={!expand}
         class="flex flex-row gap-1 items-center justify-end transition-all w-full group"
         >
         <ShieldUser size="1em" class="mx-1 inline-block text-gray-500" />

src/routes/events/+layout.svelte

@@ -119,6 +119,32 @@ if (browser) {
 //     }
 // }
 
+let nav_y_height = $state(0);
+
+let box: any;
+let xLeft = $state(0);
+let xScroll = $state(0);
+let xWidth = $state(0);
+let yTop = $state(0);
+let yScroll = $state(0);
+let yHeight = $state(0);
+
+let scroll_y = $state(0);
+
+function parse_scroll() {
+    // console.log(`parse_scroll() called`);
+    xLeft = box.scrollLeft;
+    xScroll = box.scrollWidth;
+    xWidth = box.clientWidth;
+    yTop = box.scrollTop;
+    yHeight = box.clientHeight;
+    yScroll = box.scrollHeight;
+    // console.log(`parse_scroll() called: ${yTop}`);
+}
+
+function scroll_container() {
+    return document.getElementById('ae_main_content') || document.documentElement || document.body;
+}
 
 </script>
 
@@ -141,12 +167,18 @@ if (browser) {
 <!-- bg-gray-50 dark:bg-gray-900 -->
 <!-- text-gray-800 dark:text-gray-200 -->
 <div
+    id="ae_main_content"
+    bind:clientHeight={$ae_loc.iframe_height}
+    bind:this={box}
+    onscroll={parse_scroll}
     class:iframe={$ae_loc?.iframe}
     class="
         ae_events
-        min-h-full h-full min-w-full w-full overflow-auto container max-w-7xl
+        min-h-full h-full min-w-full w-full max-w-7xl
+        overflow-auto container
         flex flex-col gap-1
         m-auto
+
         bg-gray-50 dark:bg-gray-900
         text-gray-800 dark:text-gray-200
         "
@@ -154,15 +186,26 @@ if (browser) {
 
 {#if !$ae_sess?.disable_sys_nav}
 <nav
+    bind:clientHeight={nav_y_height}
+    class:opacity-0={yTop > 250}
     class="
         submenu
-        flex flex-col sm:flex-row flex-wrap
+        z-20
+        hover:opacity-100
+        absolute top-0 left-0 right-0
+        w-full max-w-7xl
+        min-h-12 md:min-h-20
+        p-1 px-2 pb-2 m-auto
+
+        flex flex-col sm:flex-row sm:flex-wrap
         items-center justify-between
         gap-1
-        border-b-2
+
-        p-1
+        border-b-2 rounded-b-lg
-        px-2
+
-        pb-2
+        bg-gray-200 dark:bg-gray-800
+
+        transition-all duration-1000
         "
     >
     <span class="justify-self-start">
@@ -176,6 +219,7 @@ if (browser) {
             Æ
             Events
         </abbr>
+        {nav_y_height}
     </span>
     {#if !$ae_sess?.disable_sys_header}
     <Element_data_store
@@ -197,85 +241,142 @@ if (browser) {
 
 <section
     class:iframe={$ae_loc?.iframe}
+    class:pt-12={nav_y_height <= 50}
+    class:pt-20={nav_y_height > 50 && nav_y_height <= 100}
+    class:pt-32={nav_y_height > 100 && nav_y_height <= 150}
+    class:pt-40={nav_y_height > 150 && nav_y_height <= 200}
     class="
-        main_content grow px-1 md:px-2 lg:px-4 pb-32
+        main_content
+        grow
+        px-1 md:px-2 lg:px-4
+        pb-48
         flex flex-col gap-1
         items-center
         justify-start
         "
     >
-<!-- <section
-    class:iframe={$ae_loc?.iframe}
-    class="
-        ae_events_pres_mgmt_event
-        md:container
-        flex flex-col gap-1
-        items-center
-        justify-start
-        mx-auto
-        py-1 px-2 pb-16
-        h-full
-        min-w-full
-        max-w-full
-        "
-    > -->
-    <!-- OLD: App Bar -->
-    <!-- <AppBar
-        gridColumns="grid-cols-3"
-        slotDefault="place-self-center"
-        slotTrail="place-content-end"
-        padding="px-4"
-        >
-        <Element_data_store
-            ds_code="hub__page__appshell_header_lead"
-            ds_type="html"
-            />
-        <Element_data_store
-            ds_code="hub__site__appshell_header"
-            ds_type="html"
-            />
-        <Element_data_store
-            ds_code="hub__page__appshell_header_trail"
-            ds_type="html"
-            />
-    </AppBar> -->
-
-
-    <!-- !($ae_loc.site_access_key && $ae_loc.site_domain_access_key)
-    || ($ae_loc.site_access_key == access_key || $ae_loc.site_domain_access_key == access_key)} -->
-
-
-        <!-- {$ae_loc?.site_access_key ?? '-- site access key not set --'} -->
-        <!-- {$ae_loc?.site_domain_access_key ?? '-- site domain access key not set --'} -->
-        <!-- {access_key ?? '-- param key not set --'} -->
 
         <!-- Page Route Content -->
         {@render children?.()}
 
-
-
-    <!-- {#snippet footer()} -->
-
-
-
-    <!-- {/snippet} -->
-
 </section>
 
 
-{#if !$ae_sess?.disable_sys_footer}
+<div
-<!-- text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg text-slate-400 hover:text-slate-800 transition px-1 py-0.5 min-h-7 -->
+    class:hidden={yTop < 500}
-<section
     class="
-        footer_content
+        z-20
-        absolute bottom-0 start-0 z-10 w-full p-1
+        hover:opacity-100
-        flex flex-row items-center justify-between
+        fixed bottom-40 right-1
+
+        flex flex-col gap-1 items-end justify-end
+        "
+    >
+
+    <!-- Scroll to top button -->
+    <button
+        type="button"
+        class="
+            ae_btn_success_outlined
+
+
+            btn btn-sm btn-secondary
+            preset-tonal-surface
+
+            transition-all duration-500
+            "
+        class:hidden={yTop < 500}
+        class:opacity-80={yTop > 750}
+        class:opacity-0={yTop < 750}
+        class:ae_btn_warning_filled={yTop > 1500}
+        onclick={() => {
+            log_lvl = 1;
+            if (log_lvl) {
+                console.log(`Scroll to top button clicked. scroll_y: ${scroll_y} scrollTop: ${scroll_container().scrollTop}`, scroll_container());
+                // document.getElementById('ae_idaa')?.scrollTo(0, 0);
+                // document.documentElement?.scrollTo(0, 0);
+                // document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+                // document.body.scrollTop = 0; // For Safari
+            }
+
+            console.log('Not Safari, using smooth scroll to top');
+            document.getElementById('ae_main_content')?.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+
+            window.parent.postMessage({'scroll_to': 0}, "*"); // This should be
+        }}
+        title="Scroll to top"
+        >
+        <span class="fas fa-arrow-up"></span>
+        Scroll to Top
+    </button>
+
+    <!-- Scroll to bottom button -->
+    <button
+        type="button"
+        class="
+            ae_btn_success_outlined
+
+            btn btn-sm btn-secondary
+            preset-tonal-surface
+
+            transition-all duration-500
+            "
+        class:hidden={yTop < 500}
+        class:opacity-80={yTop > 750}
+        class:opacity-0={yTop < 750}
+        class:ae_btn_warning_filled={yTop > 1500}
+        onclick={() => {
+            log_lvl = 1;
+            if (log_lvl) {
+                console.log(`Scroll to bottom button clicked. scroll_y: ${scroll_y} scrollTop: ${scroll_container().scrollTop}`, scroll_container());
+                // document.getElementById('ae_idaa')?.scrollTo(0, 0);
+                // document.documentElement?.scrollTo(0, 0);
+                // document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+                // document.body.scrollTop = 0; // For Safari
+            }
+
+            console.log('Not Safari, using smooth scroll to bottom');
+            document.getElementById('ae_main_content')?.scrollTo({
+                top: scroll_y,
+                behavior: 'smooth'
+            });
+
+            window.parent.postMessage({'scroll_to': scroll_y}, "*"); // This should be
+        }}
+        title="Scroll to bottom"
+        >
+        <span class="fas fa-arrow-down"></span>
+        Scroll to Bottom
+    </button>
+
+</div>
+
+{#if !$ae_sess?.disable_sys_footer}
+<footer
+    class:opacity-80={yTop < 250}
+    class:opacity-0={yTop > 250}
+    class="
+        footer
+        z-20
+        hover:opacity-100
+        absolute bottom-0 left-0 right-0
+        w-full max-w-7xl
+        p-1 m-auto
+
+        flex flex-row flex-wrap
+        items-center justify-between
         sm:flex-row md:items-center md:justify-between
+        gap-1
+
+        border-t-2 border-gray-200 dark:border-gray-600
+        rounded-t-lg
+        bg-gray-200 dark:bg-gray-800
+
         text-xs hover:text-base
-        shadow
+
-        bg-gray-200 border-t border-gray-200
-        dark:bg-gray-800 dark:border-gray-600
-        opacity-50 hover:opacity-100
         transition-all duration-1000
         "
     class:ae_debug={$ae_loc.debug}
@@ -287,9 +388,8 @@ if (browser) {
         class_li="grow flex flex-row justify-between"
         />
 
-</section>
+</footer>
 {/if}
 
 
 </div>
-<!-- </AppShell> -->

src/routes/journals/+layout.svelte

@@ -65,6 +65,7 @@ $journals_slct.journal_obj_li = ae_acct.slct.journal_obj_li;
 //     console.log($journals_slct.journal_obj_li);
 // };
 
+let nav_y_height = $state(0);
 
 let box: any;
 let xLeft = $state(0);
@@ -108,7 +109,11 @@ function scroll_container() {
     onscroll={parse_scroll}
     class:iframe={$ae_loc?.iframe}
     class="
-        ae_journals h-full max-h-full max-w-6xl overflow-auto flex flex-col gap-1 m-auto
+        ae_journals
+        h-full max-h-full max-w-7xl
+        overflow-auto
+        flex flex-col gap-1
+        m-auto
 
         bg-gray-50 dark:bg-gray-900
         text-gray-800 dark:text-gray-200
@@ -117,6 +122,7 @@ function scroll_container() {
 
 <!-- class:hidden={yTop > 200} -->
 <nav
+    bind:clientHeight={nav_y_height}
     class:opacity-0={yTop > 250}
     class="
         submenu
@@ -124,17 +130,18 @@ function scroll_container() {
         hover:opacity-100
         absolute top-0 left-0 right-0
         w-full max-w-7xl
-        h-12
+        min-h-12
         p-1 px-2 pb-2 m-auto
 
-        flex flex-row flex-wrap
+        flex flex-col sm:flex-row sm:flex-wrap
         items-center justify-between
         gap-1
+
         border-b-2 rounded-b-lg
 
         bg-gray-200 dark:bg-gray-800
 
-        transition-all duration-5000
+        transition-all duration-1000
         "
     >
     <span class="justify-self-start">
@@ -252,51 +259,112 @@ function scroll_container() {
 <!-- Add overflow-auto to section element to have the main nav sort of sticky at top -->
 <section
     class:iframe={$ae_loc?.iframe}
-    class="main_content grow px-1 md:px-2 pt-12 pb-48"
+    class:pt-12={nav_y_height <= 50}
+    class:pt-20={nav_y_height > 50 && nav_y_height <= 100}
+    class:pt-32={nav_y_height > 100 && nav_y_height <= 150}
+    class:pt-40={nav_y_height > 150 && nav_y_height <= 200}
+    class="
+        main_content
+        grow
+        px-1 md:px-2
+        pb-48
+        "
     >
     {@render children()}
 </section>
 
 
-<button
+<div
+    class:hidden={yTop < 500}
     class="
-        ae_btn_success_outlined
         z-20
         hover:opacity-100
-        fixed bottom-1/4 right-1
+        fixed bottom-48 right-1
 
-        btn btn-sm btn-secondary
+        flex flex-col gap-1 items-end justify-end
-        preset-tonal-surface
-
-        transition-all duration-500
         "
-    class:hidden={yTop < 500}
-    class:opacity-80={yTop > 750}
-    class:opacity-0={yTop < 750}
-    class:ae_btn_warning_filled={yTop > 1500}
-    onclick={() => {
-        log_lvl = 1;
-        if (log_lvl) {
-            console.log(`Scroll to top button clicked. scroll_y: ${scroll_y} scrollTop: ${scroll_container().scrollTop}`, scroll_container());
-            // document.getElementById('ae_idaa')?.scrollTo(0, 0);
-            // document.documentElement?.scrollTo(0, 0);
-            // document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
-            // document.body.scrollTop = 0; // For Safari
-        }
-
-        console.log('Not Safari, using smooth scroll to top');
-        document.getElementById('ae_main_content')?.scrollTo({
-            top: 0,
-            behavior: 'smooth'
-        });
-
-        window.parent.postMessage({'scroll_to': 0}, "*"); // This should be
-    }}
-    title="Scroll to top"
     >
-    <span class="fas fa-arrow-up"></span>
+
-    Scroll to Top
+    <!-- Scroll to top button -->
-</button>
+    <button
+        type="button"
+        class="
+            ae_btn_success_outlined
+
+
+            btn btn-sm btn-secondary
+            preset-tonal-surface
+
+            transition-all duration-500
+            "
+        class:hidden={yTop < 500}
+        class:opacity-80={yTop > 750}
+        class:opacity-0={yTop < 750}
+        class:ae_btn_warning_filled={yTop > 1500}
+        onclick={() => {
+            log_lvl = 1;
+            if (log_lvl) {
+                console.log(`Scroll to top button clicked. scroll_y: ${scroll_y} scrollTop: ${scroll_container().scrollTop}`, scroll_container());
+                // document.getElementById('ae_idaa')?.scrollTo(0, 0);
+                // document.documentElement?.scrollTo(0, 0);
+                // document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+                // document.body.scrollTop = 0; // For Safari
+            }
+
+            console.log('Not Safari, using smooth scroll to top');
+            document.getElementById('ae_main_content')?.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+
+            window.parent.postMessage({'scroll_to': 0}, "*"); // This should be
+        }}
+        title="Scroll to top"
+        >
+        <span class="fas fa-arrow-up"></span>
+        Scroll to Top
+    </button>
+
+    <!-- Scroll to bottom button -->
+    <button
+        type="button"
+        class="
+            ae_btn_success_outlined
+
+            btn btn-sm btn-secondary
+            preset-tonal-surface
+
+            transition-all duration-500
+            "
+        class:hidden={yTop < 500}
+        class:opacity-80={yTop > 750}
+        class:opacity-0={yTop < 750}
+        class:ae_btn_warning_filled={yTop > 1500}
+        onclick={() => {
+            log_lvl = 1;
+            if (log_lvl) {
+                console.log(`Scroll to bottom button clicked. scroll_y: ${scroll_y} scrollTop: ${scroll_container().scrollTop}`, scroll_container());
+                // document.getElementById('ae_idaa')?.scrollTo(0, 0);
+                // document.documentElement?.scrollTo(0, 0);
+                // document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+                // document.body.scrollTop = 0; // For Safari
+            }
+
+            console.log('Not Safari, using smooth scroll to bottom');
+            document.getElementById('ae_main_content')?.scrollTo({
+                top: scroll_y,
+                behavior: 'smooth'
+            });
+
+            window.parent.postMessage({'scroll_to': scroll_y}, "*"); // This should be
+        }}
+        title="Scroll to bottom"
+        >
+        <span class="fas fa-arrow-down"></span>
+        Scroll to Bottom
+    </button>
+
+</div>
 
 
 <footer