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

ui: hide Session Search nav on its own page, dark mode file list, font size cycler

Browse Source 
- event_page_menu: set events__session_search=false — the Session Search nav
  link was redundantly appearing on the Session Search page itself

- element_manage_event_file_li: replace hardcoded gray hover colors with
  theme-aware surface tokens (hover:bg-surface-100-900, border-surface-200-800)
  and add transition-colors; fixes light-on-light in dark mode for the file
  list table rows and Event File Purpose select element

- font size cycler (default → larger → smaller → default):
  - ae_stores: add font_size_mode: 'default' to ae_loc defaults
  - app.css: html.font-size-larger (112.5%) and html.font-size-smaller (87.5%)
  - +layout.svelte: DOM effect applies/removes font-size-* class on <html>
  - e_app_sys_menu: compact A / A+ / A− button cycles the mode
This commit is contained in:
Scott Idem
2026-03-06 21:35:06 -05:00
parent 9f228a35fa
commit 95508458f6
6 changed files with 55 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app.css
View File

@@ -137,6 +137,12 @@ body {
/* font-family: 'Noto Sans', sans-serif; */
}
/* Font size accessibility modes — cycled via the font size button in the sys menu.
Applied as a class on <html> by the layout DOM effect.
The 'default' mode has no class (browser default, typically 16px). */
html.font-size-larger { font-size: 112.5%; } /* ~18px base */
html.font-size-smaller { font-size: 87.5%; } /* ~14px base */
html.super_access #appShell {
background-color: hsla(0, 100%, 50%, 0.5);
}

36
src/lib/app_components/e_app_sys_menu.svelte
View File

@@ -385,6 +385,42 @@ max-w-max -->
</button>
{/if}
<!-- Font Size Cycler: default → larger → smaller → default -->
<button
type="button"
class:w-full={expand}
class="
btn btn-base text-sm
preset-tonal-surface
hover:preset-tonal-primary
px-1 py-1
min-w-22 md:min-w-30 w-full max-w-fit
transition-all group
"
title="Cycle font size: default → larger → smaller"
onclick={() => {
const mode = $ae_loc.font_size_mode;
if (!mode || mode === 'default') {
$ae_loc.font_size_mode = 'larger';
} else if (mode === 'larger') {
$ae_loc.font_size_mode = 'smaller';
} else {
$ae_loc.font_size_mode = 'default';
}
}}
>
{#if !$ae_loc.font_size_mode || $ae_loc.font_size_mode === 'default'}
<span class="font-bold text-sm leading-none">A</span>
<span class="hidden group-hover:inline-block text-xs">Font: Normal</span>
{:else if $ae_loc.font_size_mode === 'larger'}
<span class="font-bold text-base leading-none">A+</span>
<span class="hidden group-hover:inline-block text-xs">Font: Larger</span>
{:else}
<span class="font-bold text-xs leading-none">A−</span>
<span class="hidden group-hover:inline-block text-xs">Font: Smaller</span>
{/if}
</button>
<!-- <div> -->
<!-- class:visible={expand} -->
<!-- class:invisible={!expand} -->

4
src/lib/elements/element_manage_event_file_li.svelte
View File

@@ -176,7 +176,7 @@
<tbody>
{#each $lq__event_file_obj_li as event_file_obj (event_file_obj.event_file_id)}
<tr
class="ae_obj obj_event_file border-t border-b border-gray-200 hover:bg-gray-50 hover:border-gray-300"
class="ae_obj obj_event_file border-t border-b border-surface-200-800 hover:bg-surface-100-900 hover:border-surface-300-700 transition-colors duration-200"
class:dim={event_file_obj?.hide}
>
<td class="event_file__file align-middle">
@@ -555,7 +555,7 @@
// ae_triggers.update_event_file_purpose = true;
}}
class="select min-w-fit max-w-fit text-xs mx-1 border border-gray-300 rounded-md p-1 hover:border-gray-400"
class="select min-w-fit max-w-fit text-xs mx-1 border border-surface-300-700 rounded-md p-1 bg-surface-50-900 hover:border-surface-400-600 transition-colors duration-200"
>
<option
value={null}

1
src/lib/stores/ae_stores.ts
View File

@@ -77,6 +77,7 @@ const ae_app_local_data_defaults: key_val = {
theme: 'light',
theme_mode: 'light',
theme_name: 'AE_Firefly', // "Shiny serenity, like a firefly." — OSIT default 2026
font_size_mode: 'default', // 'default' | 'larger' | 'smaller'
iframe: false,
// disable_sys_header: false,

9
src/routes/+layout.svelte
View File

@@ -174,6 +174,15 @@
document.documentElement.classList.remove('dark');
}
// Font size mode — cycles default | larger | smaller.
// CSS classes are defined in app.css; no class = browser default (16px).
document.documentElement.classList.remove('font-size-larger', 'font-size-smaller');
if ($ae_loc?.font_size_mode === 'larger') {
document.documentElement.classList.add('font-size-larger');
} else if ($ae_loc?.font_size_mode === 'smaller') {
document.documentElement.classList.add('font-size-smaller');
}
// Hydration overlay timer
if ($ae_loc?.account_id) {
const timer = setTimeout(() => is_hydrating = false, 500);

2
src/routes/events/[event_id]/(pres_mgmt)/event_page_menu.svelte
View File

@@ -46,7 +46,7 @@
events__locations={$ae_loc.administrator_access}
events__reports={$ae_loc.trusted_access}
events__settings={$ae_loc.edit_mode && $ae_loc.administrator_access}
events__session_search={!!$lq__event_obj?.event_id}
events__session_search={false}
/>
<span