From 74a93877b9e17b22b16d8ae76f94a912696e1303 Mon Sep 17 00:00:00 2001
From: Nathan Woodburn <github@nathan.woodburn.au>
Date: Sat, 4 Apr 2026 19:39:08 +1100
Subject: [PATCH] fix: Cleanup mobile

---
 templates/assets/css/index.css | 112 ++++++++++++++++++-
 templates/index.html           | 189 +++++++++++++++++++--------------
 2 files changed, 221 insertions(+), 80 deletions(-)

diff --git a/templates/assets/css/index.css b/templates/assets/css/index.css
index 163177f..d391104 100644
--- a/templates/assets/css/index.css
+++ b/templates/assets/css/index.css
@@ -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 {
diff --git a/templates/index.html b/templates/index.html
index 627157c..6085f69 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -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>