From f1c7bca0b09329b023cf4fbb96cae12695f95ca7 Mon Sep 17 00:00:00 2001
From: gravel <gravel@noreply.codeberg.org>
Date: Tue, 23 May 2023 12:17:30 +0000
Subject: [PATCH] Improve modal pane experience

---
 output/index.css                | 2 ++
 output/main.js                  | 6 +++---
 sites/+components/qr_modals.php | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/output/index.css b/output/index.css
index cd9a69e..75e94ac 100644
--- a/output/index.css
+++ b/output/index.css
@@ -671,6 +671,8 @@ footer nav a {
 	#details-modal-pane-selection {
 		display: inline-flex;
 		flex-direction: row;
+		/* Stick to the right */
+		margin: 0 0 0 auto;
 	}
 
 	#details-modal-panes[data-pane="0"] > .details-modal-pane:not([data-pane="0"]),
diff --git a/output/main.js b/output/main.js
index eddaf96..e621486 100644
--- a/output/main.js
+++ b/output/main.js
@@ -91,7 +91,7 @@ const tagBody = ({text, type, description}) => element.span({
 	title: description
 });
 
-function displayQRModal(communityID) {
+function displayQRModal(communityID, pane = 0) {
 	const modal = dom.details_modal();
 
 	if (!modal) {
@@ -135,7 +135,7 @@ function displayQRModal(communityID) {
 
 	dom.details_modal_qr_code().src = communityQRCodeURL(communityID);
 
-	document.getElementById('details-modal-panes').setAttribute('data-pane', 0);
+	document.getElementById('details-modal-panes').setAttribute('data-pane', pane);
 
 	modal.showModal();
 }
@@ -152,7 +152,7 @@ function addQRModalHandlers() {
 		for (const cell of ['.td_qr_code', '.td_description', '.td_language', '.td_users']) {
 			row.querySelector(cell).addEventListener(
 				'click',
-				() => displayQRModal(communityID)
+				() => displayQRModal(communityID, cell == '.td_qr_code' ? 1 : 0)
 			);
 		}
 		row.addEventListener(
diff --git a/sites/+components/qr_modals.php b/sites/+components/qr_modals.php
index 5347c79..7501e60 100644
--- a/sites/+components/qr_modals.php
+++ b/sites/+components/qr_modals.php
@@ -108,7 +108,7 @@
 						themed-button"
 						data-pane="0"
 						class="themed-button"
-					>Back</button>
+					>Show description</button>
 					<button
 						class="details-modal-pane-button
 						themed-button"