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

Pad & clamp cells, minor UI/UX

Browse Source
dev
gravel 1 year ago
parent 4a3bed6942
commit 86067e08c4
Signed by: gravel
GPG Key ID: C0538F3C906B308F
2 changed files with 129 additions and 50 deletions
Show Stats Download Patch File Download Diff File

157
output/styles2.css
Unescape Escape View File

@ -1,3 +1,11 @@
:root {
/*--session-classic-dark-green: #31f196;*/
/*--session-classic-dark-gray-one: #414141;*/
/*--session-classic-dark-gray-two: #2d2d2d;*/
/*--session-classic-dark-gray-three: #1b1b1b;*/
--alternate-row-color: #e8e8e8;
}
html {
font-size: clamp(10px, 2vw, 18px);
}
@ -15,8 +23,8 @@ html.js .noscript, .hidden {
text-decoration: underline;
}
/* Dead style */
html:not(.js) .js-only {
/* Dead style */
display: none;
}
@ -32,14 +40,20 @@ header {
flex-grow: 1;
}
/* --- Table --- */
#tbl_communities {
/* Browser defaults. */
--cell-padding-h: 1px;
--cell-padding-v: 1px;
width:100%;
margin: 0 auto;
--cell-padding-h: 0.5em;
--cell-padding-v: 0.5em;
--cell-padding: var(--cell-padding-h) var(--cell-padding-v);
--cell-padding-small:
calc( var(--cell-padding-h) / 2 ) calc( var(--cell-padding-v) / 2 );
}
/* Cells in general */
#tbl_communities th {
white-space: nowrap;
}
@ -49,12 +63,12 @@ header {
#tbl_communities th.sortable {
position: relative;
padding-right: calc( 1.5em + var(--cell-padding-h) );
padding-right: calc( 1.35em + var(--cell-padding-h) );
}
#tbl_communities th.sortable::after {
position: absolute;
right: 0.25em;
right: calc( var(--cell-padding-h) );
top: 50%;
transform: translateY(-50%);
/* content: "\25C7"; */ /* White diamond */
@ -63,16 +77,19 @@ header {
/* content: "\25B8"; */ /* Small right pointing triangle */
content: "\2B25"; /* Black medium diamond */
color: grey;
font-size: 1.3em;
}
#tbl_communities[data-sort-asc=true] th[data-sort=true]::after {
content: "\25B2"; /* Black up pointing triangle */
color: initial;
font-size: 1em;
}
#tbl_communities[data-sort-asc=false] th[data-sort=true]::after {
content: "\25BC"; /* Black up pointing triangle */
color: initial;
font-size: 1em;
}
#toggle-show-room-ids:not(:checked)
@ -80,13 +97,34 @@ header {
display: none;
}
#tbl_communities th {
background-color: lightgray;
}
#tbl_communities tr:nth-child(even) {
--row-color: white;
}
#tbl_communities tr:nth-child(odd) {
--row-color: var(--alternate-row-color);
background-color: var(--alternate-row-color);
}
/* Particular columns */
.td_identifier {
font-family: monospace;
}
.td_name {
max-width: 15vw;
overflow: hidden;
text-overflow: ellipsis;
}
.td_language {
text-align: center;
font-size: 1.25em;
font-size: 1.5em;
}
.td_language:empty::after {
content: "\2753";
@ -94,17 +132,68 @@ header {
#th_description { }
.td_description {
max-width: 25vw;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
/* Prevents middle alignment with table-cell. */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.td_description::after {
/* Cover overflowing description lines with internal border. */
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: var(--cell-padding-h);
content: "";
background-color: var(--row-color);
}
.td_users {
text-align: center;
/* font-weight: bold; */
}
.td_preview {
text-align: center;
}
.protocol-indicator {
display: inline-block;
font-family: monospace;
border-radius: 4px;
padding: .25em .05em;
width: 6ch;
text-align: center;
text-shadow: 0 0 0.5em #0003;
}
a[href^="http:"] .protocol-indicator { background-color:lightgray }
a[href^="https:"] .protocol-indicator { background-color:lightblue }
a[href^="http:"] .protocol-indicator::after {
content: "HTTP";
}
a[href^="https:"] .protocol-indicator::after {
content: "HTTPS";
}
.td_users { text-align: right; }
.td_preview { text-align: center; }
.td_server_icon { text-align: center; }
.td_qr_code {
padding: var(--cell-padding-small) !important;
}
.td_server_icon {
text-align: center;
padding: var(--cell-padding-small) !important;
font-size: 1.1em;
}
.td_server_icon-circle {
display: flex;
@ -112,11 +201,11 @@ header {
justify-content: center;
width: 2em;
height: 2em;
border-radius: 2em;
border-radius: 100%;
font-family: sans-serif;
margin: 0 auto;
color: white;
text-shadow: 0 0 0.5em #000;
text-shadow: 0 0 0.25em #000a;
box-shadow: 0 0 0.05em #777;
}
@ -132,18 +221,25 @@ header {
}
.join_url {
overflow: hidden;
text-overflow: ellipsis;
max-width: 20vw;
/* Apply margin against copy button or link. */
/* URL now guaranteed to have interactive element to right when present. */
margin-right: 1em;
}
@media (max-width: 950px) {
@media (max-width: 1050px) {
/* Only current width breakpoint; */
/* Would follow w4 and precede w6. */
.show-from-w5 {
display: none;
}
#th_preview, .td_preview {
display: none;
}
}
.join_url_container {
@ -153,7 +249,12 @@ header {
justify-content: space-around;
}
.copy_button { font-size: inherit }
.copy_button {
font-size: 1.1em;
padding: var(--cell-padding);
}
/* --- Footer --- */
footer {
display: flex;
@ -184,31 +285,7 @@ label[for=toggle-show-room-ids]::after {
content: " (On)"
}
/* <Colors> */
:root {
/*--session-classic-dark-green: #31f196;*/
/*--session-classic-dark-gray-one: #414141;*/
/*--session-classic-dark-gray-two: #2d2d2d;*/
/*--session-classic-dark-gray-three: #1b1b1b;*/
--alternate-row-color: #e8e8e8;
}
#tbl_communities th { background-color: lightgray; }
#tbl_communities tr:nth-child(odd) { background-color: var(--alternate-row-color); }
.protocol-indicator {
display: inline-block;
font-family: monospace;
border-radius: 4px;
padding: .25em .05em;
width: 6ch;
text-align: center;
}
.protocol-http { background-color:lightgray }
.protocol-https { background-color:lightblue }
/* <QR code modals> */
/* --- QR code modals --- */
.qr-code {
display: block;
margin-left: auto;

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

@ -43,11 +43,11 @@
// FIXME:
// ! This is bad practice.
// However, the fetching code hides component data
// and this is a low risk use case.
// and this is a low risk use case.
$pubkey = explode("=", $room->join_link)[1];
$icon_hue = hexdec($pubkey[2] . $pubkey[2]);
$icon_color = "hsl($icon_hue, 80%, 50%)";
$icon_color = "hsl($icon_hue, 95%, 50%)";
$hostname = explode("//", $room->join_link)[1];
$hostname = explode("/", $hostname)[0];
@ -56,18 +56,18 @@
<tr id="<?=$id?>">
<td class="td_identifier"><?=$id?></td>
<td class="td_language"><?=$room->language?></td>
<td class="td_name"><?=$room->name?></td>
<td class="td_name" title="'<?=$room->name?>' preview">
<a href="<?=$room->preview_link?>" target="_blank" rel="noopener noreferrer">
<?=$room->name?>
</a>
</td>
<td class="td_description"
><?=$room->description?></td>
<td class="td_users"><?=$room->active_users?></td>
<td class="td_preview">
<a href="<?=$room->preview_link?>" target="_blank" rel="noopener noreferrer">
<?php if (str_starts_with($room->preview_link, 'http://')): ?>
<span class="protocol-indicator protocol-http">HTTP</span>
<?php endif; ?>
<?php if (str_starts_with($room->preview_link, 'https://')): ?>
<span class="protocol-indicator protocol-https">HTTPS</span>
<?php endif; ?>
<span class="protocol-indicator"></span>
</a>
</td>
<td class="td_qr_code">
@ -81,6 +81,8 @@
<td class="td_server_icon"
data-pubkey="<?=$pubkey?>"
title="<?=$hostname?> (<?=$pubkey?>)"
<?php /* Mobile UX. This is not ideal. Move info once implemented. */ ?>
onclick="alert('Host: <?=$hostname?>\n\nPublic key:\n<?=$pubkey?>')"
>
<div class="td_server_icon-circle" style="background-color: <?=$icon_color?>">
<span><?=strtoupper($pubkey[0] . $pubkey[1])?></span>
@ -89,7 +91,7 @@
<td class="td_join_url">
<div class="join_url_container" data-url="<?=$room->join_link?>">
<a class="join_url show-from-w5" title="<?=$room->join_link?>"
><?=truncate($room->join_link, 32)?></a>
><?=$room->join_link?></a>
<a class="noscript" href="<?=$room->join_link?>"
>Copy link</a>
</div>

Write Preview
Loading…
Cancel
Save