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

a11y(launcher): dark mode, touch targets, overflow, transition speed

Browse Source 
Shell (+layout.svelte):
- fix: header bg-slate-200 -> dark:bg-slate-800 (projector/night use)
- fix: main content bg-gray-100 -> dark:bg-gray-900
- fix: config drawer bg-orange-100 -> dark:bg-slate-800
- fix: debug drawer bg-red-100 -> dark:bg-slate-900
- fix: footer border-gray-200 -> border-gray-300 (invisible border fixed)
- fix: remove header hover:text-base (caused layout shift on hover)
- fix: remove footer hover:sm:text-sm etc. (layout shift + broken TW4 syntax)
- fix: header/footer/status spans duration-1000 -> duration-300 (too slow)
- fix: footer opacity-50 -> opacity-70 (was too dim for projector/status reading)
- fix: nav section add overflow-y-auto (sessions overflowed on short screens)
- fix: nav section remove hover:bg-surface-100-900 (confusing whole-panel hover)
- a11y: header menu toggle button class=''->'px-2 py-1 rounded...' (touch target)
- a11y: footer edit_mode button class=''->'px-1.5 py-1 rounded...' (touch target)
- a11y: footer status spans px-1 -> px-2 py-0.5 (slightly larger tap area)
- a11y: footer datetime add dark:hover:bg-slate-700
This commit is contained in:
Scott Idem
2026-03-06 20:32:57 -05:00
parent 4cecc7a860
commit c0729ab4f3
1 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte
View File

@@ -445,18 +445,19 @@
flex flex-row items-center justify-around sm:justify-between flex flex-row items-center justify-around sm:justify-between
text-sm hover:text-base text-sm
bg-slate-200 bg-slate-200 dark:bg-slate-800
opacity-90 hover:opacity-100 opacity-95 hover:opacity-100
transition-all duration-1000 transition-colors duration-300
" "
> >
<h3 class="h4 text-center italic text-surface-600-400"> <h3 class="h4 text-center italic text-surface-600-400">
<!-- Menu toggle: needs a real tap target for tablet/touch operators -->
<button <button
type="button" type="button"
class="" class="px-2 py-1 rounded hover:bg-surface-500/10 transition-colors"
onclick={() => { onclick={() => {
$events_loc.launcher.hide__launcher_menu = $events_loc.launcher.hide__launcher_menu =
!$events_loc.launcher.hide__launcher_menu; !$events_loc.launcher.hide__launcher_menu;
@@ -512,7 +513,7 @@
items-center items-center
justify-start sm:justify-center justify-start sm:justify-center
py-1 px-0.5 py-1 px-0.5
bg-gray-100 bg-gray-100 dark:bg-gray-900
" "
> >
@@ -525,9 +526,9 @@
max-w-xs max-w-xs
pt-0.5 pr-0.5 pt-0.5 pr-0.5
flex flex-col gap-1 items-center justify-start flex flex-col gap-1 items-center justify-start
overflow-y-auto
border-r border-gray-200 dark:border-gray-700 border-r border-gray-200 dark:border-gray-700
hover:bg-surface-100-900
" "
class:hidden={$events_loc.launcher.hide__launcher_menu} class:hidden={$events_loc.launcher.hide__launcher_menu}
> >
@@ -610,25 +611,24 @@
p-1 m-auto p-1 m-auto
flex flex-row items-center justify-between flex flex-row items-center justify-between
sm:flex-row md:items-center md:justify-between
text-xs hover:sm:text-sm hover:md:text-base hover:lg:text-lg text-xs
bg-gray-200 border-t border-gray-300
bg-gray-200 border-t border-gray-200
dark:bg-gray-800 dark:border-gray-600 dark:bg-gray-800 dark:border-gray-600
opacity-50 hover:opacity-100 opacity-70 hover:opacity-100
transition-all duration-1000 transition-opacity duration-500
" "
> >
<div <div
class="slct_location_name transition-all duration-1000" class="slct_location_name transition-colors duration-300"
title="Location ID: {$lq__event_location_obj?.event_location_id} Name: {$lq__event_location_obj?.name} | Device ID: {$lq__event_device_obj?.event_device_id} Name: {$lq__event_device_obj?.name}" title="Location ID: {$lq__event_location_obj?.event_location_id} Name: {$lq__event_location_obj?.name} | Device ID: {$lq__event_device_obj?.event_device_id} Name: {$lq__event_device_obj?.name}"
> >
<!-- Edit mode toggle: needs tap target for tablet operators -->
<button <button
type="button" type="button"
class="" class="px-1.5 py-1 rounded hover:bg-surface-500/10 transition-colors"
onclick={() => { onclick={() => {
$ae_loc.edit_mode = !$ae_loc.edit_mode; $ae_loc.edit_mode = !$ae_loc.edit_mode;
}} }}
@@ -647,7 +647,7 @@
<span <span
class:preset-tonal-warning={!$idle} class:preset-tonal-warning={!$idle}
class:preset-tonal-success={$idle} class:preset-tonal-success={$idle}
class="group px-1 rounded-md transition-all duration-1000" class="group px-2 py-0.5 rounded-md transition-colors duration-300"
title="The user is currently {$idle ? 'idle' : 'active'}" title="The user is currently {$idle ? 'idle' : 'active'}"
> >
{#if $idle} {#if $idle}
@@ -660,7 +660,7 @@
</span> </span>
<span <span
class="group px-1 rounded-md transition-all duration-1000" class="group px-2 py-0.5 rounded-md transition-colors duration-300"
title="Online status = {online?.current}" title="Online status = {online?.current}"
> >
<span class="fas fa-wifi mx-1"></span> <span class="fas fa-wifi mx-1"></span>
@@ -673,7 +673,7 @@
'connected'} 'connected'}
class:preset-tonal-success={$events_sess.launcher.ws_connect_status == class:preset-tonal-success={$events_sess.launcher.ws_connect_status ==
'connected'} 'connected'}
class="group px-1 rounded-md transition-all duration-1000" class="group px-2 py-0.5 rounded-md transition-colors duration-300"
title="WebSocket is {$events_sess.launcher.ws_connect_status == title="WebSocket is {$events_sess.launcher.ws_connect_status ==
'connected' 'connected'
? 'connected' ? 'connected'
@@ -689,7 +689,7 @@
</span> </span>
<div <div
class="current_datetime font-mono px-2 hover:font-bold hover:bg-white transition-all" class="current_datetime font-mono px-2 hover:font-bold hover:bg-white dark:hover:bg-slate-700 transition-colors"
> >
<span class="hidden md:inline"> <span class="hidden md:inline">
<span class="fas fa-calendar-alt"></span> <span class="fas fa-calendar-alt"></span>
@@ -710,7 +710,7 @@
<button <button
type="button" type="button"
onclick={() => ($events_loc.launcher.hide_drawer__cfg = false)} onclick={() => ($events_loc.launcher.hide_drawer__cfg = false)}
class="btn btn-sm p-2.5 preset-tonal-error hover:preset-filled-error-500 transition-all duration-1000" class="btn btn-sm p-3 preset-tonal-error hover:preset-filled-error-500 transition-colors duration-300"
class:opacity-25={!$ae_loc.trusted_access} class:opacity-25={!$ae_loc.trusted_access}
class:hover:opacity-75={!$ae_loc.trusted_access} class:hover:opacity-75={!$ae_loc.trusted_access}
> >
@@ -720,7 +720,7 @@
</div> </div>
<Drawer <Drawer
class="bg-orange-100 opacity-90 hover:opacity-97 transition-all duration-1000 border border-gray-300 dark:border-gray-600 w-full md:w-96 lg:w-[32rem]" class="bg-orange-50 dark:bg-slate-800 opacity-90 hover:opacity-97 transition-all duration-300 border border-gray-300 dark:border-gray-600 w-full md:w-96 lg:w-[32rem]"
placement="left" placement="left"
{...{ {...{
transitionType: 'fly', transitionType: 'fly',
@@ -770,7 +770,7 @@
<Drawer <Drawer
activateClickOutside={false} activateClickOutside={false}
class="bg-red-100 opacity-75 hover:opacity-95 transition-all duration-1000" class="bg-red-50 dark:bg-slate-900 opacity-75 hover:opacity-95 transition-all duration-300"
placement="bottom" placement="bottom"
{...{ {...{
transitionType: 'fly', transitionType: 'fly',