dandri/CartoLite-Server
1
0 Fork 0
mirror of https://github.com/n30nex/CartoLite-Server.git synced 2026-10-22 15:21:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Keep the region and packet legends separate on compact screens

Browse Source
This commit is contained in:
n30nex committed 2026-09-12 17:39:50 -04:00
1 parent 406fa5294c
commit 4bccdaa1d4
2 files changed
+9 -1
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/e2e/display-upgrade.spec.ts
+7
View File
@@ -93,6 +93,13 @@ test('shows matching region colors in a viewport legend only when Regions is ena
await expect(page.locator('.region-legend-list > span').first()).toBeVisible();
const colors = await page.locator('.region-legend-list i').evaluateAll((items) => items.map((item) => getComputedStyle(item).backgroundColor));
expect(colors.every((color) => color !== 'rgba(0, 0, 0, 0)')).toBe(true);
const regionBounds = await page.locator('.region-legend-list').boundingBox();
const packetBounds = await page.locator('#route-legend').boundingBox();
if (regionBounds && packetBounds) {
const overlap = Math.max(0, Math.min(regionBounds.x + regionBounds.width, packetBounds.x + packetBounds.width) - Math.max(regionBounds.x, packetBounds.x))
* Math.max(0, Math.min(regionBounds.y + regionBounds.height, packetBounds.y + packetBounds.height) - Math.max(regionBounds.y, packetBounds.y));
expect(overlap, 'packet and region legends must not cover each other').toBe(0);
}
await page.screenshot({ path: info.outputPath('region-colors-legend.png') });
await openMapOptions(page);
await page.locator('#regions-button').click();
web/src/display.css
+2 -1
View File
@@ -32,7 +32,8 @@
#map .maplibregl-ctrl-attrib { color: var(--muted); background: var(--panel-solid); opacity: 1; font-size: 10px; }
#map .maplibregl-ctrl-attrib a { color: var(--ink); }
:root[data-theme="light"] .route-legend, :root[data-theme="light"] .route-legend-label { color: var(--ink); }
:root[data-view-class="mobile"] #app:has(.region-legend:not([hidden])) .route-legend { bottom: max(66px, calc(env(safe-area-inset-bottom) + 62px)); }
:root[data-view-class="mobile"] #app:has(.region-legend:not([hidden])) .route-legend { top: max(112px, calc(env(safe-area-inset-top) + 104px)); bottom: auto; }
@media (orientation: landscape) and (max-height: 520px) { :root[data-view-class="mobile"] #app:has(.region-legend:not([hidden])) .route-legend { top: max(62px, calc(env(safe-area-inset-top) + 54px)); } }
:root[data-theme="dark"] #map .maplibregl-ctrl-attrib-button { filter: invert(1); }
.netgraph-app .packet-legend i[data-kind] { background: var(--route-color); box-shadow: none; }
.route-legend-swatch, .netgraph-app .packet-legend i[data-kind]:not([data-kind="inter-area"]) { position: relative; width: 18px; height: 10px; background: var(--scene-background) !important; border: 1px solid var(--panel-border); border-radius: 3px; box-shadow: none; }