From a3560c261579eee86bfc848a2ad92f7772e849f8 Mon Sep 17 00:00:00 2001
From: Nathan Woodburn <github@nathan.woodburn.au>
Date: Thu, 26 Jun 2025 13:52:43 +1000
Subject: [PATCH] feat: Make transactions page nicer for small screens

---
 FireWalletBrowser.bsdesign | Bin 342284 -> 342287 bytes
 render.py                  |   8 ++++----
 templates/tx.html          |  14 ++++++--------
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/FireWalletBrowser.bsdesign b/FireWalletBrowser.bsdesign
index b4b7aed0de537979c791b4c76ffe3699e200cc9f..b0133cecfab132416a988c2f94c9565e7bbe98bb 100644
GIT binary patch
delta 1163
zcmV;61a$k1@)VEq6p&yA(*#7})PZG%WdVg{0)=G*g=GY_Wd%tze{Be%R+A0#d&T!0
zU>7MAr;c^~(sd~c!?mxwA$||jp<v{zTn&eut=Y2L2EVWPo^xTVnR-v&BRv-_#<_`{
zQ)Y-?TePR<QB9ld>k(-Iq2xZ(Np^IBL%cA6e!FA+Xs!}h$YkZ9+$+V^rpO8d>~m9}
zbbLvZbA}(wEct~4e~Ll*!^ESGa2P?)o7e;Fx`<EW2l+~kMx)i_T^Bu@;NdGgx1@GG
zEHGzR+#`ROR+D9DwV5GSA-v?;&HXZ+vhg1w?4g+{?BpnO-CL|j2wQPuxYw<aQR4U0
z8$`9`JT=f%kW2A;uz1I8JJ8$~T79_ry%ay0+Ea^1%5E-We?D7H!H%xA(C_#y&f)_7
zyGxviGu8%l-8UoTvky3A$Vc?_<n=EfZ{*2?(++Y^&Ok5n#e{>?Ct#Y~l9$6{QrBvO
z=~RB2&0feJ@>jXR+sO_4h`sR;|M+V1-aS3ZZu^rbsS(s(|CQV?8^+)W;(9qkvkBhv
z9KIC!%b$9@fBp2!od4hKCpD@cghn;{@+5ih1{)y%RLK_v+SfpTZu~DK{^^rUUoJ0r
zziE02aSw=}8i-OtpUnTv|A`rC2p072?&Am024DCdS&6|(X5~V^FPPmMev>Qk!!)_&
zOwg5}q%SYBH>Ze2)SvrdrYBebYc|2JNF+<>wF38;e+>Y1xJs2X^^4z4JlTK^y%#w*
z`FG$#hB%d}LkEy*aLDJ;N61BP`kF{wkQ`FvTq~{oOpxmn<K<@NvN_zldMYL<XW=+y
z5)a8qJUtOJD=BK8*Iu2R0lB&_9(wtcO&9hp#2#`1BVztjw@=phB=x51%PiR{@gC32
zT0CJ+e?++k`iak*IU`HgrVB&l0^*yG1w<TBhLKP-dc}Nmm;W9iI=Mw2au}ay_+NhB
z`A55BiLH48o`O^3p@0o8o`9#|q+|VdV$Qc5-$!G%-S|)E#!v3Rce2^D#m}CPAM1C@
zY;D!v5U1XTGH7uc;NfSfrApsJA1PbnMEUr!e}1XV4OIKeH<)orp+tn0=O2Ab2wQ4h
z-!`O>Vdv|_?&;ecPr0i#>r)k6W$M|YL+A$n?_=?2DbKgg%2~nnovH=1e_W6vQ{@~I
zOlXmCL|Y~StXT&3kn42(1)L9VJFC3c;YM#a@a-?~7E>f)8^PuI<&Rcwq|&PC8{0d#
ze?x~7&$Aif^(c*`4Pg!EO=WbsEsSu^L6m<uu(`Z>n9%Qg$UdIBT?^l?q`8;^i37?3
zvF~`1i{ATh#sT5j7vc?hABT7zQa;7B<Ghb<;@@=2K|n$lCfEY6JkkfBRGV`9^4obZ
zWIS4$>vQKOYq*2`?4XP<bb8D?*|f@#X)hx-AT&EF6z%f^zl>WKj{Tcrk{`LhBMwrF
zn|?95k%S%)^eXf1rs}Wt{kiyOo#{T-_s`Gye;&@F{OM+|5IMwmWvgIY6!kn2t#oPW
dFCT~l6aLOy?oi0ob6T_6{{d92aQ>6I7628BS#JOU

delta 1160
zcmV;31b6$7@)V5n6p&yA;S_;U=z(R0WdVg{0)=G*g=GY_Wd%tzfBjO(pH`C%7Iko4
zio$S7kGt`bA8&}?!*nQ^_L4#3w}L~?!faVtqhnpa6yI|$Y&BEw#CxRQyTv%?kn_h3
zQEQ9#)SRg)l6^fQtsRuyXFAD_E^vq!2GDPJtRKx4;mVh+5|n$TxY`s?VSs&Z){{;y
zX<p9oUYQZUa6mCAe}9;G)DaFN=y?-+fL#~yN&FyRsnKY(n!M|xXA}H-h3A%(t%n8X
z?23Ej57TP03|%%egee4-T)Vknrc*ZlBZNIPGX<L*Wv+XR^$1}rZUXnZ6*5Zve!Lmf
z*PI8=T%mWz>X-2CvU=~i{qx|33pY~y#A-t=9x1!CjLB>@e+A#U*3!M>w>U2g^zSZl
zBF;e@&~@L8kk3BgkRcz@)05Y~e7uoI3{E)6Jvjrt$QM%%PM?5ja!X$Kj!C7e4W?81
zX*PQyd&pnq?rtYH>?8KZL;T~b$$R(oB)jKNo}@-l8~s;uzib$T9f<4Y2+byV%aip|
zv@d_^@%Ga%e{+t0v!7I*eh{kD?8}qny&G(R{8J@J5NKZm{kieKkoc!hGJUyV;QglQ
zCB!`-erg~}34JpEGyf-Mq#^jvyStAcKpTAF8)PN!COMT0{l4IIZ}?5Fzz@^pmNP+D
zf|9<x$ljbH7Eyohhnb#S{jb>szao(pq1OuBV>STLf8n}Q&eSh{H}PZxHuPTP+~nVZ
z3mM{6rcM_?>boJIM;{><x#?>naY1q#k#nuo?=wNJPmGtFnak#IH|nXFq@0E0lu0}!
zC-L+|%&erSc}9D6at7q;zIf>6Pc~iHw-9^C1&oOKPu)IQ-;>mvsxPx-tHgUeGi&jL
zIT7Wmf95AXZ|00FU7Icpkqd}#J{AxGKN&_s(dZTP&0YR`gy`fJdB|aWp5cG_!R8<B
zjwQC{33v)ljfVm@xOf7df|HK*+le{fa(o|+*>>YUof|*71K-JJ&lW#qK7Op<DYLaz
zdqW&=8_IIUX@JL>rIspv4}ErQiKFA=$NHr*e>YI=E8k$oC4~|ZR-PmDEg@{F8GYN>
zL57{L6T7Exb3Ape)+|I-a5<@Gi%y#xIJ%F;aiv_`I{jt^A9t$g%l-jCip+^~NHC#A
z;tp*Y?Z0Nd*F&z;@mFd-xRI>#?u8q@-N3iMz*|g_#AgJT=a)ZPxgklb=4ov2#SR@x
ze>~4-gcqJPvNMF)n>Urwx3(~pIR`ra;RxpPCR{?l?;-nm3Un=eyOJhd3djv82gJVP
zMJ{^pzZnOFgItI=<b53Cc}O`A(;o6Zx`}_&xdj0US(tzbyz)pNd{S-7zsqmu!I1H=
zXs*wlo2=mu_OpXBzR>A0?_|>|L%xjIW`NM_s8F=e5BxH2T{!k{ib;Otj*U1PEpGb7
z<VF%>K+vm9tedL8*7xV)pLM4DSl>TC=l^-!igKKry+Y&=-<7R`ZBf+oL|D?LrN4Y2
a4ovtvZ@EJuQ_pG5X8#8o(wXOcxfTF6D^95Z

diff --git a/render.py b/render.py
index ef45ca1..c770a1e 100644
--- a/render.py
+++ b/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
 
 
diff --git a/templates/tx.html b/templates/tx.html
index c1f4d92..d60a5d8 100644
--- a/templates/tx.html
+++ b/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>