From ee8ac34adc55286bde48d90dc9d24dbbc2406c11 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Mon, 23 May 2022 02:46:11 +0200
Subject: Mobile layout.

---
 play.css  | 28 +++++++++++++++++++++++++++-
 play.html |  2 ++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/play.css b/play.css
index 30b155b..fdd2389 100644
--- a/play.css
+++ b/play.css
@@ -97,6 +97,7 @@ aside { width: 220px; }
 
 #tooltip {
 	display: none;
+	pointer-events: none;
 	position: fixed;
 	z-index: 300;
 	right: 240px;
@@ -110,7 +111,7 @@ aside { width: 220px; }
 /* CARD LIST DIALOGS */
 
 .card_list_dialog {
-	position: absolute;
+	position: fixed;
 	width: 300px;
 	border: 1px solid black;
 	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
@@ -588,3 +589,28 @@ body.bevel .marker.vps{border-color:#d4a75c #94671c #94671c #d4a75c;box-shadow:0
 body.bevel .marker.vps.highlight{box-shadow:0 0 0 1px #340700,0 0 0 3px yellow}
 body.bevel .marker.vps.selected{box-shadow:0 0 0 1px #340700,0 0 0 3px crimson}
 body.flat .marker.vps{border-color:#340700}
+
+/* MOBILE PHONE LAYOUT */
+
+@media (max-width: 640px) {
+	.hand .card {
+		width: 120px;
+		height: 168px;
+		border-radius: 8px;
+	}
+	.hand {
+		min-height: 168px;
+	}
+	#tooltip {
+		top: 10px;
+		right: 10px;
+	}
+	#removed, #discard {
+		position: static;
+		box-shadow: none;
+		border-top: none;
+		width: auto;
+	}
+	#removed { grid-row: 3; }
+	#discard { grid-row: 4; }
+}
diff --git a/play.html b/play.html
index abc17a3..088139e 100644
--- a/play.html
+++ b/play.html
@@ -39,6 +39,7 @@
 </div>
 
 <header>
+	<div id="toolbar">
 	<div class="menu">
 		<div class="menu_title"><img src="/images/cog.svg"></div>
 		<div class="menu_popup">
@@ -83,6 +84,7 @@
 			<div id="demolish_fieldworks" class="menu_item" onclick="send_action('demolish_fieldworks')">Demolish fieldworks</div>
 		</div>
 	</div>
+	</div>
 	<div id="prompt"></div>
 	<div id="actions"></div>
 </header>
-- 
cgit v1.2.3