generated from nathanwoodburn/python-webserver-template
fix: Cleanup mobile
This commit is contained in:
@@ -161,6 +161,20 @@ h1 {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
.mobile-accordion summary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-accordion .accordion-content {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.stats-accordion .stats-grid {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.search-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
@@ -288,6 +302,14 @@ th {
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.layout {
|
||||
padding: 14px 10px 24px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.search-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -299,12 +321,94 @@ th {
|
||||
.stats-grid,
|
||||
.stats-grid.compact {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 8px 9px;
|
||||
}
|
||||
|
||||
.stat-card strong {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
margin-bottom: 10px;
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
.mobile-accordion {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mobile-accordion summary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
padding: 10px 12px;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
border-bottom: 1px solid rgba(255, 107, 53, 0.2);
|
||||
background: rgba(0, 0, 0, 0.14);
|
||||
}
|
||||
|
||||
.mobile-accordion summary::marker,
|
||||
.mobile-accordion summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-accordion summary::after {
|
||||
content: "+";
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.mobile-accordion[open] summary::after {
|
||||
content: "-";
|
||||
}
|
||||
|
||||
.mobile-accordion .accordion-content {
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
.mobile-accordion .panel-head {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stats-accordion .accordion-content {
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.stats-accordion .stats-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.stats-accordion .stat-card {
|
||||
padding: 6px 7px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.stats-accordion .stat-card span {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.stats-accordion .stat-card strong {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
h1 {
|
||||
font-size: clamp(26px, 8vw, 36px);
|
||||
font-size: clamp(24px, 8vw, 32px);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.stats-grid,
|
||||
@@ -312,8 +416,12 @@ th {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stats-accordion .stats-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 10px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
|
||||
@@ -37,7 +37,16 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="stats-grid" id="poolSummary"></section>
|
||||
<details class="panel mobile-accordion stats-accordion" data-accordion="summary" open>
|
||||
<summary>Pool Stats</summary>
|
||||
<div class="accordion-content">
|
||||
<div class="panel-head">
|
||||
<h2>Pool Stats</h2>
|
||||
<p>Live network and reward snapshot</p>
|
||||
</div>
|
||||
<section class="stats-grid" id="poolSummary"></section>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<section class="panel search-panel">
|
||||
<div class="panel-head">
|
||||
@@ -52,89 +61,101 @@
|
||||
<div class="stats-grid compact" id="minerSummary"></div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<div class="panel-head">
|
||||
<h2>Workers</h2>
|
||||
<p id="workerCountLabel">Pool workers</p>
|
||||
<details class="panel mobile-accordion" data-accordion="workers" open>
|
||||
<summary>Workers</summary>
|
||||
<div class="accordion-content">
|
||||
<div class="panel-head">
|
||||
<h2>Workers</h2>
|
||||
<p id="workerCountLabel">Pool workers</p>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Hashrate</th>
|
||||
<th>Accepted</th>
|
||||
<th>Rejected</th>
|
||||
<th>Stale</th>
|
||||
<th>Blocks</th>
|
||||
<th>Est. Daily (FBC)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="workersBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Hashrate</th>
|
||||
<th>Accepted</th>
|
||||
<th>Rejected</th>
|
||||
<th>Stale</th>
|
||||
<th>Blocks</th>
|
||||
<th>Est. Daily (FBC)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="workersBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</details>
|
||||
|
||||
<section class="panel">
|
||||
<div class="panel-head">
|
||||
<h2>Blocks</h2>
|
||||
<p id="blockCountLabel">Recent block history</p>
|
||||
<details class="panel mobile-accordion" data-accordion="blocks" open>
|
||||
<summary>Blocks</summary>
|
||||
<div class="accordion-content">
|
||||
<div class="panel-head">
|
||||
<h2>Blocks</h2>
|
||||
<p id="blockCountLabel">Recent block history</p>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Height</th>
|
||||
<th>Status</th>
|
||||
<th>Reward (FBC)</th>
|
||||
<th>Found By</th>
|
||||
<th>Confirmations</th>
|
||||
<th>Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="blocksBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Height</th>
|
||||
<th>Status</th>
|
||||
<th>Reward (FBC)</th>
|
||||
<th>Found By</th>
|
||||
<th>Confirmations</th>
|
||||
<th>Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="blocksBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</details>
|
||||
|
||||
<section class="panel">
|
||||
<div class="panel-head">
|
||||
<h2>Balances</h2>
|
||||
<details class="panel mobile-accordion" data-accordion="balances" open>
|
||||
<summary>Balances</summary>
|
||||
<div class="accordion-content">
|
||||
<div class="panel-head">
|
||||
<h2>Balances</h2>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Address</th>
|
||||
<th>Balance (FBC)</th>
|
||||
<th>Total Earned (FBC)</th>
|
||||
<th>Total Paid (FBC)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="balancesBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Address</th>
|
||||
<th>Balance (FBC)</th>
|
||||
<th>Total Earned (FBC)</th>
|
||||
<th>Total Paid (FBC)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="balancesBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</details>
|
||||
|
||||
<section class="panel">
|
||||
<div class="panel-head">
|
||||
<h2>Payouts</h2>
|
||||
<details class="panel mobile-accordion" data-accordion="payouts" open>
|
||||
<summary>Payouts</summary>
|
||||
<div class="accordion-content">
|
||||
<div class="panel-head">
|
||||
<h2>Payouts</h2>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Address</th>
|
||||
<th>Amount (FBC)</th>
|
||||
<th>Status</th>
|
||||
<th>TXID</th>
|
||||
<th>Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="payoutsBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Address</th>
|
||||
<th>Amount (FBC)</th>
|
||||
<th>Status</th>
|
||||
<th>TXID</th>
|
||||
<th>Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="payoutsBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</details>
|
||||
|
||||
<section class="panel setup-panel">
|
||||
<div class="panel-head">
|
||||
@@ -144,7 +165,7 @@
|
||||
<a class="setup-link" href="/setup-miner">Open Miner Setup Guide</a>
|
||||
</section>
|
||||
<footer class="footer">
|
||||
<p>Powered by <a href="https://nathan.woodburn.au" target="_blank" rel="noopener">Nathan.Woodburn/</a>
|
||||
<p>Powered by <a href="https://nathan.woodburn.au" target="_blank" rel="noopener">Nathan.Woodburn/</a></p>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
@@ -211,6 +232,17 @@
|
||||
stamp.textContent = `Last update: ${new Date().toLocaleString()}`;
|
||||
}
|
||||
|
||||
|
||||
function initMobileAccordions() {
|
||||
const accordions = document.querySelectorAll('.mobile-accordion');
|
||||
if (!accordions.length) return;
|
||||
|
||||
const isCompact = window.matchMedia('(max-width: 720px)').matches;
|
||||
accordions.forEach((accordion, idx) => {
|
||||
accordion.open = !isCompact || idx === 0;
|
||||
});
|
||||
}
|
||||
|
||||
async function loadOverview() {
|
||||
const res = await fetch("/api/v1/pool/overview");
|
||||
if (!res.ok) {
|
||||
@@ -424,6 +456,7 @@
|
||||
}
|
||||
});
|
||||
|
||||
initMobileAccordions();
|
||||
refreshAll();
|
||||
setInterval(refreshAll, refreshMs);
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user