[fix](trx-frontend-http): fill the map column down to the footer
The windowed map was capped at 75% of the viewport height and at a width-derived aspect ratio, which left a dead band under it: 69px at 1600x950, and on a 420px-wide phone a 270px map on an 800px screen. Neither cap was doing useful work now that the stage spans the full width, so the map fills the column down to the footer instead. Growing into the footer needs a bound: once the column is tall enough to push the footer below the fold, using its position would push it further on every pass, so the bottom edge is clamped to the viewport. Growth then consumes the column's spare height and settles in one pass. Also drops three mapIsFullscreen() branches in the windowed path that could never be taken — the fullscreen case returns above them. Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
@@ -1647,18 +1647,13 @@ var mapWindow = window;
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const mapRect = mapContainer.getBoundingClientRect();
|
const mapRect = mapContainer.getBoundingClientRect();
|
||||||
const width = mapContainer.clientWidth || mapRect.width;
|
|
||||||
const footer = document.querySelector(".footer");
|
const footer = document.querySelector(".footer");
|
||||||
let bottom = mapIsFullscreen() && stage ? stage.getBoundingClientRect().bottom : window.innerHeight;
|
let bottom = window.innerHeight;
|
||||||
if (!mapIsFullscreen() && footer) {
|
if (footer) {
|
||||||
const fr = footer.getBoundingClientRect();
|
const fr = footer.getBoundingClientRect();
|
||||||
if (fr.top > mapRect.top + 50) bottom = fr.top;
|
if (fr.top > mapRect.top + 50) bottom = Math.min(fr.top, bottom);
|
||||||
}
|
}
|
||||||
const available = Math.max(0, Math.floor(bottom - mapRect.top - 8));
|
const target = Math.max(0, Math.floor(bottom - mapRect.top - 8));
|
||||||
const widthDriven = width > 0 ? Math.floor(width / 1.55) : available;
|
|
||||||
const viewportCap = mapIsFullscreen() ? Math.floor(window.innerHeight * 0.9) : Math.floor(window.innerHeight * 0.75);
|
|
||||||
const minHeight = Math.min(260, available);
|
|
||||||
const target = Math.max(minHeight, Math.min(available, viewportCap, widthDriven));
|
|
||||||
mapContainer.style.height = `${target}px`;
|
mapContainer.style.height = `${target}px`;
|
||||||
if (aprsMap) aprsMap.invalidateSize();
|
if (aprsMap) aprsMap.invalidateSize();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1980,23 +1980,21 @@ const mapWindow = window as unknown as MapWindow;
|
|||||||
if (aprsMap) aprsMap.invalidateSize();
|
if (aprsMap) aprsMap.invalidateSize();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
// Everything below is the windowed path — the fullscreen branch returned.
|
||||||
|
// The map tab is a whole page, so the stage fills the column down to the
|
||||||
|
// footer. Capping it at a fraction of the viewport, or at a width-derived
|
||||||
|
// aspect ratio, left a dead band under the map that grew with the window
|
||||||
|
// (and on narrow screens made the map barely a third of the page).
|
||||||
const mapRect = mapContainer.getBoundingClientRect();
|
const mapRect = mapContainer.getBoundingClientRect();
|
||||||
const width = mapContainer.clientWidth || mapRect.width;
|
|
||||||
const footer = document.querySelector(".footer");
|
const footer = document.querySelector(".footer");
|
||||||
let bottom = mapIsFullscreen() && stage
|
let bottom = window.innerHeight;
|
||||||
? stage.getBoundingClientRect().bottom
|
if (footer) {
|
||||||
: window.innerHeight;
|
|
||||||
if (!mapIsFullscreen() && footer) {
|
|
||||||
const fr = footer.getBoundingClientRect();
|
const fr = footer.getBoundingClientRect();
|
||||||
if (fr.top > mapRect.top + 50) bottom = fr.top;
|
// Clamped to the viewport: once the column is tall enough to push the
|
||||||
|
// footer below the fold, growing into it would push it further still.
|
||||||
|
if (fr.top > mapRect.top + 50) bottom = Math.min(fr.top, bottom);
|
||||||
}
|
}
|
||||||
const available = Math.max(0, Math.floor(bottom - mapRect.top - 8));
|
const target = Math.max(0, Math.floor(bottom - mapRect.top - 8));
|
||||||
const widthDriven = width > 0 ? Math.floor(width / 1.55) : available;
|
|
||||||
const viewportCap = mapIsFullscreen()
|
|
||||||
? Math.floor(window.innerHeight * 0.9)
|
|
||||||
: Math.floor(window.innerHeight * 0.75);
|
|
||||||
const minHeight = Math.min(260, available);
|
|
||||||
const target = Math.max(minHeight, Math.min(available, viewportCap, widthDriven));
|
|
||||||
mapContainer.style.height = `${target}px`;
|
mapContainer.style.height = `${target}px`;
|
||||||
if (aprsMap) aprsMap.invalidateSize();
|
if (aprsMap) aprsMap.invalidateSize();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -237,11 +237,18 @@ try {
|
|||||||
right: Math.round(rect.right),
|
right: Math.round(rect.right),
|
||||||
viewport: document.documentElement.clientWidth,
|
viewport: document.documentElement.clientWidth,
|
||||||
sideways: document.documentElement.scrollWidth > document.documentElement.clientWidth + 1,
|
sideways: document.documentElement.scrollWidth > document.documentElement.clientWidth + 1,
|
||||||
|
gapToFooter: Math.round(document.querySelector(".footer").getBoundingClientRect().top - rect.bottom),
|
||||||
|
pageScrolls: document.documentElement.scrollHeight > document.documentElement.clientHeight + 1,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
assert.equal(stage.left, 0, `map stage starts at ${stage.left}px, not the viewport edge`);
|
assert.equal(stage.left, 0, `map stage starts at ${stage.left}px, not the viewport edge`);
|
||||||
assert.equal(stage.right, stage.viewport, `map stage ends at ${stage.right}px, not ${stage.viewport}px`);
|
assert.equal(stage.right, stage.viewport, `map stage ends at ${stage.right}px, not ${stage.viewport}px`);
|
||||||
assert.equal(stage.sideways, false, "full-bleed map makes the page scroll sideways");
|
assert.equal(stage.sideways, false, "full-bleed map makes the page scroll sideways");
|
||||||
|
// ...and fills the column down to the footer. Capping the height at a
|
||||||
|
// fraction of the viewport left a dead band that grew with the window.
|
||||||
|
assert.ok(stage.gapToFooter <= 16,
|
||||||
|
`${stage.gapToFooter}px of dead space between the map and the footer`);
|
||||||
|
assert.equal(stage.pageScrolls, false, "the map grew past the viewport");
|
||||||
|
|
||||||
await page.locator('.tab[data-tab="main"]').click();
|
await page.locator('.tab[data-tab="main"]').click();
|
||||||
assert.equal(new URL(page.url()).pathname, "/");
|
assert.equal(new URL(page.url()).pathname, "/");
|
||||||
|
|||||||
Reference in New Issue
Block a user