style(markers): render parked pastel square ~2/3 size (still zoom-scaled)
Parked squares now scale to ~0.66 of the moving-now circle (compounding with the existing zoom scaling) so they read as quieter 'recent activity' markers. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
parent
d73755af35
commit
ddf7c31b6c
2 changed files with 6 additions and 4 deletions
|
|
@ -8,7 +8,7 @@ trips** into one view for the Fireside Communications / Tracksolid fleet.
|
|||
address, heading, odometer, last fix, source). Markers **scale with the zoom level**.
|
||||
Shape encodes recency so stakeholders read activity at a glance:
|
||||
- **● circle** (full colour + heading arrow) — moving right now
|
||||
- **■ square** (pastel colour, no arrow) — active within the last 24h, now stopped
|
||||
- **■ smaller square** (pastel colour, no arrow) — active within the last 24h, now stopped
|
||||
- **grey ●** — offline (no fix in 24h)
|
||||
- **Filters** (bottom-right card) apply to the live map *instantly*:
|
||||
- **Number plate** — multi-select, sorted A→Z; picking a vehicle auto-fills its
|
||||
|
|
|
|||
|
|
@ -203,9 +203,11 @@
|
|||
}
|
||||
.veh-pin .idle-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.92); }
|
||||
/* Parked = reported within 24h ("active within 24h"): a clean PASTEL
|
||||
department-coloured SQUARE (same 32px, no arrow/dot), so high-level viewers
|
||||
can scan recent fleet activity by department. Moving-now stays a circle. */
|
||||
.veh-marker.parked .veh-pin { border-radius: 6px; opacity: 1; }
|
||||
department-coloured SQUARE, no arrow/dot, and rendered ~⅔ the size of a
|
||||
moving-now circle so it reads as a quieter "recent activity" marker. The
|
||||
scale compounds with the zoom scaling on .veh-inner; transform-origin
|
||||
centre keeps it on its coordinate. */
|
||||
.veh-marker.parked .veh-pin { border-radius: 6px; opacity: 1; transform: scale(0.66); transform-origin: center center; }
|
||||
.veh-marker.offline .veh-pin { opacity: .5; border-color: rgba(255,255,255,.4); }
|
||||
.veh-plate {
|
||||
position: absolute; top: 33px; left: 50%; transform: translateX(-50%);
|
||||
|
|
|
|||
Loading…
Reference in a new issue