Tweak layout for mobile.

3 files changed, 21 insertions, 14 deletions

diff --git a/play.css b/play.css
index bb3af9e..7e4b52f 100644
--- a/play.css
+++ b/play.css
@@ -631,13 +631,12 @@ body.shift .zenobia { background-image: url(images/rival_back.png) }
 /* PANELS */
 
 .panel {
-	min-width: 1368px;
-	max-width: 1636px;
+	background-color: #444;
+	max-width: min(calc(100% - 30px), 1636px);
 	margin: 12px auto 36px auto;
 }
 
 .panel_header {
-	background-color: hsl(0,0%,27%);
 	color: white;
 	user-select: none;
 	font-weight: bold;
@@ -646,7 +645,7 @@ body.shift .zenobia { background-image: url(images/rival_back.png) }
 }
 
 .panel_body {
-	background-color: hsl(0,0%,35%);
+	background-color: #555;
 	display: flex;
 	justify-content: start;
 	flex-wrap: wrap;
@@ -664,12 +663,12 @@ body.shift .zenobia { background-image: url(images/rival_back.png) }
 	)
 }
 
-.panel_header.p_red { background-color: hsl(354,20%,27%) }
-.panel_header.p_blue { background-color: hsl(207,20%,27%) }
-.panel_header.p_yellow { background-color: hsl(47,25%,27%) }
-.panel_header.p_green { background-color: hsl(99,15%,27%) }
+.panel.p_red { background-color: hsl(354,20%,27%) }
+.panel.p_blue { background-color: hsl(207,20%,27%) }
+.panel.p_yellow { background-color: hsl(47,25%,27%) }
+.panel.p_green { background-color: hsl(99,15%,27%) }
 
-#played.p_red {
+.panel.p_red #played {
 	background-image: repeating-linear-gradient(135deg,
 		hsl(354,20%,33%),
 		hsl(354,20%,33%) 60px,
@@ -678,7 +677,7 @@ body.shift .zenobia { background-image: url(images/rival_back.png) }
 	)
 }
 
-#played.p_blue {
+.panel.p_blue #played {
 	background-image: repeating-linear-gradient(135deg,
 		hsl(207,20%,33%),
 		hsl(207,20%,33%) 60px,
@@ -687,7 +686,7 @@ body.shift .zenobia { background-image: url(images/rival_back.png) }
 	)
 }
 
-#played.p_yellow {
+.panel.p_yellow #played {
 	background-image: repeating-linear-gradient(135deg,
 		hsl(47,25%,33%),
 		hsl(47,25%,33%) 60px,
@@ -696,7 +695,7 @@ body.shift .zenobia { background-image: url(images/rival_back.png) }
 	)
 }
 
-#played.p_green {
+.panel.p_green #played {
 	background-image: repeating-linear-gradient(135deg,
 		hsl(99,15%,33%),
 		hsl(99,15%,33%) 60px,
@@ -757,3 +756,11 @@ body.shift .zenobia { background-image: url(images/rival_back.png) }
 	border: 2px solid #444;
 	opacity: 0.8;
 }
+
+/* MOBILE LAYOUT */
+
+@media (max-width: 640px) {
+	.panel_body {
+		justify-content: center;
+	}
+}
diff --git a/play.html b/play.html
index 9182eac..3e9782c 100644
--- a/play.html
+++ b/play.html
@@ -172,7 +172,6 @@
 
 </div>
 </div>
-</div>
 
 <div id="played_panel" class="panel">
 <div id="played_header" class="panel_header">Played</div>
diff --git a/play.js b/play.js
index 114f8da..1c3e18a 100644
--- a/play.js
+++ b/play.js
@@ -667,6 +667,7 @@ let ui = {
 	combat_mask: document.getElementById("combat_mask"),
 	discard: document.getElementById("discard"),
 	played_header: document.getElementById("played_header"),
+	played_panel: document.getElementById("played_panel"),
 	played: document.getElementById("played"),
 	market: document.getElementById("market"),
 	pieces: document.getElementById("pieces"),
@@ -1448,7 +1449,7 @@ function on_update() {
 	ui.active_event.replaceChildren()
 		ui.active_event.appendChild(ui.event_cards[view.event])
 
-	ui.played_header.className = "panel_header p_" + PLAYER_CLASS[view.current]
+	ui.played_panel.className = "panel p_" + PLAYER_CLASS[view.current]
 	ui.played_header.textContent = PLAYER_NAME[view.current] + " Played"
 	ui.played.className = "panel_body p_" + PLAYER_CLASS[view.current]
 	ui.played.replaceChildren()