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.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`); document.documentElement.style.setProperty("--app-viewport-height", `${Math.round(viewportHeight)}px`);
} }

43
styles.css
View File

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