Style tables

This commit is contained in:
Starbeamrainbowlabs 2022-03-16 22:55:32 +00:00
parent 56939dcc24
commit 0269880ee4
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
4 changed files with 39 additions and 11 deletions

View file

@ -4,7 +4,7 @@ import tweetnacl from 'tweetnacl';
export default function make_crypto_id() { export default function make_crypto_id() {
return Buffer.from(tweetnacl.randomBytes(256)).toString("base64") return Buffer.from(tweetnacl.randomBytes(256/8)).toString("base64")
.replace(/\+/g, "-") .replace(/\+/g, "-")
.replace(/\//g, "_"); .replace(/\//g, "_");
} }

View file

@ -8,8 +8,9 @@
--tech-a1: hsla(230, 100%, 77%, 0.75); --tech-a1: hsla(230, 100%, 77%, 0.75);
--tech-a2: hsla(265, 100%, 77%, 0.75); --tech-a2: hsla(265, 100%, 77%, 0.75);
--tech-b: #0381e2; --tech-b: hsla(206, 97%, 44%, 0.75);
--tech-c: #f0e9ad; --tech-c: hsla(53, 69%, 80%, 0.75);
--tech-cb: hsla(53, 69%, 80%, 0.4);
--tech-d: hsla(178, 61%, 59%, 0.75); --tech-d: hsla(178, 61%, 59%, 0.75);
} }
@ -127,11 +128,37 @@ h2 {
text-shadow: 0 0 0.25em var(--text); text-shadow: 0 0 0.25em var(--text);
} }
th, td { table {
border-collapse: collapse; border-collapse: collapse;
} }
th { border: 0.1em solid red; } th, td {
td { border: 0.1em solid green; } padding: 0.45em;
}
tr:nth-child(even) {
background: hsla(0, 0%, 80%, 0.5);
}
th {
text-shadow: 0 0 0.1em var(--text);
border-bottom: 0.2em solid var(--tech-d);
}
.data-display {
margin: 1em 0;
display: flex;
flex-wrap: wrap;
gap: 1em;
justify-content: center;
}
.data-item > h3 {
margin: 0; padding: 0.5em;
background: var(--tech-c);
text-align: center;
text-shadow: 0 0 0.15em var(--text);
}
.data-item > :not(:first-child) {
background: var(--tech-b);
}
.peer-name { .peer-name {
display: flex; display: flex;

View file

@ -2,7 +2,7 @@
export default async function route_main() { export default async function route_main() {
console.log(`TODO: Implement the dashboard :-)`); console.log(`TODO: Implement the dashboard :-)`);
for await (let item of globalThis.sysquery.table("cpu")) { // for await (let item of globalThis.sysquery.table("cpu")) {
console.log(`[TABLE] item`, item); // console.log(`[TABLE] item`, item);
} // }
} }

View file

@ -37,8 +37,9 @@ class UITable extends AbstractUIItem {
const el_tbody = this.el.querySelector("tbody"); const el_tbody = this.el.querySelector("tbody");
let new_row = document.createElement("tr"); let new_row = document.createElement("tr");
// TODO: Insert a <td /> for the name of the peer here let cell_peer = document.createElement("td");
new_row.appendChild(peer_name(peer)); cell_peer.appendChild(peer_name(peer));
new_row.appendChild(cell_peer);
// Note here that the comma is *important*. This is a destructuring assignment where we ignore the first value. // Note here that the comma is *important*. This is a destructuring assignment where we ignore the first value.
switch(typeof this.def.content) { switch(typeof this.def.content) {