feat: Make transactions page nicer for small screens

render.py

@@ -178,13 +178,13 @@ def transactions(txs):
             amount = f"<span style='color: gray;'>0.00</span>"
 
 
-        hash = f"<a target='_blank' href='{TX_EXPLORER_URL}{hash}'>{hash[:8]}...</a>"
+        # hash = f"<a target='_blank' href='{TX_EXPLORER_URL}{hash}'>{hash[:8]}...</a>"
         if confirmations < 5:
-            confirmations = f"<td style='background-color: red;'>{confirmations}</td>" 
+            confirmations = f"<td class='hide-mobile' style='background-color: red;'>{confirmations}</td>" 
         else:
-            confirmations = f"<td>{confirmations:,}</td>"
+            confirmations = f"<td class='hide-mobile'>{confirmations:,}</td>"
 
-        html += f'<tr><td>{humanAction}</td><td>{address}</td><td>{hash}</td>{confirmations}<td class="amount-column">{amount} HNS</td></tr>'
+        html += f'<tr><td><a style="color:var(--bs-body-color);" target="_blank" href="{TX_EXPLORER_URL}{hash}">{humanAction}</a></td><td class="hide-mobile">{address}</td>{confirmations}<td class="amount-column">{amount} HNS</td></tr>'
     return html
 
 

templates/tx.html

@@ -82,10 +82,9 @@
     <table id="dataTable" class="table my-0">
         <thead>
             <tr>
-                <th>Action</th>
-                <th>Address</th>
-                <th>Tx</th>
-                <th>Confirmations</th>
+                <th>Transaction</th>
+                <th class="hide-mobile">Address</th>
+                <th class="hide-mobile">Confirmations</th>
                 <th class="amount-column">Amount</th>
             </tr>
         </thead>
@@ -103,10 +102,9 @@
         </tbody>
         <tfoot>
             <tr>
-                <td><strong>Action</strong></td>
-                <td><strong>Address</strong></td>
-                <td><strong>Tx</strong></td>
-                <td><strong>Confirmations</strong></td>
+                <td><strong>Transaction</strong></td>
+                <td class="hide-mobile"><strong>Address</strong></td>
+                <td class="hide-mobile"><strong>Confirmations</strong></td>
                 <td class="amount-column"><strong>Amount</strong></td>
             </tr>
         </tfoot>