More mobile layout improvements.

4 files changed, 105 insertions, 61 deletions

diff --git a/public/common/client.css b/public/common/client.css
index e24ef6d..afd1024 100644
--- a/public/common/client.css
+++ b/public/common/client.css
@@ -1,16 +1,21 @@
 /* COMMON GRID LAYOUT */
 
 :root {
-	--font-normal:  "Source Serif", "Georgia", "Noto Emoji", "Dingbats", serif;
-	--font-small: "Source Serif SmText", "Georgia", "Noto Emoji", "Dingbats", serif;
-	--font-widget: "Source Sans", "Verdana", "Noto Emoji", "Dingbats", sans-serif;
+	--font-normal:  "Source Serif", "Circled Numbers", "Georgia", "Noto Emoji", "Dingbats", serif;
+	--font-small: "Source Serif SmText", "Circled Numbers", "Georgia", "Noto Emoji", "Dingbats", serif;
+	--font-widget: "Source Sans", "Circled Numbers", "Verdana", "Noto Emoji", "Dingbats", sans-serif;
 }
 
 html {
 	image-rendering: -webkit-optimize-contrast; /* try to fix chromium's terrible image rescaling */
+	image-rendering: high-quality;
 	-webkit-tap-highlight-color: transparent; /* disable blue flashes when tapping on chrome mobile */
 }
 
+summary::-webkit-details-marker {
+	display: none;
+}
+
 html, button, input, select, textarea {
 	font-family: var(--font-widget);
 	font-size: 16px;
@@ -43,30 +48,28 @@ body.Observer .resign {
 /* BUTTON */
 
 button {
-	box-sizing: border-box;
-	font-size: 16px;
-	height: 28px;
-	padding: 1px 12px 1px 12px;
-	background-color: gainsboro;
-	border: 2px solid;
-	outline: 1px solid black;
+	flex: 0 0 auto;
 	white-space: nowrap;
-	color: black;
-}
 
-button:disabled {
-	color: gray;
-	border-color: gainsboro;
-	outline-color: gray;
-}
+	padding: 1px 10px;
+	vertical-align: middle;
+	border: 2px solid;
 
-button:enabled {
+	background-color: gainsboro;
 	border-color: white darkgray darkgray white;
+	color: black;
+	outline: 1px solid black;
 }
 
 button:enabled:active:hover {
 	border-color: darkgray white white darkgray;
-	padding: 2px 11px 0px 13px;
+	padding: 2px 9px 0px 11px;
+}
+
+button:disabled {
+	color: gray;
+	border-color: gainsboro;
+	outline-color: gray;
 }
 
 /* MAIN GRID */
@@ -97,6 +100,7 @@ body {
 }
 
 main {
+	user-select: none;
 	position: relative;
 	grid-column: 1;
 	grid-row: 2/4;
@@ -158,13 +162,9 @@ footer {
 /* HEADER */
 
 header {
+	user-select: none;
 	grid-column: 1/3;
 	grid-row: 1;
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: right;
-	align-items: center;
-	gap: 0 8px;
 	border-bottom: 1px solid black;
 	background-color: gainsboro;
 }
@@ -191,44 +191,61 @@ header.replay {
 }
 
 #prompt {
-	flex: 1 1 300px;
-	padding-left: 4px;
+	box-sizing: border-box;
+	min-width: 300px;
 	font-size: 18px;
-	line-height: 18px;
-	padding: 4px 0 4px 4px;
+	line-height: 22px;
+
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
+
+	margin-top: 11px;
+	margin-bottom: 5px;
+	padding: 0 8px;
 }
 
 #prompt:hover {
 	white-space: normal;
 }
 
-#actions, #viewpoint_panel {
+#toolbar {
+	float: left;
 	display: flex;
-	justify-content: end;
-	align-items: center;
+	flex-wrap: wrap;
 }
 
 #actions {
+	user-select: none;
+	float: right;
+	min-width: 100px;
+
+	display: flex;
+	justify-content: end;
+	align-items: center;
 	flex-wrap: wrap;
-	align-content: space-between;
-	padding: 4px 8px;
+
+	min-height: 32px;
+	padding: 6px 7px;
 	gap: 8px;
 }
 
-/* TOOLBAR & MENUS */
-
-#toolbar {
-	display: flex;
-	user-select: none;
+@media (pointer: coarse) {
+	#toolbar { gap: 8px; }
+	#actions { gap: 12px 8px; }
 }
 
-details summary::-webkit-details-marker {
-	display: none;
+@media (max-width: 400px) {
+	#toolbar, #actions {
+		float: none;
+	}
+	#prompt {
+		margin-top: 0;
+	}
 }
 
+/* MENUS AND ICONS */
+
 details menu {
 	display: block;
 	min-width: 140px;
@@ -410,6 +427,11 @@ menu li:hover img {
 	margin: 0 auto;
 }
 
+#map {
+	position: relative;
+	margin: 0 auto;
+}
+
 #mapwrap.fit {
 	max-width: 100%;
 }
@@ -601,17 +623,6 @@ menu li:hover img {
 	}
 }
 
-@media (max-width: 600px) {
-	header {
-		display: grid;
-		grid-template-columns: 1fr;
-		grid-template-rows: min-content minmax(36px, auto) auto;
-	}
-	#toolbar { grid-column: 1; grid-row: 1 }
-	#actions { grid-column: 1; grid-row: 2 }
-	#prompt { grid-column: 1; grid-row: 3 }
-}
-
 @media (max-width: 400px) {
 	body {
 		grid-template-columns: 1fr;
diff --git a/public/common/client.js b/public/common/client.js
index 1c0892d..d911ecc 100644
--- a/public/common/client.js
+++ b/public/common/client.js
@@ -1,5 +1,7 @@
 "use strict"
 
+/* global on_update, on_replay, on_log */
+
 // TODO: hide more functions and globals in anonymous function scope
 
 let params = {
@@ -715,10 +717,15 @@ function init_replay() {
 
 /* MAIN MENU */
 
+/* avoid margin collapse at bottom of main */
+document.querySelector("main").insertAdjacentHTML("beforeend", "<div style='height:1px'></div>")
+
+document.querySelector("header").insertAdjacentHTML("beforeend", "<div id='actions'>")
+document.querySelector("header").insertAdjacentHTML("beforeend", "<div id='prompt'>")
+
 add_icon_button(0, "chat_button", "chat-bubble", toggle_chat).classList.add("hide")
 add_icon_button(0, "zoom_button", "magnifying-glass", () => toggle_zoom())
 add_icon_button(0, "log_button", "scroll-quill", toggle_log)
-add_icon_button(0, "fullscreen_button", "expand", toggle_fullscreen)
 
 function add_main_menu_separator() {
 	let popup = document.querySelector("#toolbar details menu")
@@ -770,10 +777,21 @@ for (let node of document.querySelectorAll("#toolbar > details > menu")) {
 }
 
 function toggle_fullscreen() {
+	// Safari on iPhone doesn't support Fullscreen
+	if (typeof document.documentElement.requestFullscreen !== "function")
+		return
+
 	if (document.fullscreenElement)
 		document.exitFullscreen()
 	else
 		document.documentElement.requestFullscreen()
+
+	event.preventDefault()
+}
+
+if ("ontouchstart" in window) {
+	document.querySelector("header").ondblclick = toggle_fullscreen
+	document.querySelector("main").ondblclick = toggle_fullscreen
 }
 
 /* SNAPSHOT VIEW */
@@ -892,8 +910,13 @@ var update_layout = function () {}
 
 	const mapwrap = document.getElementById("mapwrap")
 	const map = document.getElementById("map") || e_inner.querySelector("div")
-	const map_w = mapwrap ? mapwrap.clientWidth : map.clientWidth
-	const map_h = mapwrap ? mapwrap.clientHeight : map.clientHeight
+	var map_w = mapwrap ? mapwrap.clientWidth : map.clientWidth
+	var map_h = mapwrap ? mapwrap.clientHeight : map.clientHeight
+
+	if (e_scroll.dataset.mapHeight)
+		map_h = Number(e_scroll.dataset.mapHeight)
+	if (e_scroll.dataset.mapWidth)
+		map_w = Number(e_scroll.dataset.mapWidth)
 
 	console.log("INIT MAP", map, map_w, map_h, window.devicePixelRatio)
 
@@ -961,7 +984,7 @@ var update_layout = function () {}
 				}
 			}
 			let win_w = e_scroll.clientWidth
-			let win_h = e_scroll.clientHeight
+			let win_h = e_scroll.offsetHeight
 			let min_z = Math.min(MIN_ZOOM, win_w / map_w, win_h / map_h)
 			zoom_to(min_z)
 		} else {
@@ -985,23 +1008,28 @@ var update_layout = function () {}
 			mapwrap.style.width = null
 			mapwrap.style.height = null
 			if (mapwrap.classList.contains("fit")) {
-				let { width: gw, height: gh } = main.getBoundingClientRect()
-				let { width: ww, height: wh } = mapwrap.getBoundingClientRect()
-				let { width: cw, height: ch } = map.getBoundingClientRect()
-				let scale = Math.min(ww / cw, gh / ch)
+				let cw = map.clientWidth
+				let ch = map.clientHeight
+				let scale = Math.min(
+					main.clientWidth / cw,
+					main.offsetHeight / ch
+				)
 				if (scale < 1) {
 					map.style.transform = "scale(" + scale + ")"
 					mapwrap.style.width = (cw * scale) + "px"
 					mapwrap.style.height = (ch * scale) + "px"
 				}
 			}
+			update_transform_resize()
 		}
 	}
 
 	function disable_map_fit() {
 		if (mapwrap && mapwrap.classList.contains("fit")) {
 			mapwrap.classList.remove("fit")
-			update_map_fit()
+			map.style.transform = null
+			mapwrap.style.width = null
+			mapwrap.style.height = null
 		}
 	}
 
diff --git a/public/common/columbia.css b/public/common/columbia.css
index 030e079..36e34af 100644
--- a/public/common/columbia.css
+++ b/public/common/columbia.css
@@ -12,6 +12,10 @@
 	display: none;
 }
 
+#battle .block {
+	position: static;
+}
+
 #battle.show {
 	display: block;
 }
diff --git a/public/style.css b/public/style.css
index 15c44ab..4603522 100644
--- a/public/style.css
+++ b/public/style.css
@@ -94,7 +94,7 @@ input:focus, textarea:focus {
 	outline: 2px solid var(--color-focus);
 }
 
-select:focus, button:focus {
+button:focus, select:focus {
 	box-shadow: 0 0 0 3px var(--color-focus);
 }
 
@@ -111,6 +111,7 @@ button, select {
 
 	background-color: gainsboro;
 	border-color: white darkgray darkgray white;
+	color: var(--color-black);
 	outline: 1px solid var(--color-black);
 }