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

Shrink HTML size II

Browse Source
dev
gravel 5 months ago
parent b76d106e75
commit 26d3afeafd
Signed by: gravel
GPG Key ID: C0538F3C906B308F
5 changed files with 72 additions and 55 deletions
Show Stats Download Patch File Download Diff File

55
output/index.css
Unescape Escape View File

@ -39,6 +39,11 @@
--dynamic-columns-width: var(--expanded-dynamic-columns-width);
}
html:not(.js) {
/** No more Join URL preview without JS */
--dynamic-columns-width: var(--collapsed-dynamic-columns-width);
}
:root {
--cell-padding-h: 0.5em;
--cell-padding-v: 0.5em;
@ -128,7 +133,7 @@ html.js .noscript, .hidden {
color: black;
}
.tag-view-main {
.td_name > span > .tag {
opacity: 0.75;
}
@ -152,7 +157,7 @@ html.js .noscript, .hidden {
background-color: whitesmoke;
}
.tag-view-main:not(.tag-highlighted) {
.td_name > span > .tag:not(.tag-highlighted) {
background-color: transparent;
color: var(--primary-color);
}
@ -259,7 +264,7 @@ header {
white-space: nowrap;
}
.tbl_communities__th, .tbl_cell {
.tbl_communities__th, #tbl_communities > tbody > tr > td {
padding: var(--cell-padding-v) var(--cell-padding-h);
}
@ -333,12 +338,12 @@ header {
text-overflow: ellipsis;
}
.td_name-inner {
.td_name > a {
/* Block padding for inline element does not change flow, only clickbox */
padding-block: calc( var(--cell-padding-v) );
}
.room-row-stickied > .td_name > .td_name-inner {
.room-row-stickied > .td_name > a {
font-weight: bold;
}
@ -394,7 +399,7 @@ html.js .td_description {
text-align: center;
}
.protocol-indicator {
.td_preview > a > span {
display: inline-block;
font-family: monospace;
border-radius: 4px;
@ -404,19 +409,21 @@ html.js .td_description {
text-shadow: 0 0 0.5em #0003;
}
a.protocol-indicator__parent[href^="http:"] > .protocol-indicator {
/** protocol-indicator__parent > .protocol-indicator **/
.td_preview > a[href^="http:"] > span {
background-color: var(--color-http);
}
a.protocol-indicator__parent[href^="https:"] > .protocol-indicator {
.td_preview > a[href^="https:"] > span {
background-color: var(--color-https);
}
a.protocol-indicator__parent[href^="http:"] > .protocol-indicator::after {
.td_preview > a[href^="http:"] > span::after {
content: "HTTP";
}
a.protocol-indicator__parent[href^="https:"] > .protocol-indicator::after {
.td_preview > a[href^="https:"] > span::after {
content: "HTTPS";
}
@ -424,7 +431,7 @@ a.protocol-indicator__parent[href^="https:"] > .protocol-indicator::after {
padding: var(--cell-padding-small) !important;
}
.qr-code-icon {
/*.qr-code-icon*/ .td_qr_code > a > div {
width: 36px;
height: 41px;
background-image: url('qrcode-solid.svg')
@ -462,7 +469,7 @@ a.protocol-indicator__parent[href^="https:"] > .protocol-indicator::after {
font-size: .8em;
}
.join_url {
/*.join_url*/ .td_join_url > div > span {
overflow: hidden;
text-overflow: ellipsis;
max-width: 20vw;
@ -471,7 +478,15 @@ a.protocol-indicator__parent[href^="https:"] > .protocol-indicator::after {
margin-right: 1em;
}
.join_url_container {
.td_join_url > div > span:empty {
margin-right: 0;
}
html.js .td_join_url > div > span:empty::after {
content: "https://sogs.example.com/room?pu";
}
/*.join_url_container*/ .td_join_url > div {
display: flex;
flex-direction: row;
align-items: center;
@ -707,42 +722,42 @@ aside > details[open] > summary:after{
}
/* Responsive properties */
.tag-view-main:nth-of-type(5) ~ .tag {
.td_name > span > .tag:nth-of-type(5) ~ .tag {
display: none;
}
@media (max-width: 1600px) {
.tag-view-main:nth-of-type(4) ~ .tag {
.td_name > span > .tag:nth-of-type(4) ~ .tag {
display: none;
}
}
@media (max-width: 1500px) {
.tag-view-main:nth-of-type(3) ~ .tag {
.td_name > span > .tag:nth-of-type(3) ~ .tag {
display: none;
}
}
@media (max-width: 1400px) {
.tag-view-main:nth-of-type(2) ~ .tag {
.td_name > span > .tag:nth-of-type(2) ~ .tag {
display: none;
}
}
@media (max-width: 1200px) {
.tag-view-main:nth-of-type(1) ~ .tag {
.td_name > span > .tag:nth-of-type(1) ~ .tag {
display: none;
}
}
.tag-view-main:not(.tag-showcased) {
.td_name > span > .tag:not(.tag-showcased) {
display: none;
}
@media (max-width: 1050px) {
/* Only current width breakpoint; */
/* Would follow w4 and precede w6. */
.show-from-w5 {
/*.show-from-w5*/ .td_join_url > div > span {
display: none;
}

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

@ -171,7 +171,7 @@ export const dom = {
details_modal_room_icon: () => document.getElementById('details-modal-community-icon'),
servers_hidden: () => document.getElementById("servers_hidden"),
snackbar: () => document.getElementById("copy-snackbar"),
qr_code_buttons: () => document.querySelectorAll('.qr-code-button'),
qr_code_buttons: () => document.querySelectorAll('.td_qr_code > a'),
/** @return {HTMLInputElement | null} */
btn_toggle_search: () => document.querySelector('#btn-toggle-search'),
/** @return {HTMLInputElement | null} */

17
output/main.js
Unescape Escape View File

@ -158,7 +158,7 @@ async function onLoad() {
}
hideBadCommunities();
initializeSearch();
createJoinLinkButtons();
createJoinLinkUI();
markSortableColumns();
addQRModalHandlers();
preloadImages();
@ -186,12 +186,11 @@ async function onLoad() {
* @param {string} param0.text Tag name
* @param {"user"|"reserved"} param0.type Tag classification
* @param {string} param0.description Tag details
* @param {boolean} [inMainView] Whether to apply styles for tags in outside view.
* @returns HTMLElement
*/
const tagBody = ({text, type, description = ""}, inMainView = false) => element.span({
const tagBody = ({text, type, description = ""}) => element.span({
textContent: text.slice(0, 16),
className: `tag tag-view-${inMainView ? 'main' : 'secondary'} tag-${type} badge`,
className: `tag tag-${type} badge`,
title: description || `Tag: ${text}`
});
@ -408,12 +407,16 @@ function preloadImages() {
}
/**
* Places join link buttons in the Community rows.
* Places join link buttons and preview in the Community rows.
*/
function createJoinLinkButtons() {
function createJoinLinkUI() {
communityFullRowCache.forEach(({row, identifier}) => {
// Data attributes are more idiomatic and harder to change by accident in the DOM.
const container = row.querySelector('.join_url_container') ?? unreachable();
const container = row.querySelector('.td_join_url > div') ?? unreachable("Join URL cell empty");
const joinURLPreview = container.querySelector('span') ?? unreachable("Join URL preview missing");
// Do not wait on RoomInfo for layout rendering
joinURLPreview.textContent =
container.querySelector('a')?.getAttribute('href')?.slice(0, 29) + "...";
container.append(
transformJoinURL()
); // add interactive content

3
php/servers/servers-rooms.php
Unescape Escape View File

@ -705,6 +705,9 @@
return [...$this->get_derived_tags(), ...$this->get_user_tags()];
}
/**
* @return CommunityTag[] Array of tags.
*/
function get_showcased_room_tags(): array {
$tags = array_values(array_filter(
$this->get_room_tags(),

50
sites/+components/tbl-communities.php
Unescape Escape View File

@ -66,7 +66,8 @@
$id = html_sanitize($room->get_room_identifier());
$language = html_sanitize($room->get_language_flag());
$name = html_sanitize($room->name);
$name_trunc = truncate($name, 16);
// $name_trunc = truncate($name, 16);
$name_trunc = "Community";
$desc = html_sanitize($room->description);
$users = html_sanitize($room->active_users);
$users_cutoff = html_sanitize($room->format_user_cutoff_period());
@ -96,13 +97,12 @@
data-id="<?=$id?>"
data-icon='<?=room_icon($room, '64x64')?>:<?=$room->icon_safety()?>'
>
<td class="td_language tbl_cell" title="Language flag for '<?=$name_trunc?>'"><?=$language?></td>
<td class="td_name tbl_cell">
<td class="td_language" title="Language flag for '<?=$name_trunc?>'"><?=$language?></td>
<td class="td_name">
<a
href="<?=$preview_link?>"
class="td_name-inner"
target="_blank"
title="Click here to preview '<?=$name_trunc?>'"
title="Click here to preview <?=$name_trunc?>"
rel="noopener noreferrer external nofollow"
itemprop="name"
><?=
@ -111,7 +111,7 @@
<span><?php /* class="tags-container" */ ?>
<?php foreach ($room->get_showcased_room_tags() as $tag): ?>
<span
class="tag tag-view-main <?=$tag->get_tag_classname()?> badge"
class="tag <?=$tag->get_tag_classname()?> badge"
title="<?=$tag->get_description_sanitized()?>"
><?=
truncate($tag->get_text_sanitized(), 16)
@ -119,39 +119,36 @@
<?php endforeach; ?>
</span>
</td>
<!--noindex--><td
class="td_description tbl_cell noindex robots-noindex robots-nocontent"
title="Description for '<?=$name_trunc?>'"
<td
class="td_description"
title="Description"
itemprop="description"
><?=$desc?></td><!--/noindex-->
><?=$desc?></td>
<td
class="td_users tbl_cell"
title="'<?=$name_trunc?>' has had <?=$users?> active users in the last <?=$users_cutoff?>."
class="td_users"
title="<?=$users?> active users in the last <?=$users_cutoff?>."
><?=$users?></td>
<td class="td_preview tbl_cell">
<td class="td_preview">
<a
href="<?=$preview_link?>"
class="protocol-indicator__parent"
title="Click here to preview '<?=$name_trunc?>'"
title="Preview <?=$name_trunc?>"
target="_blank"
rel="noopener noreferrer external nofollow"
>
<span class="protocol-indicator"></span>
<span></span>
</a>
</td>
<td class="td_qr_code tbl_cell">
<td class="td_qr_code">
<a
class="qr-code-button"
href="<?=room_qr_code($room)?>"
target="_blank"
>
<div
class="qr-code-icon"
title="Click here to view details for '<?=$name_trunc?>'"
title="Click here to view details for <?=$name_trunc?>"
></div>
</a>
</td>
<td class="td_server_icon tbl_cell"
<td class="td_server_icon"
title="Host: <?=$hostname?>"
>
<?php if (empty($server_icon)): ?>
@ -162,16 +159,15 @@
<div class="td_server_icon-circle" style="background-image: url('<?=$server_icon?>')"></div>
<?php endif; ?>
</td>
<td class="td_join_url tbl_cell">
<div class="join_url_container">
<span class="join_url show-from-w5"
><?=truncate($join_link, 32)?></span>
<td class="td_join_url">
<div>
<span></span><?php /* Join URL preview */ ?>
<a
class="noscript"
href="<?=$join_link?>"
title="Right click and copy this link to join '<?=$name_trunc?>'."
title="Right click -> Copy link"
rel="external nofollow"
>Copy this<span class="hidden">link to join '<?=$name_trunc?>'.</span></a>
>Copy this</a>
</div>
</td>
</tr>

Write Preview
Loading…
Cancel
Save