christophe/chesscubing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Corrige la longueur des pages chrono et cube

Browse Source
This commit is contained in:
Christophe JEANNEROT
2026-04-12 18:14:10 +02:00
parent e5d755980e
commit d75234b15f
2 changed files with 27 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app.js
View File

@@ -103,6 +103,8 @@ function syncViewportHeight() {
document.documentElement.clientHeight,
);
document.documentElement.style.setProperty("--app-visible-height", `${Math.round(visibleHeight)}px`);
document.documentElement.style.setProperty("--app-viewport-top", `${Math.round(viewportTopOffset)}px`);
document.documentElement.style.setProperty("--app-viewport-height", `${Math.round(viewportHeight)}px`);
}

43
styles.css
View File

@@ -487,14 +487,20 @@ textarea:focus {
}
.phase-body {
min-height: 100dvh;
overflow: hidden;
--app-page-height: calc(
var(--app-visible-height, 100dvh) + max(var(--app-viewport-top, 0px), var(--phase-top-offset, 0px)) + 1px
);
min-height: var(--app-page-height);
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior-y: auto;
-webkit-overflow-scrolling: touch;
}
.phase-shell {
position: relative;
width: min(1400px, calc(100% - 1.2rem));
min-height: 100dvh;
min-height: var(--app-page-height, 100dvh);
margin: 0 auto;
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
@@ -1876,15 +1882,15 @@ textarea:focus {
.phase-body .phase-shell {
box-sizing: border-box;
width: min(1400px, 100%);
min-height: 100dvh;
height: 100dvh;
max-height: 100dvh;
min-height: var(--app-page-height, 100dvh);
height: auto;
max-height: none;
padding:
calc(var(--phase-top-offset) + 0.8rem)
calc(var(--safe-right) + 0.6rem)
calc(var(--safe-bottom) + 0.9rem)
calc(var(--safe-left) + 0.6rem);
overflow: hidden;
overflow: visible;
}
@media (max-width: 900px) {
@@ -1994,8 +2000,9 @@ textarea:focus {
@media (max-width: 900px) {
body[data-page="chrono"].phase-body {
overflow: hidden;
overscroll-behavior: none;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: auto;
}
body[data-page="chrono"] .phase-header {
@@ -2016,9 +2023,9 @@ textarea:focus {
}
body[data-page="chrono"] .phase-shell {
min-height: 100svh;
height: 100svh;
max-height: 100svh;
min-height: var(--app-page-height, 100svh);
height: auto;
max-height: none;
gap: 0.35rem;
padding:
calc(var(--phase-top-offset) + 0.55rem)
@@ -2047,7 +2054,7 @@ textarea:focus {
}
body[data-page="chrono"] .faceoff-board {
height: 100%;
height: auto;
min-height: 0;
align-self: stretch;
gap: 0.35rem;
@@ -2111,9 +2118,9 @@ textarea:focus {
@supports (-webkit-touch-callout: none) {
@media (max-width: 900px) {
body[data-page="chrono"] .phase-shell {
min-height: -webkit-fill-available;
height: -webkit-fill-available;
max-height: -webkit-fill-available;
min-height: var(--app-page-height, -webkit-fill-available);
height: auto;
max-height: none;
}
}
}
@@ -2138,7 +2145,7 @@ body[data-page="cube"].phase-body {
position: static;
inset: auto;
width: auto;
min-height: var(--app-viewport-height, 100dvh);
min-height: var(--app-page-height, 100dvh);
height: auto;
max-height: none;
overflow-x: hidden;
@@ -2154,7 +2161,7 @@ body[data-page="cube"] .cube-shell {
width: min(1400px, 100%);
min-width: 0;
margin: 0 auto;
min-height: var(--app-viewport-height, 100dvh);
min-height: var(--app-page-height, 100dvh);
height: auto;
max-height: none;
display: grid;