move ellipsis to global styles

app/src/app/app.scss

@@ -7,7 +7,14 @@
 // styles are for the entire app and not just one component.
 // Additionally, this file can be also used as an entry point
 // to import other Sass files to be included in the output CSS.
-//
+
+.ellipsis {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 // Shared Sass variables, which can be used to adjust Ionic's
 // default Sass variables, belong in "theme/variables.scss".
 //

app/src/components/transaction/transaction.html

@@ -57,7 +57,9 @@
           </div>
 
           <div item-end>
-            {{ vout.value + ' BTC' }} <span [hidden]="!vout.spentTxId">(S)</span><span [hidden]="vout.spentTxId">(U)</span>
+            {{ vout.value + ' BTC' }}
+            <span [hidden]="!vout.spentTxId">(S)</span>
+            <span [hidden]="vout.spentTxId">(U)</span>
           </div>
         </ion-item>
       </ion-list>

app/src/components/transaction/transaction.scss

@@ -8,11 +8,4 @@ transaction {
       border: 1px solid #eee;
     }
   }
-
-  .ellipsis {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
 }

app/src/pages/block-detail/block-detail.html

@@ -4,7 +4,7 @@
 
 <ion-content padding>
   <h1>Block #{{ block.height }}</h1>
-  <p>BlockHash {{ block.hash }}</p>
+  <p><b>BlockHash</b> <span class="ellipsis">{{ block.hash }}</span></p>
 
   <h2>Summary</h2>
 
@@ -41,7 +41,7 @@
     </ion-item>
     <ion-item>
       Merkle Root
-      <span item-end>
+      <span item-end class="ellipsis">
         {{ block.merkleroot }}
       </span>
     </ion-item>

app/src/pages/transaction/transaction.html

@@ -4,7 +4,7 @@
 
 <ion-content padding>
   <h1>Transaction</h1>
-  <p>{{ tx.txid }}</p>
+  <p><b>Transaction</b> <span class="ellipsis">{{ tx.txid }}</span></p>
 
   <h2>Summary</h2>