summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--play.css31
-rw-r--r--play.html1
-rw-r--r--play.js3
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()