k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-11-13 07:40:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(native): the first screens on an upright iPad read as one page, not a phone column

Browse Source 
On an iPad upright or an unfolded foldable the welcome, address, TREK Cloud
and plan screens kept the phone's narrow column in the middle of the glass,
with the photo fading out across the top left. Now the photo spans the
width as a band across the top, the choices stand under it in a wider
column, and the plans take two columns. Landscape keeps the photo as a
panel beside the choices; phones are unchanged.
This commit is contained in:
Maurice
2026-11-07 20:12:12 +01:00
parent b644235eb6
commit bb725ac8d8
1 changed files with 21 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/native-shell/shell.css
+21
View File
@@ -1024,9 +1024,30 @@ a.linkbtn {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* An iPad upright or an unfolded foldable: the photo spans the width as a band
across the top, and the choices stand under it in a wider column than a
phone's, so the page reads as one composition rather than a phone screen
floating in the middle of the glass. The plans take two columns. */
@media (min-width: 700px) and (min-height: 900px) and (orientation: portrait) {
body::before,
body::after {
height: 52vh;
}
body::after {
-webkit-mask-image: none;
mask-image: none;
}
.shell {
max-width: 560px;
justify-content: flex-start;
padding-top: calc(env(safe-area-inset-top) + 38vh);
}
.shell:has(.plans) {
max-width: 760px;
padding-top: calc(env(safe-area-inset-top) + 16vh);
}
.plans {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}