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

feat: ui improvements

Browse Source
dev
gravel 9 months ago
parent 31a68403aa
commit 4c9251e976
No known key found for this signature in database
GPG Key ID: CA95FFF4E0123903
5 changed files with 152 additions and 70 deletions
Show Stats Download Patch File Download Diff File

103
output/index.css
Unescape Escape View File

@ -118,8 +118,21 @@ html.js .noscript, .hidden {
.themed-button {
color: var(--primary-color);
background-color: var(--secondary-color);
border-radius: 10%;
padding: var(--cell-padding-small);
border-radius: .5em;
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 {
position: relative;
#details-modal-share-icon {
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="1"] ~ #details-modal-actions .details-modal-pane-button[data-pane="1"] {
#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-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) {

8
output/js/util.js
Unescape Escape View File

@ -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.";

15
output/main.js
Unescape Escape View File

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

95
sites/+components/qr-modals.php
Unescape Escape View File

@ -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="themed-button"
data-hydrate-with="join_link:data-href"
title="Click here to copy this Community's join link"
>
Copy join link
</button>
class="details-modal-pane-button
themed-button"
data-pane="0"
>← Description</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-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>
class="details-modal-pane-button
themed-button"
data-pane="1"
>QR Code →</button>
</div>
</div>
</div>

1
sites/+templates/index.php
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save