dandri/meshcore-analyzer
1
0 Fork 0
mirror of https://github.com/Kpa-clawbot/meshcore-analyzer.git synced 2026-10-23 09:12:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: QR code smaller, side pane reorganized

Browse Source 
- QR globally reduced (140px → 100px, overlay 64px)
- Side pane: name/badges first, then map with QR overlaid in bottom-right corner
- Removed standalone QR section from side pane — saves vertical space
- Public key shown inline below map instead of separate section
- No-location nodes still get standalone centered QR
- Full detail page QR wrap narrower (max 160px)
This commit is contained in:
you committed 2026-03-23 16:27:49 +00:00
1 parent 0b3278a2a0
commit aab3e57e9f
2 files changed
+11 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/nodes.js
+6 -4
View File
@@ -502,17 +502,19 @@
panel.innerHTML = `
<div class="node-detail">
${hasLoc ? `<div class="node-map-container node-detail-map" id="nodeMap" style="border-radius:8px;overflow:hidden;"></div>` : ''}
<div class="node-detail-name">${escapeHtml(n.name || '(unnamed)')}</div>
<div class="node-detail-role"><span class="badge" style="background:${roleColor}20;color:${roleColor}">${n.role}</span> ${n.hash_size ? `<span class="badge" style="background:var(--nav-bg);color:var(--nav-text);font-family:var(--mono)">${n.public_key.slice(0, n.hash_size * 2).toUpperCase()}</span>` : ''} ${statusLabel}
<a href="#/nodes/${encodeURIComponent(n.public_key)}" class="btn-primary" style="display:inline-block;text-decoration:none;font-size:11px;padding:2px 8px;margin-left:8px">🔍 Details</a>
<a href="#/nodes/${encodeURIComponent(n.public_key)}/analytics" class="btn-primary" style="display:inline-block;margin-left:4px;text-decoration:none;font-size:11px;padding:2px 8px">📊 Analytics</a>
</div>
${hasLoc ? `<div class="node-map-qr-wrap">
<div class="node-map-container node-detail-map" id="nodeMap" style="border-radius:8px;overflow:hidden;"></div>
<div class="node-map-qr-overlay node-qr" id="nodeQrCode"></div>
</div>` : `<div class="node-qr" id="nodeQrCode" style="margin:8px 0"></div>`}
<div class="node-detail-section">
<h4>Public Key</h4>
<div class="node-detail-key mono">${n.public_key}</div>
<div class="node-qr" id="nodeQrCode"></div>
<div class="node-detail-key mono" style="font-size:11px;word-break:break-all;margin-bottom:4px">${n.public_key}</div>
</div>
<div class="node-detail-section">
public/style.css
+5 -2
View File
@@ -1113,9 +1113,12 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
}
.observer-selector { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.node-qr { text-align: center; margin-top: 8px; }
.node-qr svg { max-width: 140px; border-radius: 4px; }
.node-qr svg { max-width: 100px; border-radius: 4px; }
[data-theme="dark"] .node-qr svg rect[fill="#ffffff"] { fill: var(--card-bg); }
[data-theme="dark"] .node-qr svg rect[fill="#000000"] { fill: var(--text); }
.node-map-qr-wrap { position: relative; }
.node-map-qr-overlay { position: absolute; bottom: 8px; right: 8px; z-index: 400; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.node-map-qr-overlay svg { max-width: 64px; display: block; }
/* Replay on Live Map button in packet detail */
.detail-actions {
@@ -1389,7 +1392,7 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
.node-top-row { display: flex; gap: 16px; margin-bottom: 12px; }
.node-top-row .node-map-wrap { flex: 3; min-height: 200px; border-radius: 8px; overflow: hidden; }
.node-top-row .node-map-wrap .node-detail-map { height: 100%; }
.node-top-row .node-qr-wrap { flex: 1; min-width: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
.node-top-row .node-qr-wrap { flex: 1; min-width: 120px; max-width: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.node-qr-wrap--full { max-width: 240px; margin: 0 auto; }
.node-stats-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.node-stats-table td { padding: 6px 12px; border-bottom: 1px solid var(--border); }