Badges: force light-mode rendering on badge print area — ignore dark theme
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user