Style tables

src/lib/crypto/make_crypto_id.mjs

@@ -4,7 +4,7 @@ import tweetnacl from 'tweetnacl';
 
 
 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, "_");
 }

src/static/app.css

@@ -8,8 +8,9 @@
 	
 	--tech-a1: hsla(230, 100%, 77%, 0.75);
 	--tech-a2: hsla(265, 100%, 77%, 0.75);
-	--tech-b: #0381e2;
-	--tech-c: #f0e9ad;
+	--tech-b: hsla(206, 97%, 44%, 0.75);
+	--tech-c: hsla(53, 69%, 80%, 0.75);
+	--tech-cb: hsla(53, 69%, 80%, 0.4);
 	--tech-d: hsla(178, 61%, 59%, 0.75);
 }
 
@@ -127,11 +128,37 @@ h2 {
 	text-shadow: 0 0 0.25em var(--text);
 }
 
-th, td {
+table { 
 	border-collapse: collapse;
 }
-th { border: 0.1em solid red; }
-td { border: 0.1em solid green; }
+th, td {
+	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 {
 	display: flex;

src/static/js/routes/route_dashboard.mjs

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

src/static/js/ui/UITable.mjs

@@ -37,8 +37,9 @@ class UITable extends AbstractUIItem {
 		const el_tbody = this.el.querySelector("tbody");
 		
 		let new_row = document.createElement("tr");
-		// TODO: Insert a <td /> for the name of the peer here
-		new_row.appendChild(peer_name(peer));
+		let cell_peer = document.createElement("td");
+		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.
 		switch(typeof this.def.content) {