From b7ef0bbfcddaf912b10601f6c5ed384c2183e6be Mon Sep 17 00:00:00 2001
From: l5y <220195275+l5yth@users.noreply.github.com>
Date: Tue, 14 Oct 2025 14:59:47 +0200
Subject: [PATCH] Adjust node table columns responsively (#332)
---
web/public/assets/js/app/main.js | 36 ++++++-------
web/public/assets/styles/base.css | 84 +++++++++++++++++--------------
web/views/index.erb | 36 ++++++-------
3 files changed, 82 insertions(+), 74 deletions(-)
diff --git a/web/public/assets/js/app/main.js b/web/public/assets/js/app/main.js
index 0020c5f..5cb45a1 100644
--- a/web/public/assets/js/app/main.js
+++ b/web/public/assets/js/app/main.js
@@ -2581,24 +2581,24 @@ export function initializeApp(config) {
const lastPositionTime = toFiniteNumber(n.position_time ?? n.positionTime);
const lastPositionCell = lastPositionTime != null ? timeAgo(lastPositionTime, nowSec) : '';
tr.innerHTML = `
- | ${n.node_id || ""} |
- ${renderShortHtml(n.short_name, n.role, n.long_name, n)} |
- ${n.long_name || ""} |
- ${timeAgo(n.last_heard, nowSec)} |
- ${n.role || "CLIENT"} |
- ${fmtHw(n.hw_model)} |
- ${fmtAlt(n.battery_level, "%")} |
- ${fmtAlt(n.voltage, "V")} |
- ${timeHum(n.uptime_seconds)} |
- ${fmtTx(n.channel_utilization)} |
- ${fmtTx(n.air_util_tx)} |
- ${fmtTemperature(n.temperature)} |
- ${fmtHumidity(n.relative_humidity)} |
- ${fmtPressure(n.barometric_pressure)} |
- ${fmtCoords(n.latitude)} |
- ${fmtCoords(n.longitude)} |
- ${fmtAlt(n.altitude, "m")} |
- ${lastPositionCell} | `;
+ ${n.node_id || ""} |
+ ${renderShortHtml(n.short_name, n.role, n.long_name, n)} |
+ ${n.long_name || ""} |
+ ${timeAgo(n.last_heard, nowSec)} |
+ ${n.role || "CLIENT"} |
+ ${fmtHw(n.hw_model)} |
+ ${fmtAlt(n.battery_level, "%")} |
+ ${fmtAlt(n.voltage, "V")} |
+ ${timeHum(n.uptime_seconds)} |
+ ${fmtTx(n.channel_utilization)} |
+ ${fmtTx(n.air_util_tx)} |
+ ${fmtTemperature(n.temperature)} |
+ ${fmtHumidity(n.relative_humidity)} |
+ ${fmtPressure(n.barometric_pressure)} |
+ ${fmtCoords(n.latitude)} |
+ ${fmtCoords(n.longitude)} |
+ ${fmtAlt(n.altitude, "m")} |
+ ${lastPositionCell} | `;
frag.appendChild(tr);
}
tb.replaceChildren(frag);
diff --git a/web/public/assets/styles/base.css b/web/public/assets/styles/base.css
index 77a99e7..260c646 100644
--- a/web/public/assets/styles/base.css
+++ b/web/public/assets/styles/base.css
@@ -882,19 +882,6 @@ input[type="radio"] {
word-break: break-word;
}
-@media (max-width: 1280px) {
- #nodes th:nth-child(15),
- #nodes td:nth-child(15),
- #nodes th:nth-child(16),
- #nodes td:nth-child(16),
- #nodes th:nth-child(17),
- #nodes td:nth-child(17),
- #nodes th:nth-child(18),
- #nodes td:nth-child(18) {
- display: none;
- }
-}
-
@media (max-width: 1024px) {
.row {
flex-direction: column;
@@ -960,36 +947,57 @@ input[type="radio"] {
height: 30vh;
}
- #nodes th:nth-child(1),
- #nodes td:nth-child(1),
- #nodes th:nth-child(5),
- #nodes td:nth-child(5),
- #nodes th:nth-child(6),
- #nodes td:nth-child(6),
- #nodes th:nth-child(9),
- #nodes td:nth-child(9),
- #nodes th:nth-child(11),
- #nodes td:nth-child(11),
- #nodes th:nth-child(13),
- #nodes td:nth-child(13),
- #nodes th:nth-child(14),
- #nodes td:nth-child(14),
- #nodes th:nth-child(15),
- #nodes td:nth-child(15),
- #nodes th:nth-child(16),
- #nodes td:nth-child(16),
- #nodes th:nth-child(17),
- #nodes td:nth-child(17),
- #nodes th:nth-child(18),
- #nodes td:nth-child(18) {
- display: none;
- }
-
.legend {
max-width: min(240px, 80vw);
}
}
+@media (max-width: 1679px) {
+ .nodes-col--node-id {
+ display: none;
+ }
+}
+
+@media (max-width: 1559px) {
+ .nodes-col--temperature,
+ .nodes-col--humidity,
+ .nodes-col--pressure {
+ display: none;
+ }
+}
+
+@media (max-width: 1319px) {
+ .nodes-col--latitude,
+ .nodes-col--longitude,
+ .nodes-col--last-position {
+ display: none;
+ }
+}
+
+@media (max-width: 1109px) {
+ .nodes-col--voltage,
+ .nodes-col--air-util-tx,
+ .nodes-col--altitude {
+ display: none;
+ }
+}
+
+@media (max-width: 899px) {
+ .nodes-col--uptime,
+ .nodes-col--frequency,
+ .nodes-col--modem-preset {
+ display: none;
+ }
+}
+
+@media (max-width: 659px) {
+ .nodes-col--battery,
+ .nodes-col--channel-util,
+ .nodes-col--hw-model {
+ display: none;
+ }
+}
+
body.dark {
background: #111;
color: #eee;
diff --git a/web/views/index.erb b/web/views/index.erb
index 3fe6774..24f053a 100644
--- a/web/views/index.erb
+++ b/web/views/index.erb
@@ -166,24 +166,24 @@
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |