feat: ui improvements

output/index.css

@@ -118,8 +118,21 @@ html.js .noscript, .hidden {
 .themed-button {
 	color: var(--primary-color);
 	background-color: var(--secondary-color);
-	border-radius: 10%;
+	border-radius: .5em;
-	padding: var(--cell-padding-small);
+	padding: var(--cell-padding);
+	height: min-content;
+	font-size: 0.85rem;
+}
+
+.themed-button-primary {
+	color: var(--secondary-color);
+	background-color: var(--primary-color);
+	font-weight: bold;
+}
+
+.themed-button-secondary {
+	color: var(--primary-color);
+	background-color: var(--secondary-color-heading);
 }
 
 .badge {
@@ -457,7 +470,6 @@ html.js .td_description::after {
 
 .td_users {
 	text-align: center;
-	/* font-weight: bold; */
 }
 
 .td_preview {
@@ -589,12 +601,33 @@ footer, aside {
 #details-modal {
 	padding: 0;
 	width: 80vw;
-	--modal-height: calc(80vh - 8em);
+	--modal-height: calc(90vh - 8em);
 	height: var(var(--modal-height));
 	color: var(--primary-color);
 	background-color: var(--secondary-color);
 	--room-icon-size: 4rem;
 	--feather-icon-size: 2rem;
+	border-radius: .5em;
+}
+
+/* disable default backdrop */
+#details-modal::backdrop {
+	background-color: transparent
+}
+
+#modal-backdrop {
+	display: none;
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	z-index: 50;
+	background: rgba(0, 0, 0, 0.5);
+}
+
+#details-modal[open] ~ #modal-backdrop {
+	display: block;
 }
 
 #details-modal-contents {
@@ -606,7 +639,7 @@ footer, aside {
 #details-modal-flow {
 	display: flex;
 	flex-direction: column;
-	padding: 3em;
+	padding: 2.5em;
 	height: var(--modal-height);
 	overflow: auto;
 	box-sizing: border-box;
@@ -636,12 +669,13 @@ footer, aside {
 #details-modal-panes {
 	display: flex;
 	flex-direction: row;
+	flex-grow: 500;
 }
 
 #details-modal-start {
 	display: flex;
 	flex-direction: column;
-	margin-right: 1em;
+	margin-right: 3em;
 }
 
 #details-modal-end {
@@ -656,28 +690,32 @@ footer, aside {
 }
 
 #details-modal-title {
+	vertical-align: middle;
 	margin-bottom: calc( var(--room-icon-size) * 0.1 );
 }
 
+#details-modal-community-name {
+	display: inline;
+	line-height: var(--room-icon-size);
+	vertical-align: top;
+	padding: 0;
+}
+
 #details-modal-community-icon-wrapper {
 	position: relative;
 	box-sizing: border-box;
 	--strip: calc( var(--room-icon-size) / 25 );
-	--padding-size: calc( var(--room-icon-size) - 1 * var(--strip) );
-	top: calc(var(--room-icon-size) * 0.5 - 0.6rem);
 	width: var(--room-icon-size);
 	height: var(--room-icon-size);
 	margin-right: calc( var(--room-icon-size) * 0.3 );
-	/* box-shadow: var(--primary-color) 0 0 calc( var(--room-icon-size) / 10 ); */
 	border: var(--primary-color) var(--strip) solid;
-	padding: var(--strip);
 	border-radius: 100%;
+	flex-shrink: 0;
 }
 
-#details-modal-copy-room-details-link {
+#details-modal-share-icon {
-	position: relative;
 	margin-left: 0.5em;
-	top: calc( var(--feather-icon-size) * 0.5 - 1ex );
+	height: calc( var(--room-icon-size) );
 }
 
 #details-modal-community-icon-wrapper:is([data-has-icon="false"], [data-icon-safety="-1"]) {
@@ -689,12 +727,10 @@ footer, aside {
 	display: none;
 }
 
-/*
 #details-modal-community-icon-wrapper:not(:hover) > #details-modal-community-icon[data-icon-safety="-1"] {
 	opacity: 0.5;
 	filter: blur(3px);
 }
-*/
 
 #details-modal-community-icon {
 	position: absolute;
@@ -706,17 +742,19 @@ footer, aside {
 	transition: filter 0.15s, opacity 0.15s;
 }
 
-/*#details-modal-start*/ #details-modal-description-inner:empty::after {
-	content: "No description";
-	font-style: italic;
-}
-
 /*#details-modal-start*/ #details-modal-language-flag:empty::after {
 	content: "Unknown";
 	font-style: italic;
 }
 
 /*#details-modal-end*/ #details-modal-qr-code {
+	/* alt text */
+	display: flex;
+	align-items: center;
+	text-align: center;
+	justify-content: center;
+	color: var(--primary-color-50);
+
 	aspect-ratio: 1;
 	width: 15em;
 	height: 15em;
@@ -734,6 +772,9 @@ footer, aside {
 	flex-wrap: wrap;
 	gap: .5em;
 	row-gap: .5em;
+	flex-grow: 1000;
+	align-content: flex-end;
+	margin-top: 1em;
 }
 
 #details-modal-qr-code-label-name {
@@ -769,14 +810,16 @@ aside > details[open] > summary:after{
 	color: #fff; /* White text color */
 	text-align: center; /* Centered text */
 	border-radius: 2px; /* Rounded corners */
-	padding: 16px;
+	padding: 16px 24px;
 	position: fixed; /* Move along as viewport scrolls */
-	z-index: 1; /* Add a z-index if needed */
+	z-index: 100; /* Add a z-index if needed */
 	left: 50%; /* Offset the snackbar by half the viewport width */
 	transform: translateX(-50%); /* Push the snackbar back by half its width */
 	bottom: 0;
 	opacity: 0;
 	transition: bottom 0.5s, opacity 0.5s;
+	box-shadow: black 0.5em 0.5em 0.5em;
+  	border-radius: 1em;
 }
 
 /* Show the snackbar when clicking on a button (class added with JavaScript) */
@@ -835,7 +878,7 @@ aside > details[open] > summary:after{
 	}
 }
 
-@media (max-height: 1100px) {
+@media (max-height: 1200px) {
 	#details-modal-language, #details-modal-users, #details-modal-created {
 		display: inline-block;
 		text-align: center;
@@ -851,7 +894,8 @@ aside > details[open] > summary:after{
 	}
 }
 
-@media (max-width: 1000px) {
+/* mobile breakpoint */
+@media (max-width: 1100px) {
 	#details-modal-pane-selection {
 		display: inline-flex;
 		flex-direction: row;
@@ -864,14 +908,17 @@ aside > details[open] > summary:after{
 		display: none;
 	}
 
-	#details-modal-panes[data-pane="0"] ~ #details-modal-actions .details-modal-pane-button[data-pane="0"],
+	#details-modal-panes[data-pane="0"] ~ #details-modal-pane-selection .details-modal-pane-button[data-pane="0"],
-	#details-modal-panes[data-pane="1"] ~ #details-modal-actions .details-modal-pane-button[data-pane="1"] {
+	#details-modal-panes[data-pane="1"] ~ #details-modal-pane-selection .details-modal-pane-button[data-pane="1"] {
 		display:none
 	}
 
 	#details-modal-panes {
 		flex-direction: column;
 		align-items: stretch;
+	}
+
+	.details-modal-pane {
 		flex-grow: 500;
 	}
 
@@ -887,6 +934,10 @@ aside > details[open] > summary:after{
 	#details-modal-qr-code-label-name {
 		display: inline;
 	}
+
+	#details-modal-navigation-hint {
+		display: none;
+	}
 }
 
 @media (max-width: 500px) {

output/js/util.js

@@ -189,11 +189,13 @@ export const dom = {
 	tags: () => document.querySelectorAll("#tbl_communities .tag"),
 }
 
-export const JOIN_URL_PASTE = "Copied URL to clipboard. Paste into Session app to join";
+export const JOIN_URL_PASTE = "Copied URL to clipboard. Paste into Session app to join.";
 
-export const STAFF_ID_PASTE = "Copied staff ping to clipboard. Use it in the selected Community to alert a random moderator.";
+export const STAFF_ID_PASTE = "Copied staff ping to clipboard.";
 
-export const IDENTIFIER_PASTE = "Copied internal room identifier. Use it to identify a room, such as when contributing language labels."
+export const IDENTIFIER_PASTE = "Copied internal room identifier."
+
+export const PUBKEY_PASTE = "Copied server public key to clipboard.";
 
 export const DETAILS_LINK_PASTE = "Copied link to Community details.";
 

output/main.js

@@ -17,7 +17,8 @@
 import {
 	dom, COMPARISON, ATTRIBUTES,
 	columnAscendingByDefault, columnIsSortable, COLUMN_TRANSFORMATION,
-	element, JOIN_URL_PASTE, communityQRCodeURL, STAFF_ID_PASTE, IDENTIFIER_PASTE, DETAILS_LINK_PASTE, CLASSES, flagToLanguageAscii, RoomInfo, unreachable, workOnMainThread, onInteractive
+	element, JOIN_URL_PASTE, communityQRCodeURL, STAFF_ID_PASTE, IDENTIFIER_PASTE, DETAILS_LINK_PASTE, CLASSES, flagToLanguageAscii, RoomInfo, unreachable, onInteractive,
+	PUBKEY_PASTE
 } from './js/util.js';
 
 // Hidden communities for transparency.
@@ -270,6 +271,8 @@ function displayQRModal(communityID, pane = 0) {
 
 	const qrCode = dom.details_modal_qr_code();
 	if (qrCode instanceof HTMLImageElement) {
+		// Prevent old content flashing
+		qrCode.src = "";
 		qrCode.src = communityQRCodeURL(communityID);
 	} else console.error(`Could not find QR code <img>`);
 
@@ -382,11 +385,19 @@ function addQRModalHandlers() {
 		}
 	)
 
-	document.querySelector('#details-modal-copy-room-details-link')?.addEventListener(
+	document.querySelectorAll('#details-modal-share-icon, #details-modal-share-button').forEach(btn => btn?.addEventListener(
 		'click',
 		function() {
 			shareOrCopyToClipboard(location.href, DETAILS_LINK_PASTE);
 		}
+	));
+
+	document.querySelector('#details-modal-copy-pubkey')?.addEventListener(
+		'click',
+		function () {
+			const identifier = this.getAttribute(ATTRIBUTES.ROW.PUBLIC_KEY);
+			copyToClipboard(identifier, PUBKEY_PASTE);
+		}
 	)
 
 	for (const anchor of dom.qr_code_buttons()) {

sites/+components/qr-modals.php

@@ -32,11 +32,12 @@
 							id="details-modal-community-name"
 							class="h2-like"
 							data-hydrate-with="name;preview_link:href"
-							title="Open preview in new tab"
+							title="Preview Community in browser"
 							href="#"
+							target="_blank"
 						></a>
 						<img
-							id="details-modal-copy-room-details-link"
+							id="details-modal-share-icon"
 							class="feather-icon clickable enter-clicks"
 							src="/assets/icons/share-2.svg"
 							alt="Share"
@@ -74,6 +75,49 @@
 							></a>
 						</p>
 					</div>
+					<gap></gap>
+					<div id="details-modal-actions">
+						<button
+							id="details-modal-copy-button"
+							class="themed-button themed-button-primary"
+							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 ping for a random staff member"
+						>
+							Copy mod ping
+						</button>
+						<button
+							id="details-modal-copy-room-id"
+							class="themed-button"
+							data-hydrate-with="identifier:data-id"
+							title="Copy this room's identifier for sessioncommunities.online"
+						>
+							Copy room ID
+						</button>
+						<button
+							id="details-modal-copy-pubkey"
+							class="themed-button"
+							data-hydrate-with="public_key:data-pubkey"
+							title="Copy this server's public key"
+						>
+							Copy pubkey
+						</button>
+						<button
+							id="details-modal-share-button"
+							class="themed-button themed-button"
+							alt="Share"
+							title="Share this Community"
+						>
+							Share
+						</button>
+					</div>
 				</div>
 				<gap></gap>
 				<div id="details-modal-end" class="details-modal-pane" data-pane="1">
@@ -83,7 +127,7 @@
 						title="Community join link encoded as QR code"
 						width="512"
 						height="512"
-						alt="Community join link encoded as QR code"
+						alt="QR code not available"
 					>
 					<div id="details-modal-qr-code-label">
 						Scan QR code in Session to join
@@ -93,44 +137,17 @@
 					</div>
 				</div>
 			</div>
-			<div id="details-modal-actions">
+			<div id="details-modal-pane-selection" class="hidden">
 				<button
-					id="details-modal-copy-button"
+					class="details-modal-pane-button
-					class="themed-button"
+					themed-button"
-					data-hydrate-with="join_link:data-href"
+					data-pane="0"
-					title="Click here to copy this Community's join link"
+				>← Description</button>
-				>
-					Copy join link
-				</button>
 				<button
-					id="details-modal-copy-staff-id"
+					class="details-modal-pane-button
-					class="themed-button"
+					themed-button"
-					data-hydrate-with="staff:data-staff"
+					data-pane="1"
-					title="Copy the mention for a random staff member"
+				>QR Code →</button>
-				>
-					Copy mod ping
-				</button>
-				<button
-				id="details-modal-copy-room-id"
-				class="themed-button"
-				data-hydrate-with="identifier:data-id"
-				title="Copy this room's identifier to uniquely identify this room to the sessioncommunities.online team"
-				>
-				Copy ID
-				</button>
-				<gap></gap>
-				<div id="details-modal-pane-selection" class="hidden">
-					<button
-						class="details-modal-pane-button
-						themed-button"
-						data-pane="0"
-					>Show description</button>
-					<button
-						class="details-modal-pane-button
-						themed-button"
-						data-pane="1"
-					>Show QR Code</button>
-				</div>
 			</div>
 		</div>
 	</div>

sites/+templates/index.php

@@ -143,6 +143,7 @@
 			<?php include "+components/footer.php"; ?>
 
 			<div id="copy-snackbar"></div>
+			<div id="modal-backdrop"></div>
 		</div>
 	</body>
 </html>