Never ending work on styles. Trying to make absolute positioned headers and footers work. Also added scroll to top for Journals.

src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte

@@ -713,7 +713,7 @@ $effect(() => {
         mt-12 mb-14 sm:mb-12
         h-full
         w-full max-w-7xl
-
+        outline
         "
         >
 
@@ -721,13 +721,19 @@ $effect(() => {
 <header
     id="Main-Header"
     class="
-        absolute top-0 start-0 z-20 w-full p-1
+        z-20
+        absolute top-0 left-0 right-0
+        w-full max-w-7xl
+        h-12
+        p-1 px-12 m-auto
+
         flex flex-row items-center justify-around sm:justify-between
-        bg-slate-200
+
         text-sm hover:text-base
-        m-auto
+
-        px-12
+        bg-slate-200
-        opacity-50 hover:opacity-100
+
+        opacity-90 hover:opacity-100
         transition-all duration-1000
         "
     >
@@ -900,15 +906,22 @@ $effect(() => {
 </div>
 
 
-<Footer
+<footer
+    id="Main-Footer"
     class="
-        absolute bottom-0 start-0 z-20 w-full p-1
+        z-20
+        absolute bottom-0 left-0 right-0
+        w-full max-w-7xl
+        p-1 m-auto
+
         flex flex-row items-center justify-between
         sm:flex-row md:items-center md:justify-between
+
         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
         "
@@ -967,7 +980,7 @@ $effect(() => {
         {ae_util.iso_datetime_formatter($time,'time_long')}
         {/if}
     </div>
-</Footer>
+</footer>
 
 
 

src/routes/journals/+layout.svelte

@@ -65,6 +65,32 @@ $journals_slct.journal_obj_li = ae_acct.slct.journal_obj_li;
 //     console.log($journals_slct.journal_obj_li);
 // };
 
+
+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>
 
 
@@ -76,24 +102,39 @@ $journals_slct.journal_obj_li = ae_acct.slct.journal_obj_li;
 {#if $ae_loc.user_id && $ae_loc.person_id && $ae_loc.trusted_access}
 <!-- These are needed: h-full overflow-auto -->
 <div
+    id="ae_main_content"
+    bind:clientHeight={$ae_loc.iframe_height}
+    bind:this={box}
+    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
+
         bg-gray-50 dark:bg-gray-900
         text-gray-800 dark:text-gray-200
         "
     >
 
+<!-- class:hidden={yTop > 200} -->
 <nav
+    class:opacity-0={yTop > 250}
     class="
         submenu
+        z-20
+        hover:opacity-100
+        absolute top-0 left-0 right-0
+        w-full max-w-7xl
+        h-12
+        p-1 px-2 pb-2 m-auto
+
         flex flex-row flex-wrap
         items-center justify-between
         gap-1
-        border-b-2
+        border-b-2 rounded-b-lg
-        p-1
+
-        px-2
+        bg-gray-200 dark:bg-gray-800
-        pb-2
+
+        transition-all duration-5000
         "
     >
     <span class="justify-self-start">
@@ -211,14 +252,77 @@ $journals_slct.journal_obj_li = ae_acct.slct.journal_obj_li;
 <!-- 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 pb-28"
+    class="main_content grow px-1 md:px-2 pt-12 pb-48"
     >
     {@render children()}
 </section>
 
 
-<section
+<button
-    class="footer_content flex text-sm sm:text-sm 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="
+        ae_btn_success_outlined
+        z-20
+        hover:opacity-100
+        fixed bottom-1/4 right-1
+
+        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>
+
+
+<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
+
+        transition-all duration-1000
+        "
     class:ae_debug={$ae_loc?.debug}
     >
 
@@ -228,7 +332,7 @@ $journals_slct.journal_obj_li = ae_acct.slct.journal_obj_li;
         class_li="grow flex flex-row justify-between"
         />
 
-</section>
+</footer>
 
 
 </div>