Style tables
This commit is contained in:
parent
56939dcc24
commit
0269880ee4
4 changed files with 39 additions and 11 deletions
|
@ -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, "_");
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue