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="
ae_access_type
hidden-print
bg-red-100 text-gray-900
bg-blue-100 text-gray-900
duration-300 delay-150 hover:delay-1000 hover:ease-out
transition-all hover:transition-all
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="
ae_app_cfg
hidden-print
bg-red-100 text-gray-900
bg-blue-100 text-gray-900
transition hover:transition-all
flex flex-col flex-wrap gap-1
items-center justify-center

9
src/lib/e_app_debug_menu.svelte
View File

@@ -36,7 +36,7 @@ let {
<!-- opacity-25
hover:opacity-100 -->
<!-- text-slate-400 hover:text-slate-800 -->
<div
<section
class="
absolute bottom-0 left-0
flex
@@ -178,12 +178,13 @@ hover:opacity-100 -->
<!-- fixed bottom-0 left-0 -->
&pi;
</button>
</div>
</section>
<style lang="postcss">
/* BEGIN: AE's Svelte Quick Debug component */
#AE-Quick-Debug {
#xxxAE-Quick-Debug {
/* position: absolute; */
/* position: fixed; */
/* position: relative; */
@@ -221,7 +222,7 @@ hover:opacity-100 -->
transition-timing-function: ease-out;
}
#AE-Quick-Debug:hover {
#xxxAE-Quick-Debug:hover {
/* lightyellow */
/* background-color: hsla(60,100%,90%,.95); */
/* 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="
ae_sign_in_out
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
flex flex-col flex-wrap gap-1
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
min-w-full
max-w-max -->
<section
<!-- <section
class="
ae_app__menu
hidden-print
@@ -74,9 +74,77 @@ max-w-max -->
z-10 hover:z-20
"
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="
Name: {$ae_loc?.person?.full_name ?? '-- not set --'}
Username: {$ae_loc?.user?.username ?? '-- not set --'}
@@ -97,14 +165,18 @@ max-w-max -->
$ae_loc.edit_mode = false;
// 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."
>
<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
<span class="hidden">
Mode On
</span>
</span>
</button>
{:else if $ae_loc.authenticated_access}
<button
@@ -123,15 +195,15 @@ max-w-max -->
</span>
</button>
{/if}
<div class="flex flex-row flex-wrap gap-1 items-center justify-center transition-all *:hover:inline">
<span>
<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'}
<span
class="*:hover:inline"
title={`Current access type/level: ${$ae_loc.access_type}`}
>
<!-- <span class="fas fa-unlock mx-1"></span> -->
<ShieldPlus class="inline-block" />
<!-- <ShieldPlus class="inline-block" /> -->
{#if $ae_loc.access_type == 'super'}
@@ -167,14 +239,14 @@ max-w-max -->
// trigger_clear_access = true;
// $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_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__passcode_input = true;
} 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 = true;
}
}}
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all *:hover:inline"
@@ -249,16 +321,19 @@ max-w-max -->
</button>
{/if}
</div>
</span>
<!-- <div> -->
<button
type="button"
class="btn btn-sm variant-outline-surface hover:variant-ghost-success *:hover:inline-block w-full hidden px-6 py-1"
title="Sign In"
class:w-48={$ae_loc?.app_cfg?.show_element__menu}
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 () => {
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_btn = false;
// $ae_loc.app_cfg.show_element__menu_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
if ($ae_loc?.access_type == 'anonymous') {
@@ -274,47 +349,54 @@ max-w-max -->
to_focus?.focus();
} 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 = true;
$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;
}}
>
<span class=" *:hover:inline-block">
{#if $ae_loc?.app_cfg?.show_element__menu}
<CircleX class="inline-block" />
<!-- <span class="hidden"> -->
<span class="inline-block">
Hide Menu
<!-- </span> -->
</span>
{:else}
<Menu class="inline-block" />
<span class="hidden">
Menu
</span>
{/if}
</span>
</button>
<!-- </div> -->
</div>
</section>
<!-- Show menu on right side of page -->
<!-- min-h-96 -->
<section
<!-- absolute right-0 bottom-10 -->
<!-- opacity-50 -->
<!-- hover:opacity-100 -->
<!-- bg-white dark:bg-gray-800 -->
<div
class="
ae_app__menu
hidden-print
flex flex-col
items-center
items-end
justify-end
gap-4
min-w-48
absolute right-0 bottom-10
bg-white dark:bg-gray-800
border border-gray-200 dark:border-gray-700
rounded-lg
p-2
opacity-50
hover:opacity-100
px-1 py-2
duration-100 delay-1000 hover:delay-100 hover:ease-out
transition hover:transition-all
z-20 hover:z-30
@@ -322,6 +404,35 @@ max-w-max -->
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} -->
<span
class:hidden={!$ae_loc?.app_cfg?.show_element__cfg || !$ae_loc.edit_mode}
@@ -348,33 +459,8 @@ max-w-max -->
/>
{/if}
<button
type="button"
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning *:hover:inline w-full px-6 py-1"
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>
</div>
</section>