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

Add tags to modal, fix layout

Browse Source
dev
gravel 1 year ago
parent a16e6dc887
commit 6c9afe90b8
Signed by: gravel
GPG Key ID: C0538F3C906B308F
7 changed files with 172 additions and 74 deletions
Show Stats Download Patch File Download Diff File

60
output/index.css
Unescape Escape View File

@ -113,7 +113,7 @@ html:not(.js) .js-only {
/* box-shadow: 0.05em 0.05em 0.1em 0 #4444;*/
}
#tbl_communities .room-label {
#tbl_communities .room-label, #details-modal .room-label {
color: black;
}
@ -424,9 +424,9 @@ label[for=toggle-show-room-ids]::after {
#details-modal-contents {
display: flex;
position: relative;
flex-direction: row;
flex-direction: column;
padding: 3em;
box-sizing: border-box;
}
#details-modal-close {
@ -440,6 +440,11 @@ label[for=toggle-show-room-ids]::after {
text-align: center;
}
#details-modal-pane {
display: flex;
flex-direction: row;
}
#details-modal-start {
display: flex;
flex-direction: column;
@ -463,10 +468,16 @@ label[for=toggle-show-room-ids]::after {
font-style: italic;
}
#details-modal-start #details-modal-language-flag:empty::after {
content: "Unknown";
font-style: italic;
}
#details-modal-end #details-modal-qr-code {
aspect-ratio: 1;
width: 20em;
height: 20em;
margin-bottom: 1em;
margin: 1em;
}
#details-modal-end #details-modal-qr-code-label {
@ -480,6 +491,10 @@ label[for=toggle-show-room-ids]::after {
padding: var(--cell-padding-small);
}
#details-modal-qr-code-label-name {
display: block;
}
/* <Snackbar> */
/* The snackbar - position it at the bottom and in the middle of the screen */
#copy-snackbar {
@ -554,15 +569,44 @@ label[for=toggle-show-room-ids]::after {
}
}
@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;
}
#details-modal-language, #details-modal-users {
display: inline-block;
text-align: center;
}
#details-modal-room-info > * {
margin-block: 0.5em;
}
#details-modal-language::after {
content: "•";
margin-inline: 1em;
}
}
@media (max-width: 500px) {
:root {
/* ! For when descriptions don't wrap and 100vw doesn't work. */
--dynamic-columns-width: 15rem;
}
#details-modal-contents {
flex-direction: column;
}
}
/* Animations to fade the snackbar in and out */

5
output/js/constants.js
Unescape Escape View File

@ -19,13 +19,15 @@ export const dom = {
join_link: row.querySelector('.td_join_url a[href]').getAttribute('href'),
hostname: row.getAttribute(ATTRIBUTES.ROW.HOSTNAME),
public_key: row.getAttribute(ATTRIBUTES.ROW.PUBLIC_KEY),
staff: row.getAttribute(ATTRIBUTES.ROW.STAFF_DATA)
staff: row.getAttribute(ATTRIBUTES.ROW.STAFF_DATA),
tags: row.getAttribute(ATTRIBUTES.ROW.TAGS)
};
},
meta_timestamp: () => document.querySelector('meta[name=timestamp]'),
last_checked: () => document.getElementById("last_checked_value"),
/** @return {HTMLDialogElement | null} */
details_modal: () => document.getElementById('details-modal'),
details_modal_tag_container: () => document.getElementById('details-modal-room-tags'),
details_modal_qr_code: () => document.getElementById('details-modal-qr-code'),
join_urls: () => document.getElementsByClassName("join_url_container"),
servers_hidden: () => document.getElementById("servers_hidden"),
@ -56,6 +58,7 @@ export const COMPARISON = {
export const ATTRIBUTES = {
ROW: {
TAGS: 'data-tags',
IDENTIFIER: 'data-identifier',
PUBLIC_KEY: 'data-pubkey',
HOSTNAME: 'data-hostname',

30
output/main.js
Unescape Escape View File

@ -75,6 +75,13 @@ function onLoad() {
preloadQRCodes();
}
const tagBody = ({text, type, description}) => element.span({
// todo: truncate
textContent: text,
className: `room-label room-label-${type} badge`,
title: description
});
function displayQRModal(communityID) {
const modal = dom.details_modal();
@ -109,6 +116,14 @@ function displayQRModal(communityID) {
}
}
const tagContainer = dom.details_modal_tag_container();
tagContainer.innerHTML = "";
tagContainer.append(
...JSON.parse(rowInfo.tags).map(tag => tagBody(tag))
);
dom.details_modal_qr_code().src = communityQRCodeURL(communityID);
modal.showModal();
@ -123,10 +138,19 @@ function addQRModalHandlers() {
if (!rows) throw new Error("Rows not found");
for (const row of rows) {
const communityID = row.getAttribute(ATTRIBUTES.ROW.IDENTIFIER);
row.querySelector('.td_qr_code').addEventListener(
for (const cell of ['.td_qr_code', '.td_description', '.td_language', '.td_users']) {
row.querySelector(cell).addEventListener(
'click',
() => displayQRModal(communityID)
);
}
row.addEventListener(
'click',
() => displayQRModal(communityID)
);
(e) => {
if (e.target != row) { return; }
displayQRModal(communityID);
}
)
row.querySelector('.td_name').addEventListener(
'click',
(e) => {

1
php/utils/servers-rooms.php
Unescape Escape View File

@ -110,6 +110,7 @@
function jsonSerialize(): array {
$details = get_object_vars($this);
unset($details['server']);
$details['tags'] = CommunityTag::cacheable_room_tags($details['tags']);
return $details;
}

23
php/utils/tags.php
Unescape Escape View File

@ -34,10 +34,25 @@
}
public function jsonSerialize(): mixed {
if ($this->type != TagType::USER_TAG) {
throw new LogicException("Should not serialize derived tags.");
}
return $this->text;
// Only used for passing to DOM
$details = get_object_vars($this);
$details['text'] = html_sanitize($details['text']);
$details['description'] = html_sanitize($details['description']);
$details['type'] = $this->get_tag_type();
return $details;
}
/**
* @param \CommunityTag[] $tags
* @return string[]
*/
public static function cacheable_room_tags(array $tags) {
return array_map(
'CommunityTag::__toString',
array_filter($tags, function(\CommunityTag $tag) {
return $tag->type == TagType::USER_TAG;
})
);
}
private static function preprocess_tag(?string $tag) {

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

@ -5,70 +5,79 @@
<dialog id="details-modal">
<div id="details-modal-contents">
<div id="details-modal-close">
&times;
</div>
<div id="details-modal-start">
<h1 id="details-modal-title">
<a
id="details-modal-community-name"
data-hydrate-with="name;preview_link:href"
title="Open preview in new tab"
></a>
</h1>
<p id="details-modal-description">
<span>Description:</span>
<span id="details-modal-description-inner" data-hydrate-with="description"></span>
</p>
<gap></gap>
<div id="details-modal-room-info">
<p>
Language: <span data-hydrate-with="language_flag"></span>
</p>
<p>
Users: <span data-hydrate-with="users"></span>
</p>
<p>
Server:
&times;
</div>
<div id="details-modal-pane">
<div id="details-modal-start">
<h1 id="details-modal-title">
<a
title="Open server in new tab"
data-hydrate-with="hostname;hostname:href"
target="_blank"
rel="noopener noreferrer"
id="details-modal-community-name"
data-hydrate-with="name;preview_link:href"
title="Open preview in new tab"
></a>
</h1>
<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>
<button
id="details-modal-copy-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"
data-hydrate-with="staff:data-staff"
title="Copy the mention for a random staff member"
>
Copy mod ID
</button>
</p>
</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-host">
Server:
<a
title="Open server in new tab"
data-hydrate-with="hostname;hostname:href"
target="_blank"
rel="noopener noreferrer"
></a>
</p>
</div>
</div>
<gap></gap>
<div id="details-modal-end">
<img
src=""
id="details-modal-qr-code"
title="Community join link encoded as QR code"
>
<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"
<p>
<button
id="details-modal-copy-button"
data-hydrate-with="join_link:data-href"
title="Click here to copy this Community's join link"
>
<div id="details-modal-qr-code-label">
Scan QR code in Session to join
<br>
'<span data-hydrate-with="name"></span>'
</div>
</div>
Copy join link
</button>
<button
id="details-modal-copy-staff-id"
data-hydrate-with="staff:data-staff"
title="Copy the mention for a random staff member"
>
Copy mod ID
</button>
</p>
</div>
</dialog>

6
sites/+components/tbl_communities.php
Unescape Escape View File

@ -66,6 +66,7 @@
$hostname = html_sanitize($hostname);
$staff_json = json_encode(array_map('html_sanitize', $room->get_staff()));
$tags_json = json_encode($room->get_room_tags());
?>
<tr id="<?=$id?>" class="room-row" itemscope itemtype="https://schema.org/EntryPoint"
@ -73,6 +74,7 @@
data-pubkey="<?=$pubkey?>"
data-hostname="<?=$hostname?>"
data-staff='<?=$staff_json?>'
data-tags='<?=$tags_json?>'
>
<td class="td_identifier" itemprop="identifier"><?=$id?></td>
<td class="td_language" title="Language flag for '<?=$name?>'"><?=$language?></td>
@ -90,14 +92,14 @@
$name
?></a>
<span class="room-labels-container">
<?php foreach ($room->get_room_tags() as $tag): ?>
<?php foreach ($room->get_room_tags() as $tag): if (CommunityTag::is_showcased_tag($tag->text)): ?>
<span
class="room-label <?=$tag->get_tag_classname()?> badge"
title="<?=$tag->description?>"
><?=
truncate($tag->text, 16)
?></span>
<?php endforeach; ?>
<?php endif; endforeach; ?>
</span>
</td>
<td

Write Preview
Loading…
Cancel
Save