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

More significant updates to the general layout and styling per module.

Browse Source
This commit is contained in:
Scott Idem
2025-06-26 14:39:30 -04:00
parent ce59a848d6
commit 1f46b51c9a
12 changed files with 205 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,11 +32,12 @@ import type { key_val } from '$lib/ae_stores';
import { ae_loc, ae_sess, ae_api, slct } from '$lib/ae_stores'; import { ae_loc, ae_sess, ae_api, slct } from '$lib/ae_stores';
import Element_data_store from '$lib/element_data_store_v2.svelte'; import Element_data_store from '$lib/element_data_store_v2.svelte';
import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores'; import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores';
interface Props {
/** @type {import('./$types').LayoutData} */ interface Props {
data: any; /** @type {import('./$types').LayoutData} */
children?: import('svelte').Snippet; data: any;
} children?: import('svelte').Snippet;
}
let { data, children }: Props = $props(); let { data, children }: Props = $props();
// import { events_func } from '$lib/ae_events_functions'; // import { events_func } from '$lib/ae_events_functions';
@@ -142,7 +143,12 @@ if (browser) {
> --> > -->
<div <div
class:iframe={$ae_loc?.iframe} class:iframe={$ae_loc?.iframe}
class="ae_events h-full max-h-full max-w-6xl overflow-auto flex flex-col gap-1 m-auto" class="
ae_events
h-full max-h-full max-w-6xl overflow-auto
flex flex-col gap-1
m-auto
"
> >

97
src/routes/hosted_files/+layout.svelte Normal file
View File

@@ -0,0 +1,97 @@
<script lang="ts">
/** @type {import('./$types').LayoutData} */
let log_lvl: number = 1;
// *** Import Svelte specific
// import { browser } from '$app/environment';
// *** Import other supporting libraries
// import * as icons from '@lucide/svelte';
import {
Brain,
House, Library,
RefreshCw,
Satellite
} from '@lucide/svelte';
// *** Import Aether specific variables and functions
// import type { key_val } from '$lib/ae_stores';
// import { ae_util } from '$lib/ae_utils/ae_utils';
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
// import { core_func } from '$lib/ae_core/ae_core_functions';
import Element_data_store from '$lib/element_data_store_v2.svelte';
interface Props {
/** @type {import('./$types').LayoutData} */
data: any;
children?: import('svelte').Snippet;
}
let { data, children }: Props = $props();
</script>
<svelte:head>
<title>Hosted Files - {$ae_loc?.title ?? 'Æ loading...'}</title>
</svelte:head>
<div
id="ae_hosted_files"
class:iframe={$ae_loc?.iframe}
class="
ae_hosted_files
h-full max-h-full max-w-6xl overflow-auto
flex flex-col gap-1
m-auto
"
>
<nav
class="
submenu
flex flex-row flex-wrap
items-center justify-between
gap-1
border-b-2
p-1
px-2
pb-2
"
>
<span class="justify-self-start">
<!-- Be sure to explain what &AElig; (Aether) means in the title text or similar! -->
<Satellite
size="1.5em"
class="mx-1 inline-block text-gray-500"
/>
<abbr title="Aether - Hosted Files Module">
Æ
Hosted Files
</abbr>
</span>
<!-- <Element_data_store
ds_code="hub__site__appshell_header"
ds_type="html"
/> -->
<a
href="/"
class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-success-500"
>
<House />
<span class="hidden md:inline">
Home
</span>
</a>
</nav>
<section
class:iframe={$ae_loc?.iframe}
class="main_content grow px-1 md:px-2 pb-28"
>
{@render children?.()}
</section>
</div>

18
src/routes/hosted_files/+page.svelte
View File

@@ -91,7 +91,7 @@ onMount(() => {
</script> </script>
<section <!-- <section
class=" class="
ae__hosted_files__av_util ae__hosted_files__av_util
space-y-4 space-y-4
@@ -105,9 +105,9 @@ onMount(() => {
max-w-6xl max-w-6xl
overflow-auto overflow-auto
" "
> > -->
<div class="border border-gray-200 p-2 rounded-lg"> <!-- <div class="border border-gray-200 p-2 rounded-lg"> -->
<h1 class="h1">Æ Hosted Files</h1> <h1 class="h1">Æ Hosted Files</h1>
<h2 class="h2">Video Utilities</h2> <h2 class="h2">Video Utilities</h2>
@@ -118,6 +118,7 @@ onMount(() => {
Video Utilities Video Utilities
</a> </a>
<hr />
<h2 class="h2">Manage Files</h2> <h2 class="h2">Manage Files</h2>
@@ -126,10 +127,10 @@ onMount(() => {
link_to_id={$ae_loc?.account_id} link_to_id={$ae_loc?.account_id}
allow_basic={true} allow_basic={true}
allow_moderator={true} allow_moderator={true}
class_li={''} class_li={'max-h-full'}
/> />
</div> <!-- </div> -->
{#if 1===2} {#if 1===2}
@@ -195,9 +196,4 @@ onMount(() => {
</section> <!-- </section> -->
<style>
</style>

16
src/routes/hosted_files/video_util/+page.svelte
View File

@@ -117,7 +117,7 @@ onMount(() => {
</script> </script>
<section <!-- <section
class=" class="
ae__hosted_files__av_util ae__hosted_files__av_util
space-y-4 space-y-4
@@ -131,9 +131,10 @@ onMount(() => {
max-w-6xl max-w-6xl
overflow-auto overflow-auto
" "
> > -->
<!-- <div class="border border-gray-200 p-2 rounded-lg"> -->
<div class="border border-gray-200 p-2 rounded-lg">
<h1 class="h1">Clip and Scale Video Files</h1> <h1 class="h1">Clip and Scale Video Files</h1>
<p>This AV utility will take an mp4 video file and create a clipped mp4 video file. By default, videos will be scaled down to 1920x1080. This process takes at least 30 seconds, but it can easily take a handful of minutes. The scaling option requires that the video be re-encoded. Please be patient while it is processing.</p> <p>This AV utility will take an mp4 video file and create a clipped mp4 video file. By default, videos will be scaled down to 1920x1080. This process takes at least 30 seconds, but it can easily take a handful of minutes. The scaling option requires that the video be re-encoded. Please be patient while it is processing.</p>
@@ -259,7 +260,7 @@ onMount(() => {
<p>Clip a video file first.</p> <p>Clip a video file first.</p>
{/if} {/if}
</div> <!-- </div> -->
{#if 1===2} {#if 1===2}
@@ -325,9 +326,4 @@ onMount(() => {
</section> <!-- </section> -->
<style>
</style>

27
src/routes/idaa/(idaa)/archives/+layout.svelte
View File

@@ -1,8 +1,7 @@
<script lang="ts"> <script lang="ts">
/** @type {import('./$types').LayoutData} */
let log_lvl: number = 0; let log_lvl: number = 0;
if (log_lvl > 1) { if (log_lvl > 1) {
console.log(`ae_idaa_archives +layout.svelte`); console.log(`ae_idaa_archives +layout.svelte`, data);
} }
// *** Import Aether specific variables and functions // *** Import Aether specific variables and functions
@@ -18,6 +17,8 @@ interface Props {
let { data, children }: Props = $props(); let { data, children }: Props = $props();
// *** Quickly pull out data from parent(s) // *** Quickly pull out data from parent(s)
$slct.account_id = data.account_id;
let ae_acct = data[$slct.account_id]; let ae_acct = data[$slct.account_id];
if (log_lvl) { if (log_lvl) {
console.log(`ae_acct = `, ae_acct); console.log(`ae_acct = `, ae_acct);
@@ -27,15 +28,21 @@ $idaa_slct.archive_obj_li = ae_acct.slct.archive_obj_li;
// $idaa_slct.archive_id = ae_acct.slct.archive_id; // Not set here yet. // $idaa_slct.archive_id = ae_acct.slct.archive_id; // Not set here yet.
// *** Set initial variables // *** Set initial variables
// if (browser) {
// $idaa_loc.novi_uuid = data.params.uuid;
// $idaa_loc.novi_email = decodeURIComponent(data.params.email);
// $idaa_loc.novi_full_name = decodeURIComponent(data.params.full_name);
// // $idaa_loc.novi_admin_li = novi_admin_li;
// // $idaa_loc.novi_trusted_li = novi_trusted_li;
// console.log(`$idaa_loc.novi_uuid:`, $idaa_loc.novi_uuid);
// }
</script> </script>
<!-- <div
class="
ae_idaa__archives
container h-full mx-auto
flex flex-col gap-1
items-center
justify_center
py-1 px-2 pb-16
min-w-full
max-w-max
"
> -->
{@render children?.()} {@render children?.()}
<!-- </div> -->

17
src/routes/idaa/(idaa)/archives/+page.svelte
View File

@@ -130,20 +130,6 @@ function add_activity_log(
</title> </title>
</svelte:head> </svelte:head>
<section
class="
ae_idaa__archives
container h-full mx-auto
flex flex-col gap-1
items-center
justify_center
py-1 px-2 pb-16
min-w-full
max-w-max
"
>
<!-- <h1>Archives {$lq__archive_obj_li?.length}</h1> --> <!-- <h1>Archives {$lq__archive_obj_li?.length}</h1> -->
{#if $lq__archive_obj_li && $lq__archive_obj_li?.length} {#if $lq__archive_obj_li && $lq__archive_obj_li?.length}
@@ -153,6 +139,3 @@ function add_activity_log(
{:else} {:else}
<p>No archives available to show.</p> <p>No archives available to show.</p>
{/if} {/if}
</section>

8
src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte
View File

@@ -156,7 +156,6 @@ if (browser) {
let message = {'archive_id': $idaa_slct?.archive_id ?? null}; let message = {'archive_id': $idaa_slct?.archive_id ?? null};
window.parent.postMessage(message, "*"); window.parent.postMessage(message, "*");
} }
</script> </script>
@@ -168,8 +167,7 @@ if (browser) {
</title> </title>
</svelte:head> </svelte:head>
<!-- <section
<section
class=" class="
ae_idaa__archives ae_idaa__archives
h-full mx-auto h-full mx-auto
@@ -182,7 +180,7 @@ if (browser) {
text-center text-center
outline outline
" "
> > -->
<!-- <h1>Archives {$lq__archive_obj?.name} - {$lq__archive_content_obj_li?.length}</h1> --> <!-- <h1>Archives {$lq__archive_obj?.name} - {$lq__archive_content_obj_li?.length}</h1> -->
@@ -205,7 +203,7 @@ if (browser) {
lq__archive_content_obj_li={lq__archive_content_obj_li} lq__archive_content_obj_li={lq__archive_content_obj_li}
/> />
</section> <!-- </section> -->
<!-- Modal: Archive edit ID --> <!-- Modal: Archive edit ID -->

25
src/routes/idaa/(idaa)/bb/+layout.svelte
View File

@@ -1,23 +1,34 @@
<script lang="ts"> <script lang="ts">
/** @type {import('./$types').LayoutData} */
export let data: any;
let log_lvl: number = 0; let log_lvl: number = 0;
if (log_lvl > 1) { if (log_lvl > 1) {
console.log(`ae_idaa_bulletin_board +layout.svelte data:`, data); console.log(`ae_idaa_bulletin_board +layout.svelte`, data);
} }
// *** Import Aether specific variables and functions
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores'; import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores'; import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other. interface Props {
/** @type {import('./$types').LayoutData} */
data: any;
children?: import('svelte').Snippet;
}
let { data, children }: Props = $props();
// *** Quickly pull out data from parent(s)
$slct.account_id = data.account_id; $slct.account_id = data.account_id;
// console.log(`$slct.account_id = `, $slct.account_id);
let ae_acct = data[$slct.account_id]; let ae_acct = data[$slct.account_id];
console.log(`ae_acct = `, ae_acct); if (log_lvl) {
console.log(`ae_acct = `, ae_acct);
}
$idaa_slct.post_obj_li = ae_acct.slct.post_obj_li; $idaa_slct.post_obj_li = ae_acct.slct.post_obj_li;
// $idaa_slct.post_id = ae_acct.slct.post_id; // Not set here yet.
// *** Set initial variables
</script> </script>
<slot /> {@render children?.()}

8
src/routes/idaa/(idaa)/bb/+page.svelte
View File

@@ -240,7 +240,6 @@ function add_activity_log(
</script> </script>
<svelte:head> <svelte:head>
<title> <title>
IDAA Bulletin Board: IDAA Bulletin Board:
@@ -248,8 +247,7 @@ function add_activity_log(
</title> </title>
</svelte:head> </svelte:head>
<!-- <section
<section
class=" class="
ae_idaa__bb ae_idaa__bb
container h-full mx-auto container h-full mx-auto
@@ -259,7 +257,7 @@ function add_activity_log(
min-w-full min-w-full
max-w-max max-w-max
" "
> > -->
<Comp__post_options <Comp__post_options
@@ -276,7 +274,7 @@ function add_activity_log(
{/if} {/if}
</section> <!-- </section> -->
<!-- Modal: Post (Bulletin Board) view ID --> <!-- Modal: Post (Bulletin Board) view ID -->

27
src/routes/idaa/(idaa)/recovery_meetings/+layout.svelte
View File

@@ -1,13 +1,10 @@
<script lang="ts"> <script lang="ts">
/** @type {import('./$types').LayoutData} */
export let data: any;
let log_lvl: number = 0; let log_lvl: number = 0;
if (log_lvl > 1) { if (log_lvl > 1) {
console.log(`ae_idaa_recovery_meetings +layout.svelte data:`, data); console.log(`ae_idaa_recovery_meetings +layout.svelte`, data);
} }
// import { browser } from '$app/environment'; // *** Import Aether specific variables and functions
// import type { key_val } from '$lib/ae_stores'; // import type { key_val } from '$lib/ae_stores';
// import { ae_util } from '$lib/ae_utils/ae_utils'; // import { ae_util } from '$lib/ae_utils/ae_utils';
@@ -19,15 +16,27 @@ import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$
// import { events_func } from '$lib/ae_events_functions'; // import { events_func } from '$lib/ae_events_functions';
import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores'; import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other. interface Props {
/** @type {import('./$types').LayoutData} */
data: any;
children?: import('svelte').Snippet;
}
let { data, children }: Props = $props();
// *** Quickly pull out data from parent(s)
$slct.account_id = data.account_id; $slct.account_id = data.account_id;
// console.log(`$slct.account_id = `, $slct.account_id);
let ae_acct = data[$slct.account_id]; let ae_acct = data[$slct.account_id];
// console.log(`ae_acct = `, ae_acct); if (log_lvl) {
console.log(`ae_acct = `, ae_acct);
}
$idaa_slct.event_obj_li = ae_acct.slct.event_obj_li; $idaa_slct.event_obj_li = ae_acct.slct.event_obj_li;
// $idaa_slct.event_id = ae_acct.slct.event_id; // Not set here yet.
// *** Set initial variables
</script> </script>
<slot /> {@render children?.()}

10
src/routes/idaa/(idaa)/recovery_meetings/+page.svelte
View File

@@ -442,9 +442,7 @@ function add_activity_log(
</title> </title>
</svelte:head> </svelte:head>
<!-- <div
<div
class=" class="
ae_idaa__recovery_meetings ae_idaa__recovery_meetings
container h-full mx-auto container h-full mx-auto
@@ -455,13 +453,12 @@ function add_activity_log(
min-w-full min-w-full
max-w-max max-w-max
" "
> > -->
<Comp__event_obj_qry <Comp__event_obj_qry
bind:event_id_random_li={event_id_random_li} bind:event_id_random_li={event_id_random_li}
/> />
<Element_data_store <Element_data_store
ds_code="recovery_meetings_info" ds_code="recovery_meetings_info"
ds_type="html" ds_type="html"
@@ -469,7 +466,6 @@ function add_activity_log(
show_edit_btn={true} show_edit_btn={true}
/> />
{#if $lq_new__event_obj_li && $lq_new__event_obj_li?.length} {#if $lq_new__event_obj_li && $lq_new__event_obj_li?.length}
<Comp__event_obj_li <Comp__event_obj_li
lq__event_obj_li={lq_new__event_obj_li} lq__event_obj_li={lq_new__event_obj_li}
@@ -479,7 +475,7 @@ function add_activity_log(
{/if} {/if}
</div> <!-- </div> -->
<!-- Modal: Event (Recovery Meeting) edit ID --> <!-- Modal: Event (Recovery Meeting) edit ID -->

60
src/routes/idaa/+layout.svelte
View File

@@ -182,6 +182,15 @@ $effect(() => {
// }); // });
}); });
// if (browser) {
// $idaa_loc.novi_uuid = data.params.uuid;
// $idaa_loc.novi_email = decodeURIComponent(data.params.email);
// $idaa_loc.novi_full_name = decodeURIComponent(data.params.full_name);
// // $idaa_loc.novi_admin_li = novi_admin_li;
// // $idaa_loc.novi_trusted_li = novi_trusted_li;
// console.log(`$idaa_loc.novi_uuid:`, $idaa_loc.novi_uuid);
// }
</script> </script>
<svelte:head> <svelte:head>
@@ -196,7 +205,12 @@ $effect(() => {
bind:this={box} bind:this={box}
onscroll={parse_scroll} onscroll={parse_scroll}
class:iframe={$ae_loc?.iframe} class:iframe={$ae_loc?.iframe}
class="ae_idaa h-full max-h-full max-w-6xl overflow-auto flex flex-col gap-1 m-auto" class="
ae_idaa
h-full max-h-full max-w-6xl overflow-auto
flex flex-col gap-1
m-auto
"
> >
<nav <nav
@@ -299,16 +313,19 @@ $effect(() => {
</div> </div>
<!-- </AppShell> --> <!-- </AppShell> -->
<!-- bottom-4 -->
<button <button
class="ae_idaa__recovery_meetings__scroll_top_btn btn btn-sm btn-secondary preset-tonal-surface fixed bottom-4 right-24 z-50 opacity-75 hover:opacity-100" class="ae_idaa__recovery_meetings__scroll_top_btn btn btn-sm btn-secondary preset-tonal-surface fixed top-1/2 right-1 z-50 opacity-75 hover:opacity-100"
class:hidden={yTop < 600} class:hidden={yTop < 750}
class:ae_btn_warning_outlined={is_safari} class:ae_btn_warning_outlined={is_safari}
class:ae_btn_success_outlined={!is_safari} class:ae_btn_success_outlined={!is_safari}
class:ae_btn_warning_filled={yTop > 1500}
onclick={() => { onclick={() => {
log_lvl = 1; log_lvl = 1;
if (log_lvl) { if (log_lvl) {
console.log(`Scroll to top button clicked. scroll_y: ${scroll_y} scrollTop: ${scroll_container().scrollTop}`, scroll_container()); 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.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
// document.body.scrollTop = 0; // For Safari // document.body.scrollTop = 0; // For Safari
} }
@@ -316,48 +333,13 @@ $effect(() => {
if (is_safari) { if (is_safari) {
console.log('Safari detected, not using smooth scroll to top'); console.log('Safari detected, not using smooth scroll to top');
document.getElementById('ae_idaa')?.scrollTo(0, 0); document.getElementById('ae_idaa')?.scrollTo(0, 0);
// document.documentElement?.scrollTo(0, 0);
// document.body?.scrollTo(0, 0); // For Safari
// if ($ae_loc.edit_mode) {
// // If in edit mode, scroll to the top of the page
// document.getElementById('ae_idaa')?.scrollTo(0, 0);
// } else {
// // If not in edit mode, scroll to the top of document element
// document.documentElement?.scrollTo(0, 0);
// }
} else { } else {
console.log('Not Safari, using smooth scroll to top'); console.log('Not Safari, using smooth scroll to top');
document.getElementById('ae_idaa')?.scrollTo({ document.getElementById('ae_idaa')?.scrollTo({
top: 0, top: 0,
behavior: 'smooth' behavior: 'smooth'
}); });
// if ($ae_loc.edit_mode) {
// document.getElementById('ae_idaa')?.scrollTo({
// top: 0,
// behavior: 'smooth'
// });
// } else {
// document.documentElement?.scrollTo({
// top: 0,
// behavior: 'smooth'
// });
// }
} }
// go_top();
// window.scrollTo({ top: 0, behavior: 'smooth' });
// window.scrollTo({ top: 0, behavior: 'smooth' });
// document.body.scrollIntoView();
// document.body.scrollTop = 0; // For Safari
// console.l
// scroll_y = 0;
}} }}
title="Scroll to top" title="Scroll to top"
> >