Svorka/ponfw
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mobile: fix edge beam (transform-rotate) + ONU master-detail layout

Browse source 
Edge glow: iOS Safari won't animate an @property-driven conic-gradient
angle, so the beam sat static / off the border on mobile. Reworked to the
robust technique: a .beam child masked to the border ring contains an
oversized conic-gradient ::before spun with transform: rotate 0→360deg; the
glow halo is a drop-shadow on the parent (survives the child mask). Works on
iOS/Safari; honors prefers-reduced-motion.

ONU info on narrow screens: was stacking the picker above the detail, so
selecting an ONU meant a long scroll to find it. Now master-detail — show
the picker OR the detail (not both), toggled by .show-detail on
#view-onu-info via a shared @media(max-width:860px) rule; selecting shows the
detail with a "← ONU list" back button, tab/sub-tab nav resets to the
picker. (Earlier commit already de-compacted the list: extra filters +
two-line rows.)

Docs: CLAUDE.md §15 (edge glow technique) + §17 (master-detail).

Verified offscreen at 414px: beam element present; panel-left/​panel-main
display toggles correctly on select/back; back button visible on mobile;
rendered both states.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Jon Vanvik 2026-06-23 16:33:07 +02:00
parent 2046fad0f8
commit 6f4a315947
4 changed files with 81 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

22
CLAUDE.md
View file

@ -779,13 +779,15 @@ port of the iOS `Format.bps`.
### Animated edge glow
`#edge-glow` is a fixed, pointer-events-none full-viewport element. A
`conic-gradient(from var(--beam-angle), …)` with a white-hot core is masked
to just the 3px border ring (the standard `mask` + `mask-composite:
exclude` border trick) and animated by spinning the `@property
--beam-angle` 0→360°, so a neon beam travels around the screen edge.
Respects `prefers-reduced-motion`. z-index sits below the scanline overlay
(9999) and modals (10000).
`#edge-glow` (fixed, pointer-events-none, full-viewport) holds a `.beam`
child masked to a 3px border ring (`mask` + `mask-composite: exclude`); the
ring contains a `::before` that is an oversized `conic-gradient` with a
white-hot core, spun with **`transform: rotate` 0→360°**, so the beam travels
around the screen edge. (It deliberately does *not* use an `@property`-
animated gradient angle — iOS Safari won't animate that, which left the beam
static on mobile.) The glow halo is a `drop-shadow` on the parent so it
survives the child's mask. Respects `prefers-reduced-motion`; z-index sits
below the scanline overlay (9999) and modals (10000).
---
@ -874,7 +876,11 @@ deep-link here via `openOnuInfo`.
The left list/search supports name/address/serial + equipment/version +
PON-mode + status filters; rows are two-line (serial+status, then
equipment · version · last-seen). Parent OLT and upstream switch are one
combined card.
combined card. On narrow screens it's **master-detail**: the picker and the
detail don't stack (which buried the detail under a long list) — selecting an
ONU swaps to the detail (`.show-detail` on `#view-onu-info`, via a
`@media (max-width:860px)` rule in the shared CSS) with a "← ONU list" back
button; navigating in via the tab/sub-tab resets to the picker.
### Single-ONU upgrade