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 { #details-modal {
padding: 0; padding: 0;
width: 80vw; width: 80vw;
max-height: 80vh; --modal-height: calc(80vh - 4em);
height: var(var(--modal-height));
color: var(--primary-color); color: var(--primary-color);
background-color: var(--secondary-color); background-color: var(--secondary-color);
--icon-size: 4rem; --icon-size: 4rem;
} }
#details-modal-contents { #details-modal-contents {
display: flex;
flex-direction: column;
box-sizing: border-box;
}
#details-modal-flow {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 3em; padding: 3em;
height: var(--modal-height);
overflow: auto;
box-sizing: border-box; box-sizing: border-box;
justify-content: space-between;
gap: 1em;
} }
#details-modal-close { #details-modal-close {
@ -449,11 +460,16 @@ footer nav a {
font-style: italic; font-style: italic;
} }
#details-modal-pane { #details-modal-panes {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
#details-modal-panes, .details-modal-pane {
/* Jank overlap with actions when overflows */
/* height: 100%; */
}
#details-modal-start { #details-modal-start {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -518,11 +534,6 @@ footer nav a {
filter: blur(3px); filter: blur(3px);
} }
#details-modal-start #details-modal-description {
max-height: 50vh;
overflow: auto;
}
#details-modal-start #details-modal-description-inner:empty::after { #details-modal-start #details-modal-description-inner:empty::after {
content: "No description"; content: "No description";
font-style: italic; font-style: italic;
@ -535,8 +546,8 @@ footer nav a {
#details-modal-end #details-modal-qr-code { #details-modal-end #details-modal-qr-code {
aspect-ratio: 1; aspect-ratio: 1;
width: 20em; width: 15em;
height: 20em; height: 15em;
margin: 1em; margin: 1em;
} }
@ -544,6 +555,15 @@ footer nav a {
text-align: center; 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 { #details-modal .themed-button {
color: var(--primary-color); color: var(--primary-color);
background-color: var(--secondary-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 { #details-modal-language, #details-modal-users, #details-modal-created {
display: inline-block; display: inline-block;
text-align: center; 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) { @media (max-width: 500px) {
:root { :root {
/* ! For when descriptions don't wrap and 100vw doesn't work. */ /* ! 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); dom.details_modal_qr_code().src = communityQRCodeURL(communityID);
document.getElementById('details-modal-panes').setAttribute('data-pane', 0);
modal.showModal(); 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( document.querySelector('#details-modal-copy-button').addEventListener(
'click', 'click',
function () { function () {

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

@ -1,7 +1,6 @@
<?php <?php
require_once "$PROJECT_ROOT/php/utils/room-invites.php"; require_once "$PROJECT_ROOT/php/utils/room-invites.php";
?> ?>
<dialog id="details-modal"> <dialog id="details-modal">
<div id="details-modal-contents"> <div id="details-modal-contents">
<div id="details-modal-close"> <div id="details-modal-close">
@ -9,103 +8,115 @@
</div> </div>
<div id="details-modal-close-hint"> <div id="details-modal-close-hint">
(Esc to close.) (Esc to close.)
</div> </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-title"> <div id="details-modal-start" class="details-modal-pane" data-pane="0">
<div <div id="details-modal-title">
id="details-modal-community-icon-wrapper" <div
class="clickable" id="details-modal-community-icon-wrapper"
data-hydrate-with="has_icon:data-has-icon;icon_safety:data-icon-safety" class="clickable"
title="Community icon" data-hydrate-with="has_icon:data-has-icon;icon_safety:data-icon-safety"
><img title="Community icon"
id="details-modal-community-icon" ><img
width="64" id="details-modal-community-icon"
height="64" width="64"
data-hydrate-with="icon:src;icon_safety:data-icon-safety" height="64"
/></div><h1><a data-hydrate-with="icon:src;icon_safety:data-icon-safety"
id="details-modal-community-name" /></div><h1><a
data-hydrate-with="name;preview_link:href" id="details-modal-community-name"
title="Open preview in new tab" data-hydrate-with="name;preview_link:href"
href="#" title="Open preview in new tab"
></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"
href="#" 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> </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>
</div> </div>
<gap></gap> <div id="details-modal-actions">
<div id="details-modal-end"> <button
<img id="details-modal-copy-button"
src="" class="themed-button"
id="details-modal-qr-code" data-hydrate-with="join_link:data-href"
title="Community join link encoded as QR code" title="Click here to copy this Community's join link"
width="512" >
height="512" 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"> Copy mod ping
Scan QR code in Session to join </button>
<span <button
id="details-modal-qr-code-label-name" id="details-modal-copy-room-id"
>'<span data-hydrate-with="name"></span>'</span> 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> </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> </div>
</dialog> </dialog>

Write Preview
Loading…
Cancel
Save