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

Improve Jitsi iframe toggle contrast

Browse Source 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Scott Idem
2026-05-06 12:49:55 -04:00
parent d32312653d
commit 0ae8cf63d7
2 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
documentation/CLIENT__IDAA_and_customized_mods.md
View File

@@ -657,6 +657,10 @@ https://assets-staging.noviams.com/novi-core-assets/css/c/idaa/idaa.css — Boo
- `<section>` and heading elements may get unexpected margins/padding from Bootstrap's typography reset
- Class names `.field-input` and `.field-label` (used in the v2 edit form's scoped `<style>` block)
also exist in `idaa.css`'s date picker — Svelte's scoped attribute selector wins, but be aware
- In iframe widths near Tailwind `sm`, avoid hiding critical button labels behind breakpoint classes
and do not depend on color-only active states; Bootstrap's `.active`/button styling can make the
selected state nearly invisible unless the control uses an obvious fill/ring change plus
`aria-pressed`
**Mitigation:** The iframe CSS conflicts existed before v2 and are not new. The v2 form uses the
same Skeleton/Tailwind component classes as the rest of the app. Avoid using bare `<section>`,

24
src/routes/idaa/(idaa)/jitsi_reports/+page.svelte
View File

@@ -430,26 +430,28 @@ function export_json() {
</h1>
<div class="flex items-center gap-2">
<!-- View mode toggle -->
<div class="border-surface-200-800 flex overflow-hidden rounded-lg border text-sm">
<div class="border-surface-200-800 flex overflow-hidden rounded-lg border bg-surface-50-950 p-0.5 text-sm shadow-sm">
<button
type="button"
onclick={() => (group_by_room = true)}
title="Group sessions by room"
class="flex items-center gap-1.5 px-3 py-1.5 font-medium transition-colors duration-150 {group_by_room
? 'preset-filled-primary'
: 'opacity-60 hover:opacity-90 hover:bg-surface-100-900'}">
aria-pressed={group_by_room}
class="flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-all duration-150 {group_by_room
? '!bg-primary-600 !text-white !shadow-sm ring-1 ring-primary-700'
: '!bg-transparent !text-surface-700 hover:!bg-surface-100-900 hover:!text-surface-950 dark:!text-surface-200 dark:hover:!text-surface-50'}">
<span class="fas fa-layer-group text-xs" aria-hidden="true"></span>
<span class="hidden sm:inline">By Room</span>
<span>By Room</span>
</button>
<button
type="button"
onclick={() => (group_by_room = false)}
title="Show all sessions as a flat list"
class="border-surface-200-800 flex items-center gap-1.5 border-l px-3 py-1.5 font-medium transition-colors duration-150 {!group_by_room
? 'preset-filled-primary'
: 'opacity-60 hover:opacity-90 hover:bg-surface-100-900'}">
aria-pressed={!group_by_room}
class="border-surface-200-800 flex items-center gap-1.5 rounded-md border-l px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-all duration-150 {!group_by_room
? '!bg-primary-600 !text-white !shadow-sm ring-1 ring-primary-700'
: '!bg-transparent !text-surface-700 hover:!bg-surface-100-900 hover:!text-surface-950 dark:!text-surface-200 dark:hover:!text-surface-50'}">
<span class="fas fa-list text-xs" aria-hidden="true"></span>
<span class="hidden sm:inline">Flat List</span>
<span>Flat List</span>
</button>
</div>
<button
@@ -457,10 +459,11 @@ function export_json() {
onclick={export_csv}
disabled={meetings_filtered.length === 0}
title="Export filtered meetings as CSV"
class="btn btn-sm preset-tonal-primary disabled:opacity-40">
class="btn btn-sm preset-tonal-surface border-surface-200-800 border disabled:opacity-40">
<span class="fas fa-file-csv" aria-hidden="true"></span>
<span class="ml-1 hidden sm:inline">CSV</span>
</button>
{#if $ae_loc.edit_mode}
<button
type="button"
onclick={export_json}
@@ -470,6 +473,7 @@ function export_json() {
<span class="fas fa-file-code" aria-hidden="true"></span>
<span class="ml-1 hidden sm:inline">JSON</span>
</button>
{/if}
</div>
</div>