mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-20 05:56:53 +00:00
Maurice
125649ce1b
The base-layer pill sits in the map's bottom-left corner on purpose. The place inspector, a tour's detail and the day panel are centred between the sidebars and were assumed never to reach that corner, but with both sidebars open in a 1280 window they do, and the pill covered "Remove from Day" and Edit. These cards now keep their left edge clear of the pill: a narrow map moves the card right of it, a wide map keeps it centred as before. The pill itself does not move, and the phone sheets are unchanged. The Bookings tab showed "Book" at every width, which read as cut off. The short form now only shows where the bar is tight; from xl up the tab shows its full name. Refs #2604
39 lines
1.5 KiB
TypeScript
39 lines
1.5 KiB
TypeScript
import { describe, expect, it } from 'vitest';
|
|
import { centredMapCardBox } from './centredMapCard';
|
|
|
|
// Resolves the CSS the helper returns for a given container width, so the
|
|
// geometry is checked in pixels rather than as strings.
|
|
function resolve(css: string, extent: number): number {
|
|
const expr = css
|
|
.replace(/100%/g, `${extent}px`)
|
|
.replace(/px/g, '')
|
|
.replace(/calc/g, '')
|
|
.replace(/min\(/g, 'Math.min(')
|
|
.replace(/max\(/g, 'Math.max(');
|
|
return Function(`return (${expr})`)() as number;
|
|
}
|
|
|
|
describe('centredMapCardBox', () => {
|
|
it('keeps the old centred box when there is no pill to clear', () => {
|
|
const box = centredMapCardBox(320, 320);
|
|
expect(resolve(box.width, 1280)).toBe(608);
|
|
expect(resolve(box.left, 1280)).toBe(640);
|
|
});
|
|
|
|
it('a narrow desktop map moves the card off the base-layer pill (#2604)', () => {
|
|
const box = centredMapCardBox(350, 310, { clearPill: true });
|
|
const width = resolve(box.width, 1280);
|
|
const leftEdge = resolve(box.left, 1280) - width / 2;
|
|
// The pill spans 20 to 62 px right of the left panel.
|
|
expect(leftEdge).toBeGreaterThanOrEqual(350 + 62);
|
|
// And the card still stops 16 px short of the right panel.
|
|
expect(leftEdge + width).toBeLessThanOrEqual(1280 - 310 - 16);
|
|
});
|
|
|
|
it('a wide map keeps the card exactly centred and 800 wide', () => {
|
|
const box = centredMapCardBox(320, 320, { clearPill: true });
|
|
expect(resolve(box.width, 1920)).toBe(800);
|
|
expect(resolve(box.left, 1920)).toBe(960);
|
|
});
|
|
});
|