Making block, transaction, and address view responsive.

closes #43

frontend/src/app/components/address/address.component.html

@@ -1,6 +1,9 @@
 <div class="container-xl">
   <h1 style="float: left;">Address</h1>
-  <a [routerLink]="['/address/', addressString]" style="line-height: 56px; margin-left: 10px;">{{ addressString }}</a>
+  <a [routerLink]="['/address/', addressString]" style="line-height: 56px; margin-left: 10px;">
+    <span class="d-inline d-lg-none">{{ addressString | shortenString : 24 }}</span>
+    <span class="d-none d-lg-inline">{{ addressString }}</span>
+  </a>
   <app-clipboard [text]="addressString"></app-clipboard>
   <br>
 
@@ -28,7 +31,7 @@
             </tbody>
           </table>
         </div>
-        <div class="col text-right">
+        <div class="col qrcode-col">
           <div class="qr-wrapper">
             <app-qrcode [data]="address.address"></app-qrcode>
           </div>

frontend/src/app/components/address/address.component.scss

@@ -8,4 +8,20 @@
   padding-bottom: 5px;
   display: inline-block;
   margin-right: 25px;
+}
+
+@media (min-width: 576px) {
+  .qrcode-col {
+    text-align: right;
+  }
+}
+@media (max-width: 575.98px) {
+  .qrcode-col {
+    text-align: center;
+  }
+
+  .qrcode-col > div {
+    margin-top: 20px;
+    margin-right: 0px;
+  }
 }

frontend/src/app/components/block/block.component.html

@@ -14,15 +14,20 @@
 
     <div class="box">
       <div class="row">
-        <div class="col">
+        <div class="col-sm">
           <table class="table table-borderless table-striped">
             <tbody>
               <tr>
-                <td>Timestamp</td>
-                <td>{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }} <i>(<app-time-since [time]="block.timestamp"></app-time-since> ago)</i></td>
+                <td class="mobile-width">Timestamp</td>
+                <td>
+                  {{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
+                  <div class="lg-inline">
+                    <i>(<app-time-since [time]="block.timestamp"></app-time-since> ago)</i>
+                  </div>
+                </td>
               </tr>
               <tr>
-                <td>Number of transactions</td>
+                <td>Transactions</td>
                 <td>{{ block.tx_count }}</td>
               </tr>
               <tr>
@@ -36,11 +41,11 @@
             </tbody>
           </table>
         </div>
-        <div class="col">
+        <div class="col-sm">
           <table class="table table-borderless table-striped">
             <tbody>
               <tr>
-                <td>Hash</td>
+                <td class="mobile-width">Hash</td>
                 <td><a [routerLink]="['/block/', block.id]" title="{{ block.id }}">{{ block.id | shortenString : 16 }}</a> <app-clipboard [text]="block.id"></app-clipboard></td>
               </tr>
               <tr>
@@ -98,14 +103,11 @@
 
     <div class="box">
       <div class="row">
-        <div class="col">
+        <div class="col-sm">
           <table class="table table-borderless table-striped">
             <tbody>
               <tr>
-                <td colspan="2"><span class="skeleton-loader"></span></td>
-              </tr>
-              <tr>
-                <td colspan="2"><span class="skeleton-loader"></span></td>
+                <td class="mobile-width" colspan="2"><span class="skeleton-loader"></span></td>
               </tr>
               <tr>
                 <td colspan="2"><span class="skeleton-loader"></span></td>
@@ -119,9 +121,15 @@
             </tbody>
           </table>
         </div>
-        <div class="col">
+        <div class="col-sm">
           <table class="table table-borderless table-striped">
             <tbody>
+              <tr>
+                <td class="mobile-width" colspan="2"><span class="skeleton-loader"></span></td>
+              </tr>
+              <tr>
+                <td colspan="2"><span class="skeleton-loader"></span></td>
+              </tr>
               <tr>
                 <td colspan="2"><span class="skeleton-loader"></span></td>
               </tr>

frontend/src/app/components/block/block.component.scss

@@ -9,3 +9,7 @@
 .title-block > h1 {
   margin: 0;
 }
+
+.mobile-width {
+  width: 130px;
+}

frontend/src/app/components/latest-transactions/latest-transactions.component.html

@@ -9,8 +9,8 @@
     <ng-container *ngIf="(transactions$ | async) as transactions">
       <ng-template [ngIf]="!isLoading">
         <tr *ngFor="let transaction of transactions">
-          <td class="d-block d-md-none d-xl-none"><a [routerLink]="['/tx/', transaction.txid]">{{ transaction.txid | shortenString }}</a></td>
-          <td class="d-none d-md-block d-xl-none"><a [routerLink]="['/tx/', transaction.txid]">{{ transaction.txid }}</a></td>
+          <td class="d-block d-md-none"><a [routerLink]="['/tx/', transaction.txid]">{{ transaction.txid | shortenString }}</a></td>
+          <td class="d-none d-md-block"><a [routerLink]="['/tx/', transaction.txid]">{{ transaction.txid }}</a></td>
           <td class="d-none d-xl-block">{{ transaction.value / 100000000 | number: '1.8-8' }} BTC</td>
           <td>{{ transaction.vsize | vbytes: 2 }}</td>
           <td>{{ transaction.fee / transaction.vsize | number : '1.2-2'}} sats/vB</td>

frontend/src/app/components/transaction/transaction.component.html

@@ -7,16 +7,22 @@
   <div class="transaction-content">
 
   <div class="title-block">
-    <h1 style="float: left;">Transaction</h1>
-    <a [routerLink]="['/tx/', txId]" style="line-height: 56px; margin-left: 10px;">{{ txId }}</a>
-    <app-clipboard [text]="txId"></app-clipboard>
-   
-    <ng-template [ngIf]="tx?.status?.confirmed" [ngIfElse]="unconfirmedBtn">
-      <button *ngIf="latestBlock" type="button" class="btn btn-sm btn-success float-right mr-2" style="margin-top: 0.75rem;">{{ latestBlock.height - tx.status.block_height + 1 }} confirmation<ng-container *ngIf="latestBlock.height - tx.status.block_height + 1 > 1">s</ng-container></button>
+    <h1 class="float-left-md">Transaction</h1>
+
+    <ng-template [ngIf]="tx?.status?.confirmed">
+      <button *ngIf="latestBlock" type="button" class="btn btn-sm btn-success float-right-md mr-2" style="margin-top: 0.75rem;">{{ latestBlock.height - tx.status.block_height + 1 }} confirmation<ng-container *ngIf="latestBlock.height - tx.status.block_height + 1 > 1">s</ng-container></button>
     </ng-template>
-    <ng-template #unconfirmedBtn>
-      <button type="button" class="btn btn-sm btn-danger float-right mr-2" style="margin-top: 0.75rem;">Unconfirmed</button>
+    <ng-template [ngIf]="tx && !tx?.status.confirmed">
+      <button type="button" class="btn btn-sm btn-danger float-right-md mr-2" style="margin-top: 0.75rem;">Unconfirmed</button>
     </ng-template>
+
+    <div>
+      <a [routerLink]="['/tx/', txId]" style="line-height: 56px; margin-left: 10px;">
+        <span class="d-inline d-lg-none">{{ txId | shortenString : 24 }}</span>
+        <span class="d-none d-lg-inline">{{ txId }}</span>
+      </a>
+      <app-clipboard [text]="txId"></app-clipboard>
+    </div>
   </div>
 
   <br>
@@ -31,7 +37,11 @@
           <tbody>
             <tr>
               <td>Included in block</td>
-              <td><a [routerLink]="['/block/', tx.status.block_hash]" [state]="{ data: { blockHeight: tx.status.block_height } }">#{{ tx.status.block_height }}</a> at {{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }} <i>(<app-time-since [time]="tx.status.block_time"></app-time-since> ago)</i></td>
+              <td>
+                <a [routerLink]="['/block/', tx.status.block_hash]" [state]="{ data: { blockHeight: tx.status.block_height } }">#{{ tx.status.block_height }}</a>
+                <div class="md-inline">&nbsp;at {{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }}</div>
+                <div class="md-inline">&nbsp;<i>(<app-time-since [time]="tx.status.block_time"></app-time-since> ago)</i></div>
+              </td>
             </tr>
             <ng-template [ngIf]="tx.fee">
               <tr>

frontend/src/app/components/transaction/transaction.component.scss

@@ -2,15 +2,6 @@
   padding: 0.55rem;
 }
 
-#arrow {
-  position: absolute;
-  bottom: -24px;
-  width: 40px;
-  right: -1px;
-
-  width: 40px;
-}
-
 .title-block {
   color: #FFF;
   padding-left: 10px;
@@ -22,3 +13,19 @@
 .title-block > h1 {
   margin: 0;
 }
+
+
+@media (max-width: 767.98px) {
+	.mobile-bottomcol {
+		margin-top: 15px;
+	}
+}
+
+@media (min-width: 768px) {
+  .float-right-md {
+    float: right;
+  }
+  .float-left-md {
+    float: left;
+  }
+}

frontend/src/app/components/transactions-list/transactions-list.component.html

@@ -1,6 +1,9 @@
 <ng-container *ngFor="let tx of transactions; let i = index; trackBy: trackByFn">
   <div *ngIf="!transactionPage" class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
-    <a [routerLink]="['/tx/', tx.txid]" [state]="{ data: tx }">{{ tx.txid }}</a>
+    <a [routerLink]="['/tx/', tx.txid]" [state]="{ data: tx }">
+      <span style="float: left;" class="d-block d-md-none">{{ tx.txid | shortenString : 24 }}</span>
+      <span style="float: left;" class="d-none d-md-block">{{ tx.txid }}</span>
+    </a>
     <div class="float-right">
       <ng-template [ngIf]="tx.status.confirmed">{{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }}</ng-template>
       <ng-template [ngIf]="!tx.status.confirmed && tx.firstSeen">
@@ -30,7 +33,10 @@
                     Coinbase (Newly Generated Coins)
                   </ng-template>
                   <ng-template #regularVin>
-                    <a [routerLink]="['/address/', vin.prevout.scriptpubkey_address]" title="{{ vin.prevout.scriptpubkey_address }}">{{ vin.prevout.scriptpubkey_address | shortenString : 42 }}</a>
+                    <a [routerLink]="['/address/', vin.prevout.scriptpubkey_address]" title="{{ vin.prevout.scriptpubkey_address }}">
+                      <span style="float: left;" class="d-block d-lg-none">{{ vin.prevout.scriptpubkey_address | shortenString : 16 }}</span>
+                      <span class="d-none d-lg-block">{{ vin.prevout.scriptpubkey_address | shortenString : 42 }}</span>
+                    </a>
                     <div>
                       <app-address-labels [vin]="vin"></app-address-labels>
                     </div>
@@ -45,20 +51,18 @@
         </table>
 
       </div>
-      <div class="col">
-        <table class="table table-borderless smaller-text table-xs"  style="margin: 0;">
+      <div class="col mobile-bottomcol">
+        <table class="table table-borderless smaller-text table-xs"  style="margin: 0;height: 100%;">
           <tbody>
             <tr *ngFor="let vout of tx.vout; let vindex = index;">
               <td>
-                <a *ngIf="vout.scriptpubkey_address; else scriptpubkey_type" [routerLink]="['/address/', vout.scriptpubkey_address]" title="{{ vout.scriptpubkey_address }}">{{ vout.scriptpubkey_address | shortenString : 42 }}</a>
+                <a *ngIf="vout.scriptpubkey_address; else scriptpubkey_type" [routerLink]="['/address/', vout.scriptpubkey_address]" title="{{ vout.scriptpubkey_address }}">
+                  <span class="d-block d-lg-none">{{ vout.scriptpubkey_address | shortenString : 16 }}</span>
+                  <span class="d-none d-lg-block">{{ vout.scriptpubkey_address | shortenString : 42 }}</span>
+                </a>
                 <ng-template #scriptpubkey_type>
                   OP_RETURN
                 </ng-template>
-                <!--
-                <div>
-                  <app-address-labels [vout]="vout"></app-address-labels>
-                </div>
-                -->
               </td>
               <td class="text-right nowrap">
                 <app-amount [satoshis]="vout.value"></app-amount>
@@ -74,7 +78,7 @@
               </td>
             </tr>
             <tr>
-              <td class="text-right" colspan="4">
+              <td class="text-right" colspan="4" style="vertical-align: bottom;">
                 <span *ngIf="showConfirmations && latestBlock$ | async as latestBlock">
                   <button *ngIf="tx.status.confirmed; else unconfirmedButton" type="button" class="btn btn-sm btn-success mt-3">{{ latestBlock.height - tx.status.block_height + 1 }} confirmation<ng-container *ngIf="latestBlock.height - tx.status.block_height + 1 > 1">s</ng-container></button>
                   <ng-template #unconfirmedButton>

frontend/src/app/components/transactions-list/transactions-list.component.scss

@@ -61,4 +61,10 @@
 
 .arrow.grey:after {
   background-color:#6c757d;
+}
+
+@media (max-width: 767.98px) {
+	.mobile-bottomcol {
+		margin-top: 15px;
+	}
 }

frontend/src/styles.scss

@@ -317,3 +317,15 @@ hr {
 tr {
   white-space: nowrap;
 }
+
+@media (min-width: 992px) {
+  .lg-inline {
+    display: inline-block;
+  }
+}
+
+@media (min-width: 768px) {
+  .md-inline {
+    display: inline-block;
+  }
+}