From aca081e21524d714771c52528c73b44bedb4c7e2 Mon Sep 17 00:00:00 2001
From: Alexis Hernandez <alexis22229@gmail.com>
Date: Sat, 24 Mar 2018 23:10:54 -0600
Subject: [PATCH] web-ui: Improve AddressDetails view

---
 .../address-details.component.html            | 69 ++++++++++++-------
 1 file changed, 46 insertions(+), 23 deletions(-)

diff --git a/web-ui/src/app/components/address-details/address-details.component.html b/web-ui/src/app/components/address-details/address-details.component.html
index d522a1f..eeedfed 100644
--- a/web-ui/src/app/components/address-details/address-details.component.html
+++ b/web-ui/src/app/components/address-details/address-details.component.html
@@ -4,34 +4,57 @@
   </div>
   <div *ngIf="address != null">
     <div class="row">
-      <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.address' | translate}}</label>
-      <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{addressString}}</label>
+      <h2 class="col-xs-12 col-sm-12 col-md-12 col-lg-12">{{'label.address' | translate}}</h2>
     </div>
     <div class="row">
-      <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.balance' | translate}}</label>
-      <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{address.balance}} {{'label.coinName' | translate}}</label>
-    </div>
-    <div class="row">
-      <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.received' | translate}}</label>
-      <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{address.received}} {{'label.coinName' | translate}}</label>
-    </div>
-    <div class="row">
-      <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.spent' | translate}}</label>
-      <label class="col-sm-3 col-md-2 col-xs-2 col-lg-2">{{getSent(address)}} {{'label.coinName' | translate}}</label>
+      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
+        <table class="table table-condensed table-bordered table-striped table-hover">
+          <thead>
+            <tr>
+              <th class="col-xs-2 col-sm-2 col-md-1 col-lg-1">{{'label.summary' | translate}}</th>
+              <th class="col-xs-2 col-sm-2 col-md-1 col-lg-1"></th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr>
+              <td>{{'label.address' | translate}}</td>
+              <td>{{addressString}}</td>
+            </tr>
+            <tr>
+              <td>{{'label.balance' | translate}}</td>
+              <td>{{address.balance}} {{'label.coinName' | translate}}</td>
+            </tr>
+            <tr>
+              <td>{{'label.received' | translate}}</td>
+              <td>{{address.received}} {{'label.coinName' | translate}}</td>
+            </tr>
+            <tr>
+              <td>{{'label.spent' | translate}}</td>
+              <td>{{getSent(address)}} {{'label.coinName' | translate}}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
+
     <div class="row">
-      <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.transactionCount' | translate}}</label>
-      <label class="col-sm-3 col-md-2 col-xs-2 col-lg-2">{{address.transactions.length}}</label>
-    </div>
+      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
+        <table class="table table-condensed table-bordered table-striped table-hover">
+          <thead>
+            <tr>
+              <th class="col-xs-2 col-sm-2 col-md-1 col-lg-1">{{'label.transactions' | translate}} ({{address.transactions.length}})</th>
+            </tr>
+          </thead>
 
-    <div>
-      <div class="row">
-        <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.transactions' | translate}}</label>
-      </div>
-      <div class="row" *ngFor="let item of address.transactions">
-        <div class="col-sm-2 col-md-1 col-xs-1 col-lg-1">
-          <a routerLink="/transactions/{{item}}">{{item}}</a>
-        </div>
+          <tbody>
+            <tr *ngFor="let item of address.transactions">
+              <td>
+                <a routerLink="/transactions/{{item}}">{{item}}</a>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
   </div>