Skip to content

Commit 0603e5f

Browse files
author
NullNaveen
committed
fix: responsive dashboard UI - clamp fonts, mobile backdrop, table wraps, 480px breakpoint
1 parent d635559 commit 0603e5f

1 file changed

Lines changed: 25 additions & 14 deletions

File tree

‎crates/baud-api/dashboard.html‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
.stat-card .stat-label{color:var(--text2);font-size:.82em;text-transform:uppercase;letter-spacing:.06em;font-weight:500}
9797
.stat-card .stat-sub{color:var(--text3);font-size:.78em;margin-top:4px}
9898
h1,.section-title{font-family:'Space Grotesk','DM Sans',sans-serif;letter-spacing:-.01em}
99-
#content{max-width:1400px}
99+
#content{max-width:1400px;margin:0 auto;width:100%}
100100

101101
/* Progress bar */
102102
.progress-bar{height:8px;background:var(--border);border-radius:4px;overflow:hidden;margin-top:8px}
@@ -175,12 +175,22 @@
175175

176176
/* Responsive */
177177
#mobile-toggle{display:none;position:fixed;top:12px;left:12px;z-index:200;padding:8px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;color:var(--text)}
178+
#mobile-backdrop{display:none;position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.5)}
179+
.inline-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
178180
@media(max-width:768px){
179181
#sidebar{transform:translateX(-100%)}
180182
#sidebar.open{transform:translateX(0)}
183+
#sidebar.open~#mobile-backdrop{display:block}
181184
#main{margin-left:0;padding:16px}
182185
#mobile-toggle{display:block}
183186
.cards-grid{grid-template-columns:1fr}
187+
.inline-grid{grid-template-columns:1fr}
188+
}
189+
@media(max-width:480px){
190+
.stat-card .stat-value{font-size:1.3em}
191+
.page-header h1{font-size:1.2em}
192+
#main{padding:12px}
193+
.card{padding:14px}
184194
}
185195

186196
/* Skeleton animation */
@@ -211,9 +221,10 @@
211221
</head>
212222
<body>
213223

214-
<button id="mobile-toggle" onclick="document.getElementById('sidebar').classList.toggle('open')">
224+
<button id="mobile-toggle" onclick="var s=document.getElementById('sidebar');s.classList.toggle('open');document.getElementById('mobile-backdrop').style.display=s.classList.contains('open')?'block':'none'">
215225
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
216226
</button>
227+
<div id="mobile-backdrop" onclick="document.getElementById('sidebar').classList.remove('open');this.style.display='none'"></div>
217228

218229
<aside id="sidebar">
219230
<div class="logo">
@@ -586,14 +597,14 @@
586597
<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px">
587598
<div>
588599
<div style="font-size:.8em;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-bottom:4px">Your Balance</div>
589-
<div style="font-family:'Space Grotesk','DM Sans',sans-serif;font-size:2.1em;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums;font-feature-settings:'tnum'"><span id="d-balance">${myBalanceBaud}</span> <span style="font-size:.45em;color:var(--text2)">BAUD</span></div>
600+
<div style="font-family:'Space Grotesk','DM Sans',sans-serif;font-size:clamp(1.3em,4vw,2.1em);font-weight:700;color:var(--green);font-variant-numeric:tabular-nums;font-feature-settings:'tnum'"><span id="d-balance">${myBalanceBaud}</span> <span style="font-size:.45em;color:var(--text2)">BAUD</span></div>
590601
<div id="d-ownership" style="font-size:.85em;color:var(--text2);margin-top:2px">
591602
${myPctOfSupply > 0 ? `You own <strong style="color:var(--primary-light)">${myPctStr}%</strong> of the total 1 billion BAUD supply` : 'Mining in progress…'}
592603
</div>
593604
</div>
594605
<div style="text-align:right">
595606
<div style="font-size:.8em;color:var(--text3);margin-bottom:4px">Earning</div>
596-
<div style="font-family:'Space Grotesk','DM Sans',sans-serif;font-size:1.4em;font-weight:600;color:var(--gold);font-feature-settings:'tnum'"><span id="d-reward">${rewardBaud}</span> <span id="d-reward-unit" style="font-size:.6em;color:var(--text2)">BAUD/block</span></div>
607+
<div style="font-family:'Space Grotesk','DM Sans',sans-serif;font-size:clamp(1em,3vw,1.4em);font-weight:600;color:var(--gold);font-feature-settings:'tnum'"><span id="d-reward">${rewardBaud}</span> <span id="d-reward-unit" style="font-size:.6em;color:var(--text2)">BAUD/block</span></div>
597608
<div id="d-reward-min" style="font-size:.8em;color:var(--text3);margin-top:2px">≈ ${m ? fmt(m.current_block_reward_baud * 60) : '—'} BAUD/minute</div>
598609
</div>
599610
</div>
@@ -636,7 +647,7 @@
636647
<span id="d-halving">${m ? fmt(m.blocks_until_halving) : '—'} blocks until reward halves</span>
637648
</div>
638649
<div class="progress-bar"><div class="fill" id="d-era-bar" style="width:${m ? ((1 - m.blocks_until_halving/m.halving_interval)*100) : 0}%"></div></div>
639-
<div style="margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:.85em">
650+
<div class="inline-grid" style="margin-top:16px;font-size:.85em">
640651
<div><span style="color:var(--text3)">Blocks Per Era</span><br><strong id="d-era-interval">${m ? fmt(m.halving_interval) : '—'}</strong></div>
641652
<div><span style="color:var(--text3)">Next Halving</span><br>Block <strong id="d-next-halving">#${m ? fmt(m.next_halving_block) : '—'}</strong></div>
642653
<div><span style="color:var(--text3)">Max Supply</span><br><strong id="d-max-supply">${m ? fmt(m.total_supply_baud) : '—'} BAUD</strong></div>
@@ -928,14 +939,14 @@
928939
<div class="two-col">
929940
<div class="card">
930941
<div class="section-title">Chain Details</div>
931-
<table><tbody>
942+
<div class="table-wrap"><table><tbody>
932943
<tr><td style="color:var(--text3);width:140px">Chain ID</td><td><strong>${escapeHtml(s.chain_id)}</strong></td></tr>
933944
<tr><td style="color:var(--text3)">Node Address</td><td class="mono copyable" onclick="copyText('${s.node_address}')">${s.node_address}</td></tr>
934945
<tr><td style="color:var(--text3)">State Root</td><td class="mono copyable" onclick="copyText('${s.state_root}')">${shortAddr(s.state_root)}</td></tr>
935946
<tr><td style="color:var(--text3)">Last Block Hash</td><td class="mono copyable" onclick="copyText('${s.last_block_hash}')">${shortAddr(s.last_block_hash)}</td></tr>
936947
<tr><td style="color:var(--text3)">Escrows</td><td id="n-escrows">${fmt(s.escrows)}</td></tr>
937948
<tr><td style="color:var(--text3)">Mempool Size</td><td id="n-mempool">${fmt(s.mempool_size)}</td></tr>
938-
</tbody></table>
949+
</tbody></table></div>
939950
</div>
940951
<div class="card">
941952
<div class="section-title">API Endpoints</div>
@@ -997,7 +1008,7 @@
9971008
el.innerHTML = `
9981009
<div class="card">
9991010
<div class="section-title">Account Details</div>
1000-
<table><tbody>
1011+
<div class="table-wrap"><table><tbody>
10011012
<tr><td style="color:var(--text3);width:120px">Address</td><td class="mono copyable" onclick="copyText('${data.address}')" style="word-break:break-all">${data.address}</td></tr>
10021013
<tr><td style="color:var(--text3)">Balance</td><td><strong style="color:var(--green);font-size:1.2em">${fmtBaud(data.balance)} BAUD</strong><br><span style="font-size:.8em;color:var(--text3)">${fmt(data.balance)} quanta</span></td></tr>
10031014
<tr><td style="color:var(--text3)">Nonce</td><td>${data.nonce}</td></tr>
@@ -1006,7 +1017,7 @@
10061017
<tr><td style="color:var(--text3)">Endpoint</td><td>${escapeHtml(data.agent_meta.endpoint)}</td></tr>
10071018
<tr><td style="color:var(--text3)">Capabilities</td><td>${data.agent_meta.capabilities.map(c => `<span class="badge badge-cyan">${escapeHtml(c)}</span> `).join('')}</td></tr>
10081019
` : ''}
1009-
</tbody></table>
1020+
</tbody></table></div>
10101021
</div>
10111022
`;
10121023
}
@@ -1210,13 +1221,13 @@
12101221
if (!resp.ok) { const d = await resp.json(); el.innerHTML = `<div class="alert alert-error">${escapeHtml(d.error||'Not found')}</div>`; return; }
12111222
const data = await resp.json();
12121223
el.innerHTML = `<div class="card" style="background:var(--bg1)">
1213-
<table><tbody>
1224+
<div class="table-wrap"><table><tbody>
12141225
<tr><td style="color:var(--text3);width:120px">Hash</td><td class="mono" style="word-break:break-all">${escapeHtml(data.hash || hash)}</td></tr>
12151226
<tr><td style="color:var(--text3)">Sender</td><td class="mono" style="word-break:break-all">${escapeHtml(data.sender)}</td></tr>
12161227
<tr><td style="color:var(--text3)">Nonce</td><td>${data.nonce}</td></tr>
12171228
<tr><td style="color:var(--text3)">Type</td><td><span class="badge badge-primary">${escapeHtml(data.tx_type || data.payload_type || 'Unknown')}</span></td></tr>
12181229
<tr><td style="color:var(--text3)">Timestamp</td><td>${new Date(data.timestamp).toLocaleString()}</td></tr>
1219-
</tbody></table>
1230+
</tbody></table></div>
12201231
</div>`;
12211232
} catch(e) { el.innerHTML = `<div class="alert alert-error">${escapeHtml(e.message)}</div>`; }
12221233
}
@@ -1232,14 +1243,14 @@
12321243
const data = await resp.json();
12331244
const statusColor = data.status === 'Active' ? 'var(--green)' : data.status === 'Released' ? 'var(--primary)' : 'var(--text3)';
12341245
el.innerHTML = `<div class="card" style="background:var(--bg1)">
1235-
<table><tbody>
1246+
<div class="table-wrap"><table><tbody>
12361247
<tr><td style="color:var(--text3);width:120px">Escrow ID</td><td class="mono" style="word-break:break-all">${escapeHtml(data.id || id)}</td></tr>
12371248
<tr><td style="color:var(--text3)">Status</td><td><strong style="color:${statusColor}">${escapeHtml(data.status)}</strong></td></tr>
12381249
<tr><td style="color:var(--text3)">Sender</td><td class="mono" style="word-break:break-all">${escapeHtml(data.sender)}</td></tr>
12391250
<tr><td style="color:var(--text3)">Recipient</td><td class="mono" style="word-break:break-all">${escapeHtml(data.recipient)}</td></tr>
12401251
<tr><td style="color:var(--text3)">Amount</td><td><strong>${fmtBaud(data.amount)} BAUD</strong></td></tr>
12411252
<tr><td style="color:var(--text3)">Deadline</td><td>${data.deadline}</td></tr>
1242-
</tbody></table>
1253+
</tbody></table></div>
12431254
</div>`;
12441255
} catch(e) { el.innerHTML = `<div class="alert alert-error">${escapeHtml(e.message)}</div>`; }
12451256
}
@@ -1359,7 +1370,7 @@
13591370
13601371
<div class="card" style="margin-bottom:20px">
13611372
<div class="section-title">Dashboard Pages Explained</div>
1362-
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:.93em">
1373+
<div class="inline-grid" style="gap:16px;font-size:.93em">
13631374
<div style="padding:14px;background:var(--bg);border-radius:var(--radius-sm);border-left:3px solid var(--primary)">
13641375
<strong style="color:var(--primary)">Dashboard</strong>
13651376
<p style="color:var(--text2);margin-top:4px;line-height:1.5">Your home screen. Shows your BAUD balance, mining rewards, block production stats, and a quick overview of the entire network at a glance.</p>

0 commit comments

Comments
 (0)