Fix chart on node.html.

This commit is contained in:
Pablo Revilla
2025-12-10 09:56:30 -08:00
parent 350aa9e4a3
commit 0ce64ac975
2 changed files with 34 additions and 18 deletions
+12 -10
View File
@@ -143,19 +143,20 @@
<!-- Node Info -->
<div id="node-info" class="node-info">
<div><strong data-translate-lang="node_id">Node ID</strong><strong>:</strong><span id="info-node-id"></span></div>
<div><strong data-translate-lang="long_name">Long Name</strong><strong>:</strong> <span id="info-long-name"></span></div>
<div><strong data-translate-lang="short_name">Short Name</strong><strong>:</strong> <span id="info-short-name"></span></div>
<div><strong data-translate-lang="node_id">Node ID</strong><strong>: </strong><span id="info-node-id"></span></div>
<div><strong data-translate-lang="id">Hex ID</strong><strong>: </strong><span id="info-id"></span></div>
<div><strong data-translate-lang="long_name">Long Name</strong><strong>: </strong> <span id="info-long-name"></span></div>
<div><strong data-translate-lang="short_name">Short Name</strong><strong>: </strong> <span id="info-short-name"></span></div>
<div><strong data-translate-lang="hw_model">Hardware Model</strong><strong>:</strong> <span id="info-hw-model"></span></div>
<div><strong data-translate-lang="firmware">Firmware</strong><strong>:</strong> <span id="info-firmware"></span></div>
<div><strong data-translate-lang="role">Role</strong><strong>:</strong> <span id="info-role"></span></div>
<div><strong data-translate-lang="hw_model">Hardware Model</strong><strong>: </strong> <span id="info-hw-model"></span></div>
<div><strong data-translate-lang="firmware">Firmware</strong><strong>: </strong> <span id="info-firmware"></span></div>
<div><strong data-translate-lang="role">Role</strong><strong>: </strong> <span id="info-role"></span></div>
<div><strong data-translate-lang="channel">Channel</strong><strong>:</strong> <span id="info-channel"></span></div>
<div><strong data-translate-lang="latitude">Latitude</strong><strong>:</strong> <span id="info-lat"></span></div>
<div><strong data-translate-lang="longitude">Longitude</strong><strong>:</strong> <span id="info-lon"></span></div>
<div><strong data-translate-lang="channel">Channel</strong><strong>: </strong> <span id="info-channel"></span></div>
<div><strong data-translate-lang="latitude">Latitude</strong><strong>: </strong> <span id="info-lat"></span></div>
<div><strong data-translate-lang="longitude">Longitude</strong><strong>: </strong> <span id="info-lon"></span></div>
<div><strong data-translate-lang="last_update">Last Update</strong><strong>:</strong> <span id="info-last-update"></span></div>
<div><strong data-translate-lang="last_update">Last Update</strong><strong>: </strong> <span id="info-last-update"></span></div>
</div>
<!-- Map. -->
@@ -406,6 +407,7 @@ async function loadNodeInfo(){
nodeMap[fromNodeId] || fromNodeId;
// Info card
document.getElementById("info-id").textContent = node.id ?? "—";
document.getElementById("info-node-id").textContent = node.node_id ?? "—";
document.getElementById("info-long-name").textContent = node.long_name ?? "—";
document.getElementById("info-short-name").textContent = node.short_name ?? "—";
+22 -8
View File
@@ -2,23 +2,32 @@
{% block css %}
<style>
html, body {
overflow-x: auto !important;
}
table {
width: 80%;
/* FIX: allow table to keep natural width so scrolling works */
width: max-content;
min-width: 100%;
border-collapse: collapse;
margin: 1em auto;
}
/* Ensure table centered visually */
/* Desktop scroll wrapper */
#node-list {
display: flex;
justify-content: center;
width: 100%;
overflow-x: auto; /* allows horizontal scroll */
overflow-y: hidden;
/* !!! removed display:flex because it prevents scrolling */
}
#node-list table {
margin-left: auto;
margin-right: auto;
width: max-content; /* table keeps its natural width */
min-width: 100%; /* won't shrink smaller than viewport */
}
th, td {
padding: 10px;
border: 1px solid #333;
@@ -134,16 +143,20 @@ select, .export-btn, .search-box, .clear-btn {
/* --------------------------------------------- */
@media (max-width: 768px) {
/* Hide desktop table */
/* Hide desktop view */
#node-list table {
display: none;
}
/* Show mobile card list */
/* Show mobile cards */
#mobile-node-list {
display: block !important;
width: 100%;
padding: 0 10px;
/* If you want horizontal swiping, uncomment:
overflow-x: auto;
white-space: nowrap; */
}
.node-card {
@@ -177,6 +190,7 @@ select, .export-btn, .search-box, .clear-btn {
font-size: 1.4em;
}
}
</style>
{% endblock %}