Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Scott Idem
2025-09-19 16:18:36 -04:00
parent 86fbbfdfb5
commit f06358439f
3 changed files with 279 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/routes/journals/+layout.svelte
View File

@@ -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
preset-tonal-surface
transition-all duration-500
flex flex-col gap-1 items-end justify-end
"
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 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>
<footer