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

Mostly layout and style clean up

Browse Source
This commit is contained in:
Scott Idem
2025-05-14 19:57:22 -04:00
parent 372cafeb01
commit c46c670e87
5 changed files with 149 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/e_app_access_type.svelte
View File

@@ -273,7 +273,7 @@ function handle_clear_access() {
class=" class="
ae_access_type ae_access_type
hidden-print hidden-print
bg-red-100 text-gray-900 bg-blue-100 text-gray-900
duration-300 delay-150 hover:delay-1000 hover:ease-out duration-300 delay-150 hover:delay-1000 hover:ease-out
transition-all hover:transition-all transition-all hover:transition-all
flex flex-col flex-wrap gap-1 flex flex-col flex-wrap gap-1

2
src/lib/e_app_cfg.svelte
View File

@@ -98,7 +98,7 @@ function handle_clear_storage(item: null|string) {
class=" class="
ae_app_cfg ae_app_cfg
hidden-print hidden-print
bg-red-100 text-gray-900 bg-blue-100 text-gray-900
transition hover:transition-all transition hover:transition-all
flex flex-col flex-wrap gap-1 flex flex-col flex-wrap gap-1
items-center justify-center items-center justify-center

9
src/lib/e_app_debug_menu.svelte
View File

@@ -36,7 +36,7 @@ let {
<!-- opacity-25 <!-- opacity-25
hover:opacity-100 --> hover:opacity-100 -->
<!-- text-slate-400 hover:text-slate-800 --> <!-- text-slate-400 hover:text-slate-800 -->
<div <section
class=" class="
absolute bottom-0 left-0 absolute bottom-0 left-0
flex flex
@@ -178,12 +178,13 @@ hover:opacity-100 -->
<!-- fixed bottom-0 left-0 --> <!-- fixed bottom-0 left-0 -->
&pi; &pi;
</button> </button>
</div>
</section>
<style lang="postcss"> <style lang="postcss">
/* BEGIN: AE's Svelte Quick Debug component */ /* BEGIN: AE's Svelte Quick Debug component */
#AE-Quick-Debug { #xxxAE-Quick-Debug {
/* position: absolute; */ /* position: absolute; */
/* position: fixed; */ /* position: fixed; */
/* position: relative; */ /* position: relative; */
@@ -221,7 +222,7 @@ hover:opacity-100 -->
transition-timing-function: ease-out; transition-timing-function: ease-out;
} }
#AE-Quick-Debug:hover { #xxxAE-Quick-Debug:hover {
/* lightyellow */ /* lightyellow */
/* background-color: hsla(60,100%,90%,.95); */ /* background-color: hsla(60,100%,90%,.95); */
/* background-color: rgba(var(--color-surface-500) / 1); */ /* background-color: rgba(var(--color-surface-500) / 1); */

2
src/lib/e_app_sign_in_out.svelte
View File

@@ -281,7 +281,7 @@ async function handle_change_password() {
class=" class="
ae_sign_in_out ae_sign_in_out
hidden-print hidden-print
bg-red-100 text-gray-900 bg-blue-100 text-gray-900
transition-all duration-300 delay-150 hover:delay-1000 hover:ease-out hover:transition-all transition-all duration-300 delay-150 hover:delay-1000 hover:ease-out hover:transition-all
flex flex-col flex-wrap gap-1 flex flex-col flex-wrap gap-1
items-end justify-center items-end justify-center

196
src/lib/e_app_sys_menu.svelte
View File

@@ -52,7 +52,7 @@ let trigger_clear_access: null|boolean = $state(null);
max-h-max max-h-max
min-w-full min-w-full
max-w-max --> max-w-max -->
<section <!-- <section
class=" class="
ae_app__menu ae_app__menu
hidden-print hidden-print
@@ -74,9 +74,77 @@ max-w-max -->
z-10 hover:z-20 z-10 hover:z-20
" "
class:hidden={!$ae_loc?.app_cfg?.show_element__menu_btn} class:hidden={!$ae_loc?.app_cfg?.show_element__menu_btn}
> -->
<!-- && !$ae_loc?.app_cfg?.show_element__menu -->
<!-- !$ae_loc?.app_cfg?.show_element__menu_btn -->
<section
class="
absolute bottom-6 right-0
flex flex-col-reverse gap-1
items-end justify-center
text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg
dark:text-slate-400 dark:hover:text-slate-200
bg-blue-100/60 dark:bg-blue-800/50
hover:bg-blue-200 hover:dark:bg-blue-900
mx-1 my-2
w-min
max-w-md
transition-all
transition-delay-1000
transition-duration-1000
ease-in
z-50
opacity-60
hover:opacity-100
border-2
border-blue-300 dark:border-blue-700
hover:border-blue-500 hover:dark:border-blue-500
"
class:top-0={$ae_loc?.app_cfg?.show_element__menu & 1 == 3}
class:w-full={$ae_loc?.app_cfg?.show_element__menu}
class:hidden={false}
class:border-transparent={!$ae_loc?.app_cfg?.show_element__menu}
class:hover:border-transparent={!$ae_loc?.app_cfg?.show_element__menu}
class:hover:bg-transparent={!$ae_loc?.app_cfg?.show_element__menu}
> >
<span class="hidden"
<div
class:hidden={!$ae_loc?.show_element__menu && 1 == 3}
class:border-green-200={$ae_loc?.show_element__menu}
class:dark:border-green-800={$ae_loc?.show_element__menu}
class="
flex flex-col items-end justify-end
gap-1
transition-all
transition-delay-1000
transition-duration-1000
ease-in
overflow-y-auto
p-1
bg-white dark:dark-gray-800
relative
*:hover:inline
*:hover:visible
opacity-50
hover:opacity-100
"
>
<span
class:hidden={!$ae_loc?.app_cfg?.show_element__menu}
class:hover:visible={$ae_loc?.app_cfg?.show_element__menu}
class:invisible={!$ae_loc?.app_cfg?.show_element__menu}
class="w-48"
title=" title="
Name: {$ae_loc?.person?.full_name ?? '-- not set --'} Name: {$ae_loc?.person?.full_name ?? '-- not set --'}
Username: {$ae_loc?.user?.username ?? '-- not set --'} Username: {$ae_loc?.user?.username ?? '-- not set --'}
@@ -97,14 +165,18 @@ max-w-max -->
$ae_loc.edit_mode = false; $ae_loc.edit_mode = false;
// dispatch_edit_mode_changed(); // dispatch_edit_mode_changed();
}} }}
class="btn btn-md px-2 variant-ghost-success hover:variant-filled-success transition-all *:hover:inline-block" class="btn btn-md px-2 variant-ghost-success hover:variant-filled-success transition-all
"
title="Edit mode is currently enabled. Click to disable." title="Edit mode is currently enabled. Click to disable."
> >
<span class="fas fa-toggle-on mx-1"></span> <span class=" *:hover:inline-block">
<span class="fas fa-toggle-on mx-1 inline-block"></span>
Edit Edit
<span class="hidden"> <span class="hidden">
Mode On Mode On
</span> </span>
</span>
</button> </button>
{:else if $ae_loc.authenticated_access} {:else if $ae_loc.authenticated_access}
<button <button
@@ -123,15 +195,15 @@ max-w-max -->
</span> </span>
</button> </button>
{/if} {/if}
<span>
<div class="flex flex-row flex-wrap gap-1 items-center justify-center transition-all *:hover:inline"> <div class="flex flex-row gap-1 items-center justify-between transition-all w-auto">
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'} {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
<span <span
class="*:hover:inline" class="*:hover:inline"
title={`Current access type/level: ${$ae_loc.access_type}`} title={`Current access type/level: ${$ae_loc.access_type}`}
> >
<!-- <span class="fas fa-unlock mx-1"></span> --> <!-- <span class="fas fa-unlock mx-1"></span> -->
<ShieldPlus class="inline-block" /> <!-- <ShieldPlus class="inline-block" /> -->
{#if $ae_loc.access_type == 'super'} {#if $ae_loc.access_type == 'super'}
@@ -167,14 +239,14 @@ max-w-max -->
// trigger_clear_access = true; // trigger_clear_access = true;
// $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input; // $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input;
if ($ae_loc?.app_cfg?.show_element__menu_btn) { if (!$ae_loc?.app_cfg?.show_element__menu) {
$ae_loc.app_cfg.show_element__menu = true; $ae_loc.app_cfg.show_element__menu = true;
$ae_loc.app_cfg.show_element__menu_btn = false; // $ae_loc.app_cfg.show_element__menu_btn = false;
$ae_loc.app_cfg.show_element__access_type = true; $ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__passcode_input = true; $ae_loc.app_cfg.show_element__passcode_input = true;
} else { } else {
$ae_loc.app_cfg.show_element__menu = false; $ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true; // $ae_loc.app_cfg.show_element__menu_btn = true;
} }
}} }}
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all *:hover:inline" class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all *:hover:inline"
@@ -249,16 +321,19 @@ max-w-max -->
</button> </button>
{/if} {/if}
</div> </div>
</span>
<!-- <div> -->
<button <button
type="button" type="button"
class="btn btn-sm variant-outline-surface hover:variant-ghost-success *:hover:inline-block w-full hidden px-6 py-1" class:w-48={$ae_loc?.app_cfg?.show_element__menu}
title="Sign In" class:visible={$ae_loc?.app_cfg?.show_element__menu}
class:invisible={!$ae_loc?.app_cfg?.show_element__menu}
class="btn btn-sm variant-outline-surface hover:variant-ghost-success px-6 py-1"
title="Show or hide the menu"
onclick={async () => { onclick={async () => {
if ($ae_loc?.app_cfg?.show_element__menu_btn) { if (!$ae_loc?.app_cfg?.show_element__menu) {
$ae_loc.app_cfg.show_element__menu = true; $ae_loc.app_cfg.show_element__menu = true;
$ae_loc.app_cfg.show_element__menu_btn = false; // $ae_loc.app_cfg.show_element__menu_btn = false;
$ae_loc.app_cfg.show_element__access_type = true; $ae_loc.app_cfg.show_element__access_type = true;
if ($ae_loc?.access_type == 'anonymous') { if ($ae_loc?.access_type == 'anonymous') {
@@ -274,47 +349,54 @@ max-w-max -->
to_focus?.focus(); to_focus?.focus();
} else { } else {
$ae_loc.app_cfg.show_element__menu = false; $ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true; // $ae_loc.app_cfg.show_element__menu_btn = true;
$ae_loc.app_cfg.show_element__passcode_input = false; $ae_loc.app_cfg.show_element__passcode_input = false;
} }
// $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn; // $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
}} }}
> >
<span class=" *:hover:inline-block">
{#if $ae_loc?.app_cfg?.show_element__menu} {#if $ae_loc?.app_cfg?.show_element__menu}
<CircleX class="inline-block" /> <CircleX class="inline-block" />
<!-- <span class="hidden"> --> <span class="inline-block">
Hide Menu Hide Menu
<!-- </span> --> </span>
{:else} {:else}
<Menu class="inline-block" /> <Menu class="inline-block" />
<span class="hidden"> <span class="hidden">
Menu Menu
</span> </span>
{/if} {/if}
</span>
</button> </button>
<!-- </div> -->
</div>
</section>
<!-- Show menu on right side of page --> <!-- Show menu on right side of page -->
<!-- min-h-96 --> <!-- min-h-96 -->
<section <!-- absolute right-0 bottom-10 -->
<!-- opacity-50 -->
<!-- hover:opacity-100 -->
<!-- bg-white dark:bg-gray-800 -->
<div
class=" class="
ae_app__menu ae_app__menu
hidden-print hidden-print
flex flex-col flex flex-col
items-center items-end
justify-end justify-end
gap-4 gap-4
min-w-48 min-w-48
absolute right-0 bottom-10
bg-white dark:bg-gray-800
border border-gray-200 dark:border-gray-700 border border-gray-200 dark:border-gray-700
rounded-lg rounded-lg
p-2 px-1 py-2
opacity-50
hover:opacity-100
duration-100 delay-1000 hover:delay-100 hover:ease-out duration-100 delay-1000 hover:delay-100 hover:ease-out
transition hover:transition-all transition hover:transition-all
z-20 hover:z-30 z-20 hover:z-30
@@ -322,6 +404,35 @@ max-w-max -->
class:hidden={!$ae_loc?.app_cfg?.show_element__menu} class:hidden={!$ae_loc?.app_cfg?.show_element__menu}
> >
<button
type="button"
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning *:hover:inline px-6 py-1"
title="Sign In"
onclick={() => {
if (!$ae_loc?.app_cfg?.show_element__menu) {
$ae_loc.app_cfg.show_element__menu = true;
// $ae_loc.app_cfg.show_element__menu_btn = false;
} else {
$ae_loc.app_cfg.show_element__menu = false;
// $ae_loc.app_cfg.show_element__menu_btn = true;
}
// $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
// $ae_loc.app_cfg.show_element__menu = !$ae_loc?.app_cfg?.show_element__menu;
}}
>
{#if $ae_loc?.app_cfg?.show_element__menu}
<CircleX class="mx-1 inline-block" />
<!-- <span class="hidden"> -->
Hide Menu
<!-- </span> -->
{:else}
<Menu class="mx-1 inline-block" />
<!-- <span class="hidden"> -->
Menu
<!-- </span> -->
{/if}
</button>
<!-- {#if $ae_loc?.app_cfg?.show_element__cfg} --> <!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
<span <span
class:hidden={!$ae_loc?.app_cfg?.show_element__cfg || !$ae_loc.edit_mode} class:hidden={!$ae_loc?.app_cfg?.show_element__cfg || !$ae_loc.edit_mode}
@@ -348,33 +459,8 @@ max-w-max -->
/> />
{/if} {/if}
<button
type="button"
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning *:hover:inline w-full px-6 py-1" </div>
title="Sign In"
onclick={() => {
if ($ae_loc?.app_cfg?.show_element__menu_btn) {
$ae_loc.app_cfg.show_element__menu = true;
$ae_loc.app_cfg.show_element__menu_btn = false;
} else {
$ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;
}
// $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
// $ae_loc.app_cfg.show_element__menu = !$ae_loc?.app_cfg?.show_element__menu;
}}
>
{#if $ae_loc?.app_cfg?.show_element__menu}
<CircleX class="mx-1 inline-block" />
<!-- <span class="hidden"> -->
Hide Menu
<!-- </span> -->
{:else}
<Menu class="mx-1 inline-block" />
<!-- <span class="hidden"> -->
Menu
<!-- </span> -->
{/if}
</button>
</section> </section>