From 29a8f6a09e7835dc011267681ed91861a11643fe Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sun, 23 Jun 2024 03:17:33 +0000
Subject: [PATCH] Refactor address table to improve cell wrapping

---
 .../components/address/address.component.html | 121 ++++++++----------
 frontend/src/styles.scss                      |   8 ++
 2 files changed, 61 insertions(+), 68 deletions(-)

diff --git a/frontend/src/app/components/address/address.component.html b/frontend/src/app/components/address/address.component.html
index cc4858355..8fc09345f 100644
--- a/frontend/src/app/components/address/address.component.html
+++ b/frontend/src/app/components/address/address.component.html
@@ -24,39 +24,42 @@
           <div class="col-sm">
             <table class="table table-borderless table-striped address-table">
               <tbody>
-                <ng-container *ngTemplateOutlet="balanceRow"></ng-container>
-                <ng-container *ngTemplateOutlet="pendingBalanceRow"></ng-container>
-                <ng-container *ngTemplateOutlet="utxoRow"></ng-container>
-                <ng-container *ngTemplateOutlet="pendingUtxoRow"></ng-container>
+                <tr><ng-container *ngTemplateOutlet="balanceRow"></ng-container></tr>
+                <tr><ng-container *ngTemplateOutlet="pendingBalanceRow"></ng-container></tr>
+                <tr><ng-container *ngTemplateOutlet="utxoRow"></ng-container></tr>
+                <tr><ng-container *ngTemplateOutlet="pendingUtxoRow"></ng-container></tr>
                 @if (network === 'liquid' || network === 'liquidtestnet') {
-                  <ng-container *ngTemplateOutlet="liquidRow"></ng-container>
+                  <tr><ng-container *ngTemplateOutlet="liquidRow"></ng-container></tr>
                 } @else {
-                  <ng-container *ngTemplateOutlet="volumeRow"></ng-container>
+                  <tr><ng-container *ngTemplateOutlet="volumeRow"></ng-container></tr>
                 }
-                <ng-container *ngTemplateOutlet="typeRow"></ng-container>
+                <tr><ng-container *ngTemplateOutlet="typeRow"></ng-container></tr>
               </tbody>
             </table>
           </div>
         } @else {
           <div class="col-sm">
-            <table class="table table-borderless table-striped table-fixed address-table">
+            <table class="table table-borderless dual-col-striped table-fixed address-table">
               <tbody>
-                <ng-container *ngTemplateOutlet="balanceRow"></ng-container>
-                <ng-container *ngTemplateOutlet="utxoRow"></ng-container>
-                @if (network === 'liquid' || network === 'liquidtestnet') {
-                  <ng-container *ngTemplateOutlet="liquidRow"></ng-container>
-                } @else {
-                  <ng-container *ngTemplateOutlet="volumeRow"></ng-container>
-                }
-              </tbody>
-            </table>
-          </div>
-          <div class="col-sm">
-            <table class="table table-borderless table-striped table-fixed address-table">
-              <tbody>
-                <ng-container *ngTemplateOutlet="pendingBalanceRow"></ng-container>
-                <ng-container *ngTemplateOutlet="pendingUtxoRow"></ng-container>
-                <ng-container *ngTemplateOutlet="typeRow"></ng-container>
+                <tr>
+                  <ng-container *ngTemplateOutlet="balanceRow"></ng-container>
+                  <ng-container *ngTemplateOutlet="spacerCell"></ng-container>
+                  <ng-container *ngTemplateOutlet="pendingBalanceRow"></ng-container>
+                </tr>
+                <tr>
+                  <ng-container *ngTemplateOutlet="utxoRow"></ng-container>
+                  <ng-container *ngTemplateOutlet="spacerCell"></ng-container>
+                  <ng-container *ngTemplateOutlet="pendingUtxoRow"></ng-container>
+                </tr>
+                <tr>
+                  @if (network === 'liquid' || network === 'liquidtestnet') {
+                    <ng-container *ngTemplateOutlet="liquidRow"></ng-container>
+                  } @else {
+                    <ng-container *ngTemplateOutlet="volumeRow"></ng-container>
+                  }
+                  <ng-container *ngTemplateOutlet="spacerCell"></ng-container>
+                  <ng-container *ngTemplateOutlet="typeRow"></ng-container>
+                </tr>
               </tbody>
             </table>
           </div>
@@ -159,30 +162,21 @@
           </div>
         } @else {
           <div class="col-sm">
-            <table class="table table-borderless table-striped table-fixed">
+            <table class="table table-borderless dual-col-striped table-fixed">
               <tbody>
                 <tr>
                   <td colspan="2"><span class="skeleton-loader"></span></td>
-                </tr>
-                <tr>
+                  <ng-container *ngTemplateOutlet="spacerCell"></ng-container>
                   <td colspan="2"><span class="skeleton-loader"></span></td>
                 </tr>
                 <tr>
                   <td colspan="2"><span class="skeleton-loader"></span></td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div class="col-sm">
-            <table class="table table-borderless table-striped table-fixed">
-              <tbody>
-                <tr>
+                  <ng-container *ngTemplateOutlet="spacerCell"></ng-container>
                   <td colspan="2"><span class="skeleton-loader"></span></td>
                 </tr>
                 <tr>
                   <td colspan="2"><span class="skeleton-loader"></span></td>
-                </tr>
-                <tr>
+                  <ng-container *ngTemplateOutlet="spacerCell"></ng-container>
                   <td colspan="2"><span class="skeleton-loader"></span></td>
                 </tr>
               </tbody>
@@ -234,61 +228,52 @@
   </div>
 </ng-template>
 
+<ng-template #spacerCell>
+  <td class="spacer"></td>
+</ng-template>
 
 <ng-template #balanceRow>
-  <tr>
-    <td i18n="address.confirmed-balance">Confirmed balance</td>
-    <td *ngIf="chainStats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="chainStats.balance" [noFiat]="true"></app-amount> <span class="fiat"><app-fiat [value]="chainStats.balance"></app-fiat></span></td>
-  </tr>
+  <td i18n="address.confirmed-balance">Confirmed balance</td>
+  <td *ngIf="chainStats.funded_txo_sum !== undefined; else confidentialTd" class="wrap-cell"><app-amount [satoshis]="chainStats.balance" [noFiat]="true"></app-amount> <span class="fiat"><app-fiat [value]="chainStats.balance"></app-fiat></span></td>
 </ng-template>
 
 <ng-template #pendingBalanceRow>
-  <tr>
-    <td i18n="address.unconfirmed-balance" class="font-italic">Unconfirmed balance</td>
-    <td *ngIf="mempoolStats.funded_txo_sum !== undefined; else confidentialTd" class="font-italic"><app-amount [satoshis]="mempoolStats.balance" [noFiat]="true" [addPlus]="true"></app-amount> <span class="fiat"><app-fiat [value]="mempoolStats.balance"></app-fiat></span></td>
-  </tr>
+  <td i18n="address.unconfirmed-balance" class="font-italic">Unconfirmed balance</td>
+  <td *ngIf="mempoolStats.funded_txo_sum !== undefined; else confidentialTd" class="font-italic wrap-cell"><app-amount [satoshis]="mempoolStats.balance" [noFiat]="true" [addPlus]="true"></app-amount> <span class="fiat"><app-fiat [value]="mempoolStats.balance"></app-fiat></span></td>
 </ng-template>
 
 <ng-template #utxoRow>
-  <tr>
-    <td i18n="address.confirmed-utxos" i18n-ngbTooltip="unspent-transaction-outputs" ngbTooltip="unspent transaction outputs">Confirmed UTXOs</td>
-    <td>{{ chainStats.utxos }}</td>
-  </tr>
+  <td i18n="address.confirmed-utxos">Confirmed UTXOs</td>
+  <td class="wrap-cell">{{ chainStats.utxos }}</td>
 </ng-template>
 
 <ng-template #pendingUtxoRow>
-  <tr>
-    <td i18n="address.unconfirmed-utxos" class="font-italic">Unconfirmed UTXOs</td>
-    <td class="font-italic">{{ mempoolStats.utxos > 0 ? '+' : ''}}{{ mempoolStats.utxos }}</td>
-  </tr>
+  <td i18n="address.unconfirmed-utxos" class="font-italic">Unconfirmed UTXOs</td>
+  <td class="font-italic wrap-cell">{{ mempoolStats.utxos > 0 ? '+' : ''}}{{ mempoolStats.utxos }}</td>
 </ng-template>
 
 <ng-template #volumeRow>
-  <tr>
-    <td i18n="address.total-received">Total received</td>
-    <td *ngIf="chainStats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="chainStats.totalReceived"></app-amount></td>
-  </tr>
+  <td i18n="address.total-received">Total received</td>
+  <td *ngIf="chainStats.funded_txo_sum !== undefined; else confidentialTd" class="wrap-cell"><app-amount [satoshis]="chainStats.totalReceived"></app-amount></td>
 </ng-template>
 
 <ng-template #typeRow>
-  <tr>
-    <td i18n="address.type">Type</td>
-    <td class="wrap-cell">
-      <span placement="bottom" class="badge badge-primary">
-        <app-address-type [address]="addressTypeInfo"></app-address-type>
-      </span>
-      <app-address-labels [channel]="exampleChannel" [address]="addressTypeInfo" class="ml-1"></app-address-labels>
-    </td>
-  </tr>
+  <td i18n="address.type">Type</td>
+  <td class="wrap-cell">
+    <span placement="bottom" class="badge badge-primary">
+      <app-address-type [address]="addressTypeInfo"></app-address-type>
+    </span>
+    <app-address-labels [channel]="exampleChannel" [address]="addressTypeInfo" class="ml-1"></app-address-labels>
+  </td>
 </ng-template>
 
 <ng-template #liquidRow>
-  <tr *ngIf="addressInfo && addressInfo.unconfidential">
+  <ng-container *ngIf="addressInfo && addressInfo.unconfidential">
     <td i18n="address.unconfidential">Unconfidential</td>
     <td>
       <app-truncate [text]="addressInfo.unconfidential" [lastChars]="8" [textAlign]="isMobile ? 'end' : 'start'" [link]="['/address/' | relativeUrl, addressInfo.unconfidential]">
         <app-clipboard [text]="addressInfo.unconfidential"></app-clipboard>
       </app-truncate>
     </td>
-  </tr>
+  </ng-container>
 </ng-template>
\ No newline at end of file
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 6ffa6a134..929a55c97 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -375,6 +375,14 @@ main {
   background-color: var(--stat-box-bg);
 }
 
+.dual-col-striped tbody tr:nth-of-type(odd) td:not(.spacer) {
+  background-color: var(--stat-box-bg);
+}
+
+.dual-col-striped tbody tr td.spacer {
+  width: 30px;
+}
+
 .bordertop {
   border-top: 1px solid #4c4c4c;
 }