From f0dbd5b5d69791babe9d746a4c755196d041374d Mon Sep 17 00:00:00 2001
From: Darren Nelsen <darren@bitpay.com>
Date: Mon, 25 Sep 2017 11:10:28 -0400
Subject: [PATCH] used semantic ion-note tag for block data fields; fixed
 spacing of merkle root field

---
 app/src/app/app.scss                         |  8 +++
 app/src/pages/block-detail/block-detail.html | 52 ++++++++++----------
 2 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/app/src/app/app.scss b/app/src/app/app.scss
index 806571a..7528722 100644
--- a/app/src/app/app.scss
+++ b/app/src/app/app.scss
@@ -29,6 +29,14 @@ body {
     color: #999;
     font-size: 1.4rem;
   }
+
+  ion-note {
+    color: #999;
+    max-width: 50%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 
 .grid--table {
diff --git a/app/src/pages/block-detail/block-detail.html b/app/src/pages/block-detail/block-detail.html
index 6979840..0103df0 100644
--- a/app/src/pages/block-detail/block-detail.html
+++ b/app/src/pages/block-detail/block-detail.html
@@ -16,81 +16,81 @@
     <ion-list *ngIf="!loading" class="list--summary">
       <ion-item>
         Number of Transactions
-        <span item-end>
+        <ion-note item-end>
           {{ block.tx.length }}
-        </span>
+        </ion-note>
       </ion-item>
       <ion-item>
         Height
-        <span item-end>
+        <ion-note item-end>
           {{ block.height }} <span [hidden]="!block.isMainChain">(Mainchain)</span>
-        </span>
+        </ion-note>
       </ion-item>
       <ion-item>
         Block Reward
-        <span item-end>
+        <ion-note item-end>
           {{ currency.getConversion(block.reward) }}
-        </span>
+        </ion-note>
       </ion-item>
       <ion-item>
         Timestamp
-        <span item-end>
+        <ion-note item-end>
           {{ block.time * 1000 | date:'medium' }}
-        </span>
+        </ion-note>
       </ion-item>
       <ion-item>
         Mined by
-        <span item-end *ngIf="block.poolInfo">
+        <ion-note item-end *ngIf="block.poolInfo">
           <a href="{{ block.poolInfo.url }}">{{ block.poolInfo.poolName }}</a>
-        </span>
+        </ion-note>
       </ion-item>
       <ion-item>
         Merkle Root
-        <span item-end class="ellipsis">
+        <ion-note item-end>
           {{ block.merkleroot }}
-        </span>
+        </ion-note>
       </ion-item>
       <ion-item>
         Previous Block
-        <span item-end>
+        <ion-note item-end>
           <a (click)="goToPreviousBlock()">{{ block.height - 1 }}</a>
-        </span>
+        </ion-note>
       </ion-item>
       <ion-item>
         Difficulty
-        <span item-end>
+        <ion-note item-end>
           {{ block.difficulty }}
-        </span>
+        </ion-note>
       </ion-item>
       <ion-item>
         Bits
-        <span item-end>
+        <ion-note item-end>
           {{ block.bits }}
-        </span>
+        </ion-note>
       </ion-item>
       <ion-item>
         Size (bytes)
-        <span item-end>
+        <ion-note item-end>
           {{ block.size }}
-        </span>
+        </ion-note>
       </ion-item>
       <ion-item>
         Version
-        <span item-end>
+        <ion-note item-end>
           {{ block.version }}
-        </span>
+        </ion-note>
       </ion-item>
       <ion-item>
         Nonce
-        <span item-end>
+        <ion-note item-end>
           {{ block.nonce }}
-        </span>
+        </ion-note>
       </ion-item>
       <ion-item>
         Next Block
-        <span item-end>
+        <ion-note item-end>
           <a (click)="goToNextBlock()">{{ block.height + 1 }}</a>
-        </span>
+        </ion-note>
       </ion-item>
     </ion-list>