Work on expanding the routes
This commit is contained in:
Scott Idem
@@ -90,100 +90,173 @@ function dispatch_something_changed() {
|
||||
</script>
|
||||
|
||||
|
||||
<section id="AE-App-Cfg" class="ae_app_cfg transition duration-300 delay-150 hover:delay-300 hover:transition-all hidden-print">
|
||||
<!-- transition duration-500 delay-1000 hover:duration-500 hover:delay-1000 hover:transition-all -->
|
||||
<section id="AE-App-Cfg" class="ae_app_cfg bg-surface-100 text-surface-800 transition hover:transition-all hidden-print">
|
||||
|
||||
<div
|
||||
class="ae_cfg_content"
|
||||
class="ae_cfg_content text-xs space-y-4 my-4"
|
||||
class:hidden={!$ae_loc.hub.show_element__cfg_detail}
|
||||
data-sveltekit-preload-data="false"
|
||||
>
|
||||
|
||||
<div>
|
||||
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
|
||||
{#if $ae_loc.access_type == 'super'}
|
||||
<span class="fas fa-secret"></span> Super Access
|
||||
{:else if $ae_loc.access_type == 'manager'}
|
||||
<span class="fas fa-user-shield"></span> Manager Access
|
||||
{:else if $ae_loc.access_type == 'administrator'}
|
||||
<span class="fas fa-user-ninja"></span> Administrator Access
|
||||
{:else if $ae_loc.access_type == 'trusted'}
|
||||
<span class="fas fa-user-nurse"></span> Trusted Access
|
||||
{:else if $ae_loc.access_type == 'authenticated'}
|
||||
<span class="fas fa-user-friends"></span> Authenticated Access
|
||||
{:else if $ae_loc.access_type == 'anonymous'}
|
||||
<span class="fas fa-users"></span> Anonymous Access
|
||||
{:else}
|
||||
<span class="fas fa-unlock mx-1"></span> Unknown Access
|
||||
{/if}
|
||||
|
||||
<button
|
||||
class="btn btn-sm variant-soft-secondary access_type_lock_btn hover:transition-all"
|
||||
on:click={() => {
|
||||
handle_clear_access();
|
||||
}}
|
||||
title="Access mode is currently enabled/unlocked. Click to exit and lock."
|
||||
>
|
||||
<span class="fas fa-lock mx-1"></span> Lock
|
||||
</button>
|
||||
<section class="space-y-2">
|
||||
<div>
|
||||
<h2 class="strong">Access Type:</h2>
|
||||
<div>
|
||||
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
|
||||
{#if $ae_loc.access_type == 'super'}
|
||||
<span class="fas fa-secret"></span> Super Access
|
||||
{:else if $ae_loc.access_type == 'manager'}
|
||||
<span class="fas fa-user-shield"></span> Manager Access
|
||||
{:else if $ae_loc.access_type == 'administrator'}
|
||||
<span class="fas fa-user-ninja"></span> Administrator Access
|
||||
{:else if $ae_loc.access_type == 'trusted'}
|
||||
<span class="fas fa-user-nurse"></span> Trusted Access
|
||||
{:else if $ae_loc.access_type == 'authenticated'}
|
||||
<span class="fas fa-user-friends"></span> Authenticated Access
|
||||
{:else if $ae_loc.access_type == 'anonymous'}
|
||||
<span class="fas fa-users"></span> Anonymous Access
|
||||
{:else}
|
||||
Not logged in
|
||||
<span class="fas fa-unlock mx-1"></span> Unknown Access
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Theme:
|
||||
<div>
|
||||
<!-- Light/Dark Theme: -->
|
||||
<RadioGroup
|
||||
active="variant-soft"
|
||||
hover="hover:variant-ringed-primary"
|
||||
>
|
||||
<RadioItem
|
||||
on:change={() => {
|
||||
$slct_trigger = 'set_theme_mode';
|
||||
}}
|
||||
bind:group={$ae_loc.hub.theme_mode}
|
||||
name="theme_light"
|
||||
value={'light'}
|
||||
>
|
||||
Light
|
||||
</RadioItem>
|
||||
<RadioItem
|
||||
on:change={() => {
|
||||
$slct_trigger = 'set_theme_mode';
|
||||
}}
|
||||
bind:group={$ae_loc.hub.theme_mode}
|
||||
name="theme_dark"
|
||||
value={'dark'}
|
||||
>
|
||||
Dark
|
||||
</RadioItem>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<!-- Theme Name: -->
|
||||
<select
|
||||
on:change={() => {
|
||||
$slct_trigger = 'set_theme_name';
|
||||
<!-- <button
|
||||
class="btn btn-sm variant-glass-secondary access_type_lock_btn hover:transition-all"
|
||||
on:click={() => {
|
||||
handle_clear_access();
|
||||
}}
|
||||
bind:value={$ae_loc.hub.theme_name}
|
||||
class="select"
|
||||
title="Theme name"
|
||||
title="Access mode is currently enabled/unlocked. Click to exit and lock."
|
||||
>
|
||||
<option value="">-- None --</option>
|
||||
<option value="gold-nouveau">Gold Nouveau</option>
|
||||
<option value="hamlindigo">Hamlindigo</option>
|
||||
<option value="modern">Modern</option>
|
||||
<option value="rocket">Rocket</option>
|
||||
<option value="wintry">Wintry</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<span class="fas fa-lock mx-1"></span> Lock
|
||||
</button> -->
|
||||
{:else}
|
||||
Not logged in
|
||||
{/if}
|
||||
</section>
|
||||
<!-- END: Access Type -->
|
||||
|
||||
|
||||
<section class="space-y-2">
|
||||
<h2 class="strong">Theme:</h2>
|
||||
<div>
|
||||
<!-- Light/Dark Theme: -->
|
||||
<RadioGroup
|
||||
active="variant-glass-success"
|
||||
hover="hover:variant-ringed-surface"
|
||||
>
|
||||
<RadioItem
|
||||
on:change={() => {
|
||||
$slct_trigger = 'set_theme_mode';
|
||||
}}
|
||||
bind:group={$ae_loc.hub.theme_mode}
|
||||
name="theme_light"
|
||||
value={'light'}
|
||||
>
|
||||
Light
|
||||
</RadioItem>
|
||||
<RadioItem
|
||||
on:change={() => {
|
||||
$slct_trigger = 'set_theme_mode';
|
||||
}}
|
||||
bind:group={$ae_loc.hub.theme_mode}
|
||||
name="theme_dark"
|
||||
value={'dark'}
|
||||
>
|
||||
Dark
|
||||
</RadioItem>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<!-- Theme Name: -->
|
||||
<select
|
||||
on:change={() => {
|
||||
$slct_trigger = 'set_theme_name';
|
||||
}}
|
||||
bind:value={$ae_loc.hub.theme_name}
|
||||
class="select"
|
||||
title="Theme name"
|
||||
>
|
||||
<option value="">-- None --</option>
|
||||
<option value="gold-nouveau">Gold Nouveau</option>
|
||||
<option value="hamlindigo">Hamlindigo</option>
|
||||
<option value="modern">Modern</option>
|
||||
<option value="rocket">Rocket</option>
|
||||
<option value="wintry">Wintry</option>
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
<!-- END: Theme -->
|
||||
|
||||
|
||||
<section class="space-y-2">
|
||||
|
||||
<h2 class="strong">Utilities:</h2>
|
||||
<a
|
||||
class="btn btn-sm variant-glass-secondary"
|
||||
href="/hosted_files"
|
||||
>
|
||||
<span class="fas fa-code mx-1"></span>
|
||||
Util: Convert Videos
|
||||
</a>
|
||||
|
||||
{#if $ae_loc.iframe}
|
||||
<a
|
||||
class="btn btn-sm variant-glass-secondary"
|
||||
href="/?iframe=false"
|
||||
>
|
||||
<span class="fas fa-code mx-1"></span>
|
||||
Exit iframe Mode
|
||||
</a>
|
||||
{:else}
|
||||
<a
|
||||
class="btn btn-sm variant-glass-secondary"
|
||||
href="/?iframe=true"
|
||||
>
|
||||
<span class="fas fa-code mx-1"></span>
|
||||
Use iframe Mode
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<div>
|
||||
<button
|
||||
class="btn btn-sm variant-glass-warning"
|
||||
title="Reload and clear the page cache"
|
||||
on:click={() => {
|
||||
// $ae_loc.
|
||||
window.location.reload(true);
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-sync mx-1"></span>
|
||||
Reload and
|
||||
<span class="fas fa-trash mx-1"></span>
|
||||
Clear Cache
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm variant-glass-warning"
|
||||
title="Clear the browser storage for this page"
|
||||
on:click={() => {
|
||||
// $ae_loc.
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
alert('Local and Session Storage cleared. You will probably want to refresh the page.');
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-eraser mx-1"></span>
|
||||
Clear Storage
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!-- END: Utilities -->
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<button
|
||||
class="btn btn-sm ae_cfg_btn hover:transition-all"
|
||||
class="btn btn-sm variant-glass-warning ae_cfg_btn hover:transition-all"
|
||||
on:click={() => {
|
||||
$ae_loc.hub.show_element__cfg_detail = !$ae_loc.hub.show_element__cfg_detail;
|
||||
}}
|
||||
@@ -192,6 +265,7 @@ function dispatch_something_changed() {
|
||||
<span class="cfg_text">Config</span>
|
||||
</button>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@@ -211,15 +285,16 @@ function dispatch_something_changed() {
|
||||
|
||||
/* lightyellow */
|
||||
/* background-color: hsla(60,100%,90%,.30); */
|
||||
background-color: rgba(var(--color-surface-500) / .5);
|
||||
/* background-color: rgba(var(--color-surface-500) / .95); */
|
||||
|
||||
border-top: solid thin black;
|
||||
border-right: solid thin black;
|
||||
border-bottom: solid thin black;
|
||||
border-top: solid thin hsla(0,0%,0%,.5);
|
||||
border-right: solid thin hsla(0,0%,0%,.5);
|
||||
border-bottom: solid thin hsla(0,0%,0%,.5);
|
||||
border-top-right-radius: .5em;
|
||||
border-bottom-right-radius: .5em;
|
||||
|
||||
opacity: .50;
|
||||
opacity: .15;
|
||||
/* opacity: 1; */
|
||||
|
||||
font-size: .75rem;
|
||||
|
||||
@@ -227,22 +302,28 @@ function dispatch_something_changed() {
|
||||
|
||||
/* NOTE: transition when no longer hovering */
|
||||
transition-property: opacity, background-color;
|
||||
transition-delay: .1s;
|
||||
transition-duration: .4s;
|
||||
transition-timing-function: linear;
|
||||
transition-delay: 1.25s;
|
||||
transition-duration: .5s;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
#AE-App-Cfg:hover {
|
||||
/* lightyellow */
|
||||
/* background-color: hsla(60,100%,90%,.95); */
|
||||
background-color: rgba(var(--color-surface-500) / 1);
|
||||
/* background-color: rgba(var(--color-surface-100) / 1); */
|
||||
/* color: black; */
|
||||
|
||||
border-top: solid thin hsla(0,0%,0%,.95);
|
||||
border-right: solid thin hsla(0,0%,0%,.95);
|
||||
border-bottom: solid thin hsla(0,0%,0%,.95);
|
||||
|
||||
opacity: 1;
|
||||
|
||||
/* NOTE: transition when hover starts */
|
||||
transition-property: opacity, background-color;
|
||||
/* transition-delay: .5s; */
|
||||
transition-delay: .5s;
|
||||
transition-duration: .10s;
|
||||
transition-timing-function: linear;
|
||||
transition-timing-function: ease-in;
|
||||
}
|
||||
|
||||
.ae_cfg_btn .cfg_text {
|
||||
|
||||
Reference in New Issue
Block a user