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

2
src/lib/e_app_sys_menu.svelte
View File

@@ -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" />

242
src/routes/events/+layout.svelte
View File

@@ -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
px-2
pb-2
border-b-2 rounded-b-lg
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}
<!-- 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 -->
<section
<div
class:hidden={yTop < 500}
class="
footer_content
absolute bottom-0 start-0 z-10 w-full p-1
flex flex-row items-center justify-between
z-20
hover:opacity-100
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> -->

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