Fix header to top of screen in mobile layout.

But allow the toolbar buttons to scroll offscreen.

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() {