From 58cb429fff2cf4d947d365906dc34dcf21ba2116 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Wed, 18 Oct 2023 00:35:42 +0200
Subject: Mobile layout.

---
 play.html | 63 +++++++++++++++++++++++++++++++++++----------------------------
 1 file changed, 35 insertions(+), 28 deletions(-)

(limited to 'play.html')
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>
@@ -198,6 +204,7 @@
 <div id="cartels_resources" class="piece cartels cylinder" style="left:551px;top:60px;z-index:3"></div>
 </div>
 
+</div>
 </div>
 </div>
 
-- 
cgit v1.2.3

