gravel
/
sessioncommunities.online
mirror of https://codeberg.org/gravel/sessioncommunities.online
1
0
Fork 0
Code Issues 2 Packages Projects Releases Wiki Activity

Introduce tabbed modal layout

Browse Source
dev
gravel 1 year ago
parent e287070f8c
commit b05e822c4b
Signed by: gravel
GPG Key ID: C0538F3C906B308F
3 changed files with 180 additions and 118 deletions
Show Stats Download Patch File Download Diff File

93
output/index.css
Unescape Escape View File

@ -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. */

12
output/main.js
Unescape Escape View File

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

193
sites/+components/qr_modals.php
Unescape Escape View File

@ -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>

Write Preview
Loading…
Cancel
Save