From b05e822c4b5946f5c59371c6a60d6470e99e37bd Mon Sep 17 00:00:00 2001
From: gravel <gravel@noreply.codeberg.org>
Date: Mon, 22 May 2023 14:54:59 +0000
Subject: [PATCH] Introduce tabbed modal layout

---
 output/index.css                |  93 ++++++++++-----
 output/main.js                  |  12 ++
 sites/+components/qr_modals.php | 193 +++++++++++++++++---------------
 3 files changed, 180 insertions(+), 118 deletions(-)

diff --git a/output/index.css b/output/index.css
index adaf84e..10bf61a 100644
--- a/output/index.css
+++ b/output/index.css
@@ -417,17 +417,28 @@ footer nav a {
 #details-modal {
 	padding: 0;
 	width: 80vw;
-	max-height: 80vh;
+	--modal-height: calc(80vh - 4em);
+	height: var(var(--modal-height));
 	color: var(--primary-color);
 	background-color: var(--secondary-color);
 	--icon-size: 4rem;
 }
 
 #details-modal-contents {
+	display: flex;
+	flex-direction: column;
+	box-sizing: border-box;
+}
+
+#details-modal-flow {
 	display: flex;
 	flex-direction: column;
 	padding: 3em;
+	height: var(--modal-height);
+	overflow: auto;
 	box-sizing: border-box;
+	justify-content: space-between;
+	gap: 1em;
 }
 
 #details-modal-close {
@@ -449,11 +460,16 @@ footer nav a {
 	font-style: italic;
 }
 
-#details-modal-pane {
+#details-modal-panes {
 	display: flex;
 	flex-direction: row;
 }
 
+#details-modal-panes, .details-modal-pane {
+	/* Jank overlap with actions when overflows */
+	/* height: 100%; */
+}
+
 #details-modal-start {
 	display: flex;
 	flex-direction: column;
@@ -518,11 +534,6 @@ footer nav a {
 	filter: blur(3px);
 }
 
-#details-modal-start #details-modal-description {
-	max-height: 50vh;
-	overflow: auto;
-}
-
 #details-modal-start #details-modal-description-inner:empty::after {
 	content: "No description";
 	font-style: italic;
@@ -535,8 +546,8 @@ footer nav a {
 
 #details-modal-end #details-modal-qr-code {
 	aspect-ratio: 1;
-	width: 20em;
-	height: 20em;
+	width: 15em;
+	height: 15em;
 	margin: 1em;
 }
 
@@ -544,6 +555,15 @@ footer nav a {
 	text-align: center;
 }
 
+#details-modal-actions {
+	display: flex;
+	width: 100%;
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: .5em;
+	row-gap: .5em;
+}
+
 #details-modal .themed-button {
 	color: var(--primary-color);
 	background-color: var(--secondary-color);
@@ -629,24 +649,7 @@ footer nav a {
 	}
 }
 
-@media (max-width: 950px) {
-	#details-modal-pane {
-		flex-direction: column;
-	}
-
-	#details-modal-end {
-		align-items: start;
-	}
-
-	#details-modal #details-modal-qr-code {
-		width: 12.5em;
-		height: 12.5em;
-	}
-
-	#details-modal-qr-code-label-name {
-		display: inline;
-	}
-
+@media (max-height: 1100px) {
 	#details-modal-language, #details-modal-users, #details-modal-created {
 		display: inline-block;
 		text-align: center;
@@ -662,6 +665,42 @@ footer nav a {
 	}
 }
 
+@media (max-width: 1000px) {
+	#details-modal-pane-selection {
+		display: inline-flex;
+		flex-direction: row;
+	}
+
+	#details-modal-panes[data-pane="0"] > .details-modal-pane:not([data-pane="0"]),
+	#details-modal-panes[data-pane="1"] > .details-modal-pane:not([data-pane="1"]) {
+		display: none;
+	}
+
+	#details-modal-panes[data-pane="0"] ~ #details-modal-actions .details-modal-pane-button[data-pane="0"],
+	#details-modal-panes[data-pane="1"] ~ #details-modal-actions .details-modal-pane-button[data-pane="1"] {
+		display:none
+	}
+
+	#details-modal-panes {
+		flex-direction: column;
+		align-items: stretch;
+		flex-grow: 500;
+	}
+
+	#details-modal-panes > gap {
+		display: none;
+	}
+
+	#details-modal #details-modal-qr-code {
+		width: 30vh;
+		height: 30vh;
+	}
+
+	#details-modal-qr-code-label-name {
+		display: inline;
+	}
+}
+
 @media (max-width: 500px) {
 	:root {
 		/* ! For when descriptions don't wrap and 100vw doesn't work. */
diff --git a/output/main.js b/output/main.js
index a29d4b2..b43dd21 100644
--- a/output/main.js
+++ b/output/main.js
@@ -135,6 +135,8 @@ function displayQRModal(communityID) {
 
 	dom.details_modal_qr_code().src = communityQRCodeURL(communityID);
 
+	document.getElementById('details-modal-panes').setAttribute('data-pane', 0);
+
 	modal.showModal();
 }
 
@@ -181,6 +183,16 @@ function addQRModalHandlers() {
 		}
 	});
 
+	for (const button of document.querySelectorAll('.details-modal-pane-button')) {
+		button.addEventListener(
+			'click',
+			function () {
+				const targetPane = this.getAttribute('data-pane');
+				document.getElementById('details-modal-panes')?.setAttribute('data-pane', targetPane);
+			}
+		)
+	}
+
 	document.querySelector('#details-modal-copy-button').addEventListener(
 		'click',
 		function () {
diff --git a/sites/+components/qr_modals.php b/sites/+components/qr_modals.php
index 4bac8a0..5347c79 100644
--- a/sites/+components/qr_modals.php
+++ b/sites/+components/qr_modals.php
@@ -1,7 +1,6 @@
 <?php
 	require_once "$PROJECT_ROOT/php/utils/room-invites.php";
 ?>
-
 <dialog id="details-modal">
 	<div id="details-modal-contents">
 		<div id="details-modal-close">
@@ -9,103 +8,115 @@
 		</div>
 		<div id="details-modal-close-hint">
 			(Esc to close.)
-		</div>
-		<div id="details-modal-pane">
-			<div id="details-modal-start">
-				<div id="details-modal-title">
-					<div
-						id="details-modal-community-icon-wrapper"
-						class="clickable"
-						data-hydrate-with="has_icon:data-has-icon;icon_safety:data-icon-safety"
-						title="Community icon"
-					><img
-						id="details-modal-community-icon"
-						width="64"
-						height="64"
-						data-hydrate-with="icon:src;icon_safety:data-icon-safety"
-					/></div><h1><a 
-						id="details-modal-community-name"
-						data-hydrate-with="name;preview_link:href"
-						title="Open preview in new tab"
-						href="#"
-					></a></h1>
-				</div>
-				<p id="details-modal-description">
-					<span id="details-modal-description-inner" data-hydrate-with="description"></span>
-				</p>
-				<gap></gap>
-				<div id="details-modal-room-info">
-					<p id="details-modal-room-tags">
-
-					</p>
-					<p id="details-modal-language">
-						Language: <span
-							id="details-modal-language-flag"
-							data-hydrate-with="language_flag"
-						></span>
-					</p>
-					<p id="details-modal-users">
-						Users: <span data-hydrate-with="users"></span>
-					</p>
-					<p id="details-modal-created">
-						Created: <span data-hydrate-with="creation_datestring"></span>
-					</p>
-					<p id="details-modal-host">
-						Server:
-						<a 
-							title="Open server in new tab"
-							data-hydrate-with="hostname;hostname:href"
-							target="_blank"
-							rel="noopener noreferrer"
+		</div>	
+		<div id="details-modal-flow">
+			<div id="details-modal-panes" data-pane="0">
+				<div id="details-modal-start" class="details-modal-pane" data-pane="0">
+					<div id="details-modal-title">
+						<div
+							id="details-modal-community-icon-wrapper"
+							class="clickable"
+							data-hydrate-with="has_icon:data-has-icon;icon_safety:data-icon-safety"
+							title="Community icon"
+						><img
+							id="details-modal-community-icon"
+							width="64"
+							height="64"
+							data-hydrate-with="icon:src;icon_safety:data-icon-safety"
+						/></div><h1><a 
+							id="details-modal-community-name"
+							data-hydrate-with="name;preview_link:href"
+							title="Open preview in new tab"
 							href="#"
-						></a>
+						></a></h1>
+					</div>
+					<p id="details-modal-description">
+						<span id="details-modal-description-inner" data-hydrate-with="description"></span>
+					</p>
+					<p id="details-modal-room-tags">
 					</p>
+					<gap></gap>
+					<div id="details-modal-room-info">
+						<p id="details-modal-language">
+							Language: <span
+								id="details-modal-language-flag"
+								data-hydrate-with="language_flag"
+							></span>
+						</p>
+						<p id="details-modal-users">
+							Users: <span data-hydrate-with="users"></span>
+						</p>
+						<p id="details-modal-created">
+							Created: <span data-hydrate-with="creation_datestring"></span>
+						</p>
+						<p id="details-modal-host">
+							Server:
+							<a 
+								title="Open server in new tab"
+								data-hydrate-with="hostname;hostname:href"
+								target="_blank"
+								rel="noopener noreferrer"
+								href="#"
+							></a>
+						</p>
+					</div>
+				</div>
+				<gap></gap>
+				<div id="details-modal-end" class="details-modal-pane" data-pane="1">
+					<img
+						src=""
+						id="details-modal-qr-code"
+						title="Community join link encoded as QR code"
+						width="512"
+						height="512"
+					>
+					<div id="details-modal-qr-code-label">
+						Scan QR code in Session to join
+						<span 
+							id="details-modal-qr-code-label-name"
+						>'<span data-hydrate-with="name"></span>'</span>
+					</div>
 				</div>
 			</div>
-			<gap></gap>
-			<div id="details-modal-end">
-				<img
-					src=""
-					id="details-modal-qr-code"
-					title="Community join link encoded as QR code"
-					width="512"
-					height="512"
+			<div id="details-modal-actions">
+				<button
+					id="details-modal-copy-button"
+					class="themed-button"
+					data-hydrate-with="join_link:data-href"
+					title="Click here to copy this Community's join link"
+				>
+					Copy join link
+				</button>
+				<button
+					id="details-modal-copy-staff-id"
+					class="themed-button"
+					data-hydrate-with="staff:data-staff"
+					title="Copy the mention for a random staff member"
 				>
-				<div id="details-modal-qr-code-label">
-					Scan QR code in Session to join
-					<span 
-						id="details-modal-qr-code-label-name"
-					>'<span data-hydrate-with="name"></span>'</span>
+					Copy mod ping
+				</button>
+				<button
+					id="details-modal-copy-room-id"
+					class="themed-button"
+					data-hydrate-with="identifier:data-identifier"
+					title="Copy this room's identifier to uniquely identify this room to the sessioncommunities.online team"
+				>Copy Community ID</button>
+				<gap></gap>
+				<div id="details-modal-pane-selection" class="hidden">
+					<button
+						class="details-modal-pane-button
+						themed-button"
+						data-pane="0"
+						class="themed-button"
+					>Back</button>
+					<button
+						class="details-modal-pane-button
+						themed-button"
+						data-pane="1"
+						class="themed-button"
+					>Show QR Code</button>
 				</div>
 			</div>
 		</div>
-		<gap></gap>
-		<p>
-			<button
-				id="details-modal-copy-button"
-				class="themed-button"
-				data-hydrate-with="join_link:data-href"
-				title="Click here to copy this Community's join link"
-			>
-				Copy join link
-			</button>
-
-			<button
-				id="details-modal-copy-staff-id"
-				class="themed-button"
-				data-hydrate-with="staff:data-staff"
-				title="Copy the mention for a random staff member"
-			>
-				Copy mod ping
-			</button>
-
-			<button
-				id="details-modal-copy-room-id"
-				class="themed-button"
-				data-hydrate-with="identifier:data-identifier"
-				title="Copy this room's identifier to uniquely identify this room to the sessioncommunities.online team"
-			>Copy Community ID</button>
-		</p>
 	</div>
 </dialog>
-