Badges: force light-mode rendering on badge print area — ignore dark theme

This commit is contained in:
Scott Idem
2026-03-12 16:26:21 -04:00
parent 6e8f44b009
commit 745067b228
2 changed files with 79 additions and 0 deletions

View File

@@ -958,3 +958,31 @@
>{JSON.stringify($lq__event_badge_template_obj, null, 2)}</pre>
</div>
{/if}
<style>
/*
* Force light-mode rendering on the badge print area.
* Badges print on physical card stock (white by default, or a defined color set by
* the per-event stylesheet). Dark mode must never bleed into the badge render —
* what the operator sees on screen should match the printed output exactly.
*
* color-scheme: light — signals to the browser that this subtree is light mode,
* affecting scrollbars, form controls, and browser-level scheme-aware colors.
*
* Explicit background-color / color on badge_front / badge_back override any
* inherited dark-mode CSS custom properties from Skeleton UI or Tailwind.
*
* Per-event stylesheets (loaded via style_href) can still override these with
* badge-type-specific colors (e.g. .badge_type__member { background: navy; color: white; })
* because they load after this stylesheet and use more-specific selectors.
*/
.event_badge_wrapper {
color-scheme: light;
}
.badge_front,
.badge_back {
background-color: white;
color: #1a1a1a;
}
</style>

View File

@@ -1,2 +1,53 @@
<script lang="ts">
interface Props {
data: any;
}
let { data }: Props = $props();
import { browser } from '$app/environment';
import { goto } from '$app/navigation';
import { ae_api } from '$lib/stores/ae_stores';
import { db_events } from '$lib/ae_events/db_events';
import { events_func } from '$lib/ae_events_functions';
// Magic redirect: when ?session_id= is present but no event_location_id is in the route
// (e.g. navigating here from the Presenter View which has no location context),
// look up the session's location and redirect to the proper location-specific launcher URL.
// The [event_location_id] page handles the normal case where location is already in the route.
$effect(() => {
if (!browser) return;
const session_id = data.url.searchParams.get('session_id');
const event_id = data.params.event_id;
if (!session_id || !event_id) return;
// Snapshot API config to avoid making it a reactive dependency of this effect
const api_cfg = $ae_api;
(async () => {
// Check Dexie cache first — sessions are typically cached from prior page visits
let session = await db_events.session.get(session_id);
if (!session) {
// Not cached — fetch from API and save to Dexie
session = await events_func.load_ae_obj_id__event_session({
api_cfg,
event_session_id: session_id,
try_cache: false,
log_lvl: 0
});
}
if (session?.event_location_id) {
// Session has a location — redirect to the location-specific launcher URL.
// replaceState: true so the user doesn't need to hit back twice to leave the launcher.
goto(
`/events/${event_id}/launcher/${session.event_location_id}?session_id=${session_id}`,
{ replaceState: true }
);
}
// If the session has no location set, the user stays on the base launcher page
// and the "Please select a location from the menu" prompt is shown by the layout.
})();
});
</script>