From c6659cffd9bfd8ba888ed4b263bc9683278b29d3 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Wed, 5 Apr 2023 22:48:36 +0000 Subject: [PATCH] change resource page to account page, improve table styling Signed-off-by: Arthur Lu --- resources.html => account.html | 13 ++++++++----- css/table.css | 19 +++++++++++++------ index.html | 2 +- scripts/{resources.js => account.js} | 9 +++------ 4 files changed, 25 insertions(+), 18 deletions(-) rename resources.html => account.html (71%) rename scripts/{resources.js => account.js} (76%) diff --git a/resources.html b/account.html similarity index 71% rename from resources.html rename to account.html index 237dea2..ebace09 100644 --- a/resources.html +++ b/account.html @@ -7,23 +7,26 @@ - +
- - - + + + + + +
Resource TypeAvaliable AmountTotal Amount
Resource TypeAvaliable AmountTotal Amount

© tronnet

diff --git a/css/table.css b/css/table.css index 837f53b..0c15eb1 100644 --- a/css/table.css +++ b/css/table.css @@ -1,21 +1,28 @@ table { padding: 10px; border-collapse: collapse; - border: 1px solid var(--content-txt-color); + width: 100%; + text-align: left; } -tr { - background-color: white; +thead { + background-color: var(--accent-bkg-color); + color: var(--accent-txt-color); } -tr:nth-child(even) { +tbody { + background-color: var(--content-bkg-color); + color: var(--content-txt-color); +} + +tbody tr:nth-child(even) { background-color: #ddd; } -tr:hover { +tbody tr:hover { background-color: #aaa; } -td { +th, td { padding: 5px; } \ No newline at end of file diff --git a/index.html b/index.html index 0eab759..e298610 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,7 @@
diff --git a/scripts/resources.js b/scripts/account.js similarity index 76% rename from scripts/resources.js rename to scripts/account.js index 36d6920..b8063ce 100644 --- a/scripts/resources.js +++ b/scripts/account.js @@ -4,7 +4,7 @@ window.addEventListener("DOMContentLoaded", init); async function init () { let resources = await requestAPI("/user/resources"); - document.querySelector("main").append(buildResourceTable(resources.resources, "#resource-table")); + buildResourceTable(resources.resources, "#resource-table"); } function buildResourceTable (object, tableid) { @@ -12,8 +12,9 @@ function buildResourceTable (object, tableid) { if (object instanceof Object) { let table = document.querySelector(tableid); + let tbody = table.querySelector("tbody"); Object.keys(object).forEach((element) => { - let row = table.insertRow(); + let row = tbody.insertRow(); let key = row.insertCell(); key.innerText = `${element}`; let val = row.insertCell(); @@ -21,9 +22,5 @@ function buildResourceTable (object, tableid) { let total = row.insertCell();; total.innerText = `${object[element]}` }); - return table; - } - else { - return null; } } \ No newline at end of file