julian
cce99aadfd
A round of operator-facing fixes on the booth screen, shift views, and the
font-scale control. (Follows the font-scale feature in f706726, which used CSS
`zoom` — reverted here for the rem approach below.)
Font scaling (the A−/A+ control now actually works without breaking layout):
- The control scaled via CSS `zoom`, which also scaled viewport-locked containers
(h-screen frame, max-h-[90vh] modals) so at 130% modal headers/footers were
pushed off-screen. Reworked to scale TEXT only: converted every `text-[Npx]`
font utility to rem across the web app (~230 sites in 25 files + the
.label/.hint/.btn component classes + body in index.css; 16px root, so 100% is
visually identical), and applyFontScale now sets the ROOT font-size. vh/h-screen
layout stays put, so chrome never clips; tall content scrolls its own container.
Verified at 130%: text 12px→15.6px while the frame stayed viewport-height.
Live feed (event rows):
- Plate, badges and reason now flow inline after the identity and wrap only when
the row runs out of width — no more forced second line when there's empty space.
- Dropped the redundant TARGË via-badge (the plate chip already conveys it).
- Removed the Direction filter group (Hyrje/Dalje) — it duplicated the entry/exit
options already in the Type filter.
Active sessions:
- Rebuilt as a real table (Ticket/subscriber · Plate · Entry · Elapsed) so columns
align and long values (subscriber names, ticket ids) no longer truncate.
- Dropped the status column (an unpaid transient is normal; a subscriber shows ★ +
name; overstay keeps a row tint). Removed the now-redundant status filter; only
the Transient/Subscriber filter remains. Plate is now searchable (uses s.plate).
Shift report (close-shift modal + Shift History + printed Z-report slip):
- Removed the confusing `shitje` (subscription-sales) sub-line — Abonime is the
total; only the out-of-window part is broken out. subscriptionSalesMinor stays in
the signed payload (audit data), just not displayed/printed.
- Show the inherited opening cash ("Arka fillestare") above the expected drawer, so
opening + cash-taken = expected reads clearly. Money values no longer line-wrap.
Subscription edit modal:
- Fixed the 2-col grid alignment: a lone "only one version" cell was shifting every
following row by one column — it now emits a full label+value pair.
Removed orphaned i18n keys (fStatus*, fDir*, srcSubSales) from sq+en (parity kept).
Full workspace build/lint/test green.
Claude-Session: https://claude.ai/code/session_01Xcm6ikLgGoCxxHrxtjkk5V
27 lines
1.6 KiB
TypeScript
27 lines
1.6 KiB
TypeScript
import type { Theme } from "../api.js";
|
|
import { FONT_SCALE_MAX, FONT_SCALE_MIN } from "../api.js";
|
|
|
|
// Theme + font-scale application. The whole UI reads colour through the --color-term-*
|
|
// tokens; the light palette lives in index.css under `html.theme-light`. Applying a theme
|
|
// is just toggling that class on <html>. Both are the LOGGED-IN USER's stored preferences
|
|
// (users.theme / users.font_scale), applied after auth resolves — mirroring how language
|
|
// works. Defaults (dark, 100%) apply before auth resolves. Printed tickets are unaffected.
|
|
|
|
/** Apply a theme by toggling `theme-light` on <html>. Dark is the absence of the
|
|
* class (the base tokens). No-op-safe to call repeatedly. */
|
|
export function applyTheme(theme: Theme): void {
|
|
document.documentElement.classList.toggle("theme-light", theme === "light");
|
|
}
|
|
|
|
/** Apply a font scale by setting the ROOT font-size (percent). The app's text is sized in
|
|
* rem (the `text-[…rem]` utilities + the .label/.input/.hint/.btn component classes all
|
|
* derive from the root), so only TEXT scales — viewport-locked layout (h-screen frame,
|
|
* max-h-[90vh] modals, vh units) is unaffected, so headers/footers never clip; taller
|
|
* content just scrolls its own container. NOT `zoom` (which scaled those vh boxes too and
|
|
* pushed modal chrome out of view). Clamped to the band; no-op-safe to call repeatedly. */
|
|
export function applyFontScale(pct: number): void {
|
|
const clamped = Math.min(FONT_SCALE_MAX, Math.max(FONT_SCALE_MIN, Math.round(pct)));
|
|
// 100% = the browser's 16px root. The app's rem units scale off this.
|
|
document.documentElement.style.fontSize = clamped === 100 ? "" : `${clamped}%`;
|
|
}
|