garrettmills/mtgc
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Click preview: one-pane-at-a-time toggle when it won't fit the screen

Browse Source 
When the full layout (card art + info tile) would be taller than the
viewport, typically on phones where the tile wraps below the art, the
modal switches to a compact mode: a toolbar with a Front/Back/Info (or
Card/Info) toggle and the close button, showing one pane at a time with
the art shrunk to fit the remaining height. Decided by measuring the full
layout on mount and after each resize; the art is now sized explicitly
from its known 488x680 aspect so that measurement doesn't depend on the
image having loaded.
This commit is contained in:
Garrett Mills
2026-10-14 20:29:32 -05:00
parent e4151a501d
commit 7d1184a762
2 changed files with 128 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/styles.css
View File

@@ -2018,10 +2018,19 @@ tbody tr:hover {
.preview-modal-faces {
position: relative;
}
/* Sized explicitly (Scryfall "normal" images are 488x680) rather than from
the image's intrinsic size, so the box is already its final size before the
image loads — ClickPreviewModal measures the layout on mount to decide on
compact mode. Same result as the old intrinsic sizing capped at 90vw/90vh;
`--preview-img-h` is the height budget, shrunk in compact mode. */
.preview-modal {
--preview-img-h: 90vh;
}
.preview-modal-img {
display: none;
width: min(488px, 90vw, calc(var(--preview-img-h) * 488 / 680));
aspect-ratio: 488 / 680;
max-width: min(720px, 90vw);
max-height: 90vh;
border-radius: 18px;
box-shadow: var(--shadow-lg);
border: 1px solid rgba(255, 255, 255, 0.08);
@@ -2075,6 +2084,43 @@ tbody tr:hover {
display: none;
}
}
/* Compact mode (see ClickPreviewModal): the full layout would be taller than
the viewport, so a toolbar (pane toggle + close) shows one pane at a time —
a single face, or the info tile — with the art shrunk to fit the height
left over after the backdrop padding, toolbar and gap. */
.preview-modal-compact {
/* A column (not the base wrapping row) so the toolbar stretches to exactly
the visible pane's width instead of the row's full 96vw. */
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
--preview-img-h: calc(
100vh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 36px - 16px
);
}
.preview-modal-bar {
flex-basis: 100%;
height: 36px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.preview-modal-compact .preview-modal-faces {
display: block;
}
.preview-modal-compact .preview-modal-img:not(.active) {
display: none;
}
.preview-modal-compact .preview-modal-img:not(.preview-modal-img-rotated) {
max-width: min(720px, 90vw);
}
.preview-modal-compact .preview-modal-close,
.preview-modal-compact .preview-modal-flip,
.preview-modal-compact:not(.preview-modal-show-info) .preview-info,
.preview-modal-show-info .preview-modal-faces {
display: none;
}
.preview-modal-close {
position: absolute;
top: -14px;