benmichael/gods-eye-view
1
0 Fork 0
mirror of https://github.com/bilawalsidhu/gods-eye-view.git synced 2026-11-05 02:44:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(street-level): fit the whole photo on phones

Browse Source 
At phone width the right rail is the band between mid-screen and the credit
line, so a 16:10 viewer plus its bar and caption was cut off. Below 720 px
the viewer's height is derived from that band (clamped 110-320 px); floating
and expanded viewers reset to auto height. The QA harness checks the photo
and caption fit at 390x844, and CURRENT-STATE documents the docking rules
and phone sizing.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
Said TurkseverandClaude Opus 5.5 committed 2026-09-25 21:18:40 +01:00
1 parent 6207e4144e
commit e6c2c812f9
4 files changed
+91 -2
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/streetLevelMarkup.test.mjs
+13
View File
@@ -122,6 +122,19 @@ test('labels say what the buttons do', () => {
);
});
test('on phones the viewer is sized from the rail band, not its aspect ratio', () => {
assert.match(
panelCss,
/@media \(max-width: 720px\) \{\s*\.sl-viewer \{[^}]*height: clamp\(/,
);
// Floating and expanded viewers must not inherit the phone height.
for (const selector of [
".panel-floating\\[style\\*='height'\\] \\.sl-viewer",
'\\.sl-viewer-wrap-expanded \\.sl-viewer',
])
assert.match(panelCss, new RegExp(`${selector} \\{[^}]*height: auto`));
});
test('the viewer comes first and the panel is a portable, resizable window', () => {
const controlsBlock = html.slice(html.indexOf('<fieldset id="sl-controls"'));
assert.ok(
src/ui/styles/street-level.css
+15
View File
@@ -461,6 +461,7 @@ button.sl-status:focus-visible {
.panel-floating[style*='height'] .sl-viewer {
flex: 1 1 auto;
height: auto;
min-height: 0;
aspect-ratio: auto;
}
@@ -497,6 +498,7 @@ button.sl-status:focus-visible {
.sl-viewer-wrap-expanded .sl-viewer {
flex: 1 1 auto;
height: auto;
min-height: 0;
aspect-ratio: auto;
}
@@ -541,3 +543,16 @@ button.sl-status:focus-visible {
min-height: 150px;
}
}
/* ── Phones ──────────────────────────────────────────────────────────────── */
/* At this width the right rail is the band between mid-screen and the credit
line (responsive.css: top 50vh + 8px, bottom 2vh + 7.5rem). Size the photo
from that band, less the panel's header, tool bar and caption (~150px), so
the whole image shows without scrolling; EXPAND still gives full screen. */
@media (max-width: 720px) {
.sl-viewer {
aspect-ratio: auto;
height: clamp(110px, calc(48vh - 8px - 7.5rem - 150px), 320px);
min-height: 0;
}
}