diff options
| -rw-r--r-- | public/common/play.css | 12 | ||||
| -rw-r--r-- | public/common/play.js | 18 |
2 files changed, 29 insertions, 1 deletions
diff --git a/public/common/play.css b/public/common/play.css index 0b098af..314bf2a 100644 --- a/public/common/play.css +++ b/public/common/play.css @@ -372,7 +372,7 @@ header .replay button { width: 100%; height: auto; grid-template-columns: 1fr; - grid-template-rows: min-content; + grid-template-rows: 108px min-content; overflow-x: clip; overflow-y: auto; } @@ -380,8 +380,18 @@ header .replay button { width: 100%; background-color: rgba(255,255,255,0.9); } + header.mobilefix { + position: fixed; + top: -40px; + } header { + position: absolute; + min-height: 108px; + top: 0; + left: 0; + right: 0; display: block; + z-index: 1000; } #prompt { padding-left: 8px; diff --git a/public/common/play.js b/public/common/play.js index d8e4ee1..80ead70 100644 --- a/public/common/play.js +++ b/public/common/play.js @@ -585,6 +585,24 @@ function confirm_resign() { send_message("resign"); } +/* MOBILE PHONE LAYOUT */ + +let mobile_scroll_header = document.querySelector("header"); +let mobile_scroll_last_y = 0; + +window.addEventListener("scroll", function scroll_mobile_fix (evt) { + if (mobile_scroll_header.clientWidth <= 640) { + if (window.scrollY > 40) { + if (mobile_scroll_last_y <= 40) + mobile_scroll_header.classList.add("mobilefix"); + } else { + if (mobile_scroll_last_y > 40) + mobile_scroll_header.classList.remove("mobilefix"); + } + mobile_scroll_last_y = window.scrollY; + } +}); + /* DEBUGGING */ function send_save() { |