Introduce tabbed modal layout

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;
+	width: 15em;
-	height: 20em;
+	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) {
+@media (max-height: 1100px) {
-	#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;
-	}
-
 	#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. */

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 () {

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">
@@ -10,8 +9,9 @@
 		<div id="details-modal-close-hint">
 			(Esc to close.)
 		</div>	
-		<div id="details-modal-pane">
+		<div id="details-modal-flow">
-			<div id="details-modal-start">
+			<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"
@@ -33,11 +33,10 @@
 					<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>
+					<gap></gap>
+					<div id="details-modal-room-info">
 						<p id="details-modal-language">
 							Language: <span
 								id="details-modal-language-flag"
@@ -63,7 +62,7 @@
 					</div>
 				</div>
 				<gap></gap>
-			<div id="details-modal-end">
+				<div id="details-modal-end" class="details-modal-pane" data-pane="1">
 					<img
 						src=""
 						id="details-modal-qr-code"
@@ -79,8 +78,7 @@
 					</div>
 				</div>
 			</div>
-		<gap></gap>
+			<div id="details-modal-actions">
-		<p>
 				<button
 					id="details-modal-copy-button"
 					class="themed-button"
@@ -89,7 +87,6 @@
 				>
 					Copy join link
 				</button>
-
 				<button
 					id="details-modal-copy-staff-id"
 					class="themed-button"
@@ -98,14 +95,28 @@
 				>
 					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>
+				<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>
 	</div>
 </dialog>
-