Mobile layout.

author: Tor Andersson <tor@ccxvii.net> 2023-10-18 00:35:42 +0200
committer: Tor Andersson <tor@ccxvii.net> 2023-10-20 19:00:27 +0200
commit: 58cb429fff2cf4d947d365906dc34dcf21ba2116 (patch)
tree: e1a08d87f077bdaa9e4d28581d4d06349881951b
parent: db515098aeb9f44faa0990076ce54df6ab1b7f5b (diff)
download: andean-abyss-58cb429fff2cf4d947d365906dc34dcf21ba2116.tar.gz
4 files changed, 71 insertions, 54 deletions
diff --git a/about.html b/about.html
index 46f900a..505a821 100644
--- a/about.html
+++ b/about.html
@@ -14,16 +14,11 @@ role of a faction seeking to run Colombian affairs: the Government or one of
 three insurgent factions &mdash; the Marxist FARC, the right-wing AUC
 paramilitaries, or the narco-trafficking Cartels.
 
-<br clear="left">
-
 <p>
 Designer: Volko Ruhnke.
-
-<p>
-Copyright &copy; 2012
-<a href="https://www.gmtgames.com/p-536-andean-abyss-2nd-printing.aspx">GMT Games, LLC</a>.
-<br>
-Cover art by Rodger B. MacGowan &copy; 2012.
+<br> Copyright &copy; 2012 <a href="https://www.gmtgames.com/p-536-andean-abyss-2nd-printing.aspx">GMT Games, LLC</a>.
+<br> Cover art by Rodger B. MacGowan &copy; 2012.
+<br> Programming &copy; 2023 by Tor Andersson.
 
 <ul>
 <li><a href="/andean-abyss/info/rulebook.html">Rules of Play</a>
diff --git a/play.css b/play.css
index 593f5b8..ff8533a 100644
--- a/play.css
+++ b/play.css
@@ -41,20 +41,13 @@ main { background-color: #777; }
 	top: 60px;
 }
 
-/* Put cards on right of map when zoomed to fit, or very wide screen */
-main { grid-template-columns: 1fr min-content min-content 1fr; }
-#mapwrap { grid-row: 1; grid-column: 2 }
-#card_panel { grid-row: 1; grid-column: 3 }
-@media (min-width: 2200px) { main { display: grid; } }
-main.fit { display: grid; }
-
 /* MAP */
 
 #mapwrap {
 	box-shadow: 0px 1px 10px #0008;
 	width: 1650px;
 	height: 2550px;
-	margin-bottom: 36px;
+	margin-bottom: 24px;
 }
 
 #mapwrap.fit {
@@ -341,15 +334,32 @@ path.tip { stroke: white; stroke-dasharray: 4 4; }
 /* CARDS */
 
 #card_panel {
-	text-align: center;
-	margin: 24px;
+	display: flex;
+	flex-wrap: wrap;
+	align-content: start;
+	justify-content: center;
+	gap: 18px;
+	padding: 18px;
 }
 
-#card_panel .card {
-	display: inline-block;
-	margin: 9px;
+#card_panel { width: 800px; margin: 0 auto; }
+@media (max-width: 800px) {
+	#card_panel { width: 1614px; justify-content: start; }
 }
 
+/* Put cards on right of map when zoomed to fit, or very wide screen */
+#mapwrap { grid-row: 1; grid-column: 2 }
+#card_panel { grid-row: 1; grid-column: 3 }
+#grid { grid-template-columns: 1fr min-content min-content 1fr; }
+
+@media (min-width: 2200px) {
+	#grid { display: grid; }
+	#card_panel { width: 250px; }
+}
+
+#grid.fit { display: grid; }
+#grid.fit #card_panel { width: 250px; }
+
 .card {
 	width: 248px;
 	height: 348px;
diff --git a/play.html b/play.html
index eb01928..6a8d7bd 100644
--- a/play.html
+++ b/play.html
@@ -2,14 +2,15 @@
 <!-- vim:set nowrap: -->
 <html lang="en">
 <head>
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, user-scalable=no, interactive-widget=resizes-content, viewport-fit=cover">
+<meta name="theme-color" content="#444">
 <meta charset="UTF-8">
 <title>ANDEAN ABYSS</title>
 <link id="favicon" rel="icon" href="favicon.svg">
 <link rel="stylesheet" href="/fonts/fonts.css">
-<link rel="stylesheet" href="/common/play.css">
+<link rel="stylesheet" href="/common/client.css">
 <link rel="stylesheet" href="play.css">
-<script defer src="/common/play.js"></script>
+<script defer src="/common/client.js"></script>
 <script defer src="data.js"></script>
 <script defer src="play.js"></script>
 </head>
@@ -19,31 +20,34 @@
 
 <header>
 	<div id="toolbar">
-	<div class="menu">
-		<div class="menu_title"><img src="/images/cog.svg"></div>
-		<div class="menu_popup">
-			<a class="menu_item" href="info/rulebook.html" target="_blank")">Rulebook</a>
-			<a class="menu_item" href="info/playbook.html" target="_blank")">Playbook</a>
-			<a class="menu_item" href="info/pac.html" target="_blank")">Player Aids</a>
-			<a class="menu_item" href="info/cards.html" target="_blank")">Cards</a>
-		</div>
-	</div>
-	<div class="icon_button" onclick="toggle_pieces()"><img src="/images/earth-america.svg"></div>
-	<div class="icon_button" onclick="toggle_zoom2()"><img src="/images/magnifying-glass.svg"></div>
-	<div class="icon_button" onclick="toggle_log()"><img src="/images/scroll-quill.svg"></div>
-	<div id="negotiate_menu" class="menu hide">
-		<div class="menu_title"><img src="images/shaking-hands.svg"></div>
-		<div class="menu_popup">
-			<div id="remove_pieces_menu" class="menu_item" onclick="send_action('remove_pieces')">Remove Pieces</div>
-			<div id="transfer_resources_menu" class="menu_item" onclick="send_action('transfer_resources')">Transfer Resources</div>
-			<div id="transfer_shipment_menu" class="menu_item" onclick="send_action('transfer_shipment')">Transfer Shipment</div>
-			<div id="ask_resources_menu" class="menu_item" onclick="send_action('ask_resources')">Ask for Resources</div>
-			<div id="ask_shipment_menu" class="menu_item" onclick="send_action('ask_shipment')">Ask for Shipment</div>
-		</div>
+		<details>
+			<summary>
+				<img src="/images/cog.svg">
+			</summary>
+			<menu>
+				<li><a href="info/rulebook.html" target="_blank")">Rulebook</a>
+				<li><a href="info/playbook.html" target="_blank")">Playbook</a>
+				<li class="separator">
+				<li><a href="info/pac.html" target="_blank")">Player Aids</a>
+				<li><a href="info/cards.html" target="_blank")">Cards</a>
+			</menu>
+		</details>
+		<details id="negotiate_menu">
+			<summary>
+				<img src="images/shaking-hands.svg">
+			</summary>
+			<menu>
+				<li id="remove_pieces_menu" onclick="send_action('remove_pieces')">Remove Pieces
+				<li id="transfer_resources_menu" onclick="send_action('transfer_resources')">Transfer Resources
+				<li id="transfer_shipment_menu" onclick="send_action('transfer_shipment')">Transfer Shipment
+				<li id="ask_resources_menu" onclick="send_action('ask_resources')">Ask for Resources
+				<li id="ask_shipment_menu" onclick="send_action('ask_shipment')">Ask for Shipment
+			</menu>
+		</details>
+		<!--
+		<button onclick="toggle_pieces()"><img src="/images/earth-america.svg"></button>
+		-->
 	</div>
-	</div>
-	<div id="prompt"></div>
-	<div id="actions"></div>
 </header>
 
 <aside>
@@ -94,7 +98,9 @@
 	<div id="log"></div>
 </aside>
 
-<main>
+<main data-max-zoom="1">
+
+<div id="grid">
 
 <div id="card_panel">
 <div id="this_card" class="hide"><div id="unshaded_event"></div><div id="shaded_event"></div></div>
@@ -200,6 +206,7 @@
 
 </div>
 </div>
+</div>
 
 </main>
 
diff --git a/play.js b/play.js
index fcaf290..711e566 100644
--- a/play.js
+++ b/play.js
@@ -428,11 +428,6 @@ function is_action(action, arg) {
 	return !!(view.actions && view.actions[action] && set_has(view.actions[action], arg))
 }
 
-function toggle_zoom2() {
-	document.querySelector("main").classList.toggle("fit")
-	toggle_zoom()
-}
-
 function toggle_pieces() {
 	if (ui.map.classList.contains("hide_tokens")) {
 		ui.map.classList.remove("hide_tokens")
@@ -1590,4 +1585,14 @@ function map_get(map, key, missing) {
 	return missing
 }
 
+// TODO: clean up this mess...
+var orig_toggle_zoom = toggle_zoom
+toggle_zoom = function () {
+	orig_toggle_zoom()
+	if (document.getElementById("mapwrap").classList.contains("fit"))
+		document.getElementById("grid").classList.add("fit")
+	else
+		document.getElementById("grid").classList.remove("fit")
+}
+
 scroll_with_middle_mouse("main")
author	Tor Andersson <tor@ccxvii.net>	2023-10-18 00:35:42 +0200
committer	Tor Andersson <tor@ccxvii.net>	2023-10-20 19:00:27 +0200
commit	58cb429fff2cf4d947d365906dc34dcf21ba2116 (patch)
tree	e1a08d87f077bdaa9e4d28581d4d06349881951b
parent	db515098aeb9f44faa0990076ce54df6ab1b7f5b (diff)
download	andean-abyss-58cb429fff2cf4d947d365906dc34dcf21ba2116.tar.gz