Responsive layout for mobile screens.

New battle dialog for block games without tables.

3 files changed, 129 insertions, 58 deletions

diff --git a/public/common/columbia.css b/public/common/columbia.css
index 1a646b6..78bb61c 100644
--- a/public/common/columbia.css
+++ b/public/common/columbia.css
@@ -2,56 +2,55 @@
 
 #battle {
 	position: absolute;
-	left: 100px;
-	top: 100px;
+	min-width: 450px;
+	left: 10px;
+	top: 55px;
 	z-index: 50;
-	border-collapse: collapse;
-	border: 1px solid black;
-	background-color: white;
 	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
-	visibility: hidden;
-}
-
-#battle.show {
-	visibility: visible;
-}
-
-#battle th {
-	padding: 0;
+	background-color: white;
 	border: 1px solid black;
+	display: none;
 }
 
-#battle td {
-	padding: 0;
-	border: 1px solid black;
-	vertical-align: top;
+#battle.show {
+	display: block;
 }
 
 #battle_header {
-	font-weight: bold;
-	height: 2em;
-	line-height: 2em;
+	padding: 2px 8px;
+	line-height: 24px;
+	min-height: 24px;
 	font-weight: bold;
 	user-select: none;
 	cursor: move;
+	text-align: center;
+	border-bottom: 1px solid black;
+	overflow: hidden;
 }
 
 #battle_message {
-	font-weight: normal;
-	height: 2em;
-	line-height: 2em;
-	padding: 0 8px;
+	padding: 2px 8px;
+	line-height: 24px;
+	min-height: 24px;
+	text-align: center;
+	border-top: 1px solid black;
 }
 
-#FA, #FB, #FC, #FD, #FF, #FR, #EA, #EB, #EC, #ED, #EF, #ER {
+#FC, #FF, #FR, #EC, #EF, #ER {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
-	margin: 10px;
+	padding: 15px;
+	gap: 5px
+}
+
+#FR, #ER {
+	padding: 10px 15px;
+	min-height: 10px;
 }
 
-.battle_separator {
-	height: 15px;
+#FR .battle_menu_list, #ER .battle_menu_list {
+	display: none;
 }
 
 .battle_menu .block {
@@ -63,24 +62,19 @@
 }
 
 .battle_menu .action {
+	display: none;
 	width: 20px;
 	height: 20px;
 	border-radius: 5px;
 	padding: 3px;
-	display: none;
 }
 
 .battle_menu_list {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
 	margin-top: 5px;
 	min-height: 26px;
-	width: 80px;
-	text-align: center;
-	font-size: 1px;
-	line-height: 1px;
-}
-
-.battle_reserves .battle_menu_list {
-	display: none;
 }
 
 .battle_menu .action:hover { background-color: red; }
@@ -88,13 +82,28 @@
 .battle_menu .action.withdraw:hover { background-color: #eee; }
 .battle_menu .action.pass:hover { background-color: gray; }
 
-.battle_menu.fire .action.fire { display: inline; }
-.battle_menu.retreat .action.retreat { display: inline; }
-.battle_menu.pass .action.pass { display: inline; }
-.battle_menu.charge .action.charge { display: inline; }
-.battle_menu.treachery .action.treachery { display: inline; }
-.battle_menu.harry .action.harry { display: inline; }
-.battle_menu.withdraw .action.withdraw { display: inline; }
-.battle_menu.storm .action.storm { display: inline; }
-.battle_menu.sally .action.sally { display: inline; }
-.battle_menu.hit .action.hit { display: inline; }
+.battle_menu.fire .action.fire { display: block; }
+.battle_menu.retreat .action.retreat { display: block; }
+.battle_menu.pass .action.pass { display: block; }
+.battle_menu.charge .action.charge { display: block; }
+.battle_menu.treachery .action.treachery { display: block; }
+.battle_menu.harry .action.harry { display: block; }
+.battle_menu.withdraw .action.withdraw { display: block; }
+.battle_menu.storm .action.storm { display: block; }
+.battle_menu.sally .action.sally { display: block; }
+.battle_menu.hit .action.hit { display: block; }
+
+/* MOBILE PHONE LAYOUT */
+
+@media (max-width: 500px) {
+	#battle {
+		position: static;
+		grid-column: 1;
+		grid-row: 3;
+		min-width: auto !important;
+		box-shadow: none;
+		border-top: none;
+		border-left: none;
+		border-right: none;
+	}
+}
diff --git a/public/common/play.css b/public/common/play.css
index 61f1aa3..c19ea6c 100644
--- a/public/common/play.css
+++ b/public/common/play.css
@@ -35,7 +35,6 @@ button {
 	box-sizing: border-box;
 	font-size: 16px;
 	height: 28px;
-	margin: 0;
 	padding: 1px 12px 1px 12px;
 	background-color: gainsboro;
 	border: 2px solid;
@@ -74,9 +73,16 @@ header {
 	grid-column: 1/3;
 	grid-row: 1;
 	display: flex;
+	flex-wrap: wrap;
 	align-items: center;
 	border-bottom: 1px solid black;
 	background-color: gainsboro;
+	padding-right: 10px;
+}
+
+#toolbar {
+	display: flex;
+	flex-wrap: wrap;
 }
 
 header.disconnected {
@@ -137,7 +143,7 @@ aside {
 }
 
 footer {
-	position:absolute;
+	position: fixed;
 	z-index: 500;
 	bottom: 0;
 	background-color: white;
@@ -209,24 +215,31 @@ footer {
 	filter: invert(100%);
 }
 
-header button {
-	margin: 0 10px;
+header #actions {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: end;
+	gap: 10px;
+	padding-left: 10px;
+	margin: 5px 0;
 }
 
 header .replay {
-	margin: 0 10px;
 	display: flex;
+	flex-wrap: wrap;
+	justify-content: end;
+	padding-left: 10px;
+	margin: 5px 0;
 }
 
 header .replay button {
-	margin: 0;
+	margin-right: 0;
 }
 
 #prompt {
-	margin: 0 20px;
+	padding-left: 20px;
 	font-size: 18px;
-	flex: 1 1 0;
-	width: 0;
+	flex: 1 1 200px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
@@ -350,3 +363,52 @@ header .replay button {
 	padding: 5px;
 	font-size: 1rem;
 }
+
+/* MOBILE PHONE LAYOUT */
+
+@media (max-width: 500px) {
+	body {
+		width: 100%;
+		height: auto;
+		grid-template-columns: 1fr;
+		grid-template-rows: min-content;
+		overflow-x: clip;
+		overflow-y: auto;
+	}
+	footer { width: 100%; background-color: rgba(255,255,255,0.5) }
+	header { display: block; }
+	#prompt { padding-left: 10px; display: block; white-space: normal; }
+
+	#chat_window {
+		position: static;
+		grid-column: 1;
+		grid-row: 2;
+		display: none;
+		width: auto;
+		box-shadow: none;
+		border-top: none;
+	}
+	#chat_window.show {
+		display: block;
+	}
+
+	/* game specific dialogs in rows 3-9 */
+
+	main {
+		grid-column: 1;
+		grid-row: 10;
+	}
+	aside {
+		grid-column: 1;
+		grid-row: 11;
+		width: auto !important;
+		border-left: none;
+		border-top: 1px solid black;
+	}
+	#log {
+		height: 50vh;
+	}
+	#replay_button, #rematch_button {
+		display: inline-block;
+	}
+}
diff --git a/public/common/play.js b/public/common/play.js
index a106bcd..d8e4ee1 100644
--- a/public/common/play.js
+++ b/public/common/play.js
@@ -144,7 +144,7 @@ function init_chat() {
 	chat_button.className = "icon_button";
 	chat_button.innerHTML = '<img src="/images/chat-bubble.svg">';
 	chat_button.addEventListener("click", toggle_chat);
-	document.querySelector("header").insertBefore(chat_button, document.getElementById("prompt"));
+	document.querySelector("#toolbar").appendChild(chat_button);
 
 	chat = {
 		is_visible: false,