Table design and responsiveness updates.

frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html

@@ -8,16 +8,16 @@
     <table class="table table-borderless table-striped">
       <thead>
         <th style="width: 25%;">Height</th>
-        <th style="width: 25%;">Timestamp</th>
+        <th style="width: 25%;">Confirmed</th>
-        <th style="width: 25%;">Total Sent (BSQ)</th>
+        <th style="width: 25%;">Total Sent</th>
-        <th style="width: 25%;">Transactions</th>
+        <th class="d-none d-md-block" style="width: 25%;">Transactions</th>
       </thead>
       <tbody *ngIf="!isLoading; else loadingTmpl">
         <tr *ngFor="let block of blocks; trackBy: trackByFn">
           <td><a [routerLink]="['/block/' | relativeUrl, block.hash]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
-          <td>{{ block.time | date:'yyyy-MM-dd HH:mm' }}</td>
+          <td><app-time-since [time]="block.time / 1000" [fastRender]="true"></app-time-since> ago</td>
-          <td>{{ calculateTotalOutput(block) / 100 | number: '1.2-2' }}</td>
+          <td>{{ calculateTotalOutput(block) / 100 | number: '1.2-2' }}<span class="d-none d-md-inline"> BSQ</span></td>
-          <td>{{ block.txs.length }}</td>
+          <td class="d-none d-md-block">{{ block.txs.length }}</td>
         </tr> 
       </tbody>
     </table>

frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html

@@ -7,28 +7,29 @@
   <div class="table-responsive-sm">
     <table class="table table-borderless table-striped">
       <thead>
-        <th style="width: 18%;">Transaction</th>
+        <th style="width: 20%;">Transaction</th>
         <th style="width: 20%;">Type</th>
-        <th style="width: 15%;">Total Sent (BSQ)</th>
+        <th style="width: 20%;">Amount</th>
-        <th style="width: 10%;">Outputs</th>
+        <th style="width: 20%;">Confirmed</th>
-        <th style="width: 12%;">Block Height</th>
+        <th class="d-none d-md-block" style="width: 20%;">Height</th>
-        <th style="width: 15%;">Block Time</th>
       </thead>
       <tbody *ngIf="!isLoading; else loadingTmpl">
         <tr *ngFor="let tx of transactions; trackBy: trackByFn">
-          <td><a [routerLink]="['/tx/' | relativeUrl, tx.id]" [state]="{ data: tx }">{{ tx.id | shortenString : 16 }}</a></td>
+          <td><a [routerLink]="['/tx/' | relativeUrl, tx.id]" [state]="{ data: tx }">{{ tx.id | slice : 0 : 8 }}</a></td>
-          <td><app-bisq-icon class="mr-1" [txType]="tx.txType"></app-bisq-icon> {{ tx.txTypeDisplayString }}</td>
+          <td>
+            <app-bisq-icon class="mr-1" [txType]="tx.txType"></app-bisq-icon>
+            <span class="d-none d-md-inline"> {{ tx.txTypeDisplayString }}</span>
+          </td>
           <td>
             <ng-template [ngIf]="tx.txType === 'PAY_TRADE_FEE'" [ngIfElse]="defaultTxType">
-              {{ tx.burntFee / 100 | number: '1.2-2' }}
+              {{ tx.burntFee / 100 | number: '1.2-2' }}<span class="d-none d-md-inline"> BSQ</span>
             </ng-template>
             <ng-template #defaultTxType>
-              {{ calculateTotalOutput(tx.outputs) / 100 | number: '1.2-2' }}
+              {{ calculateTotalOutput(tx.outputs) / 100 | number: '1.2-2' }}<span class="d-none d-md-inline"> BSQ</span>
             </ng-template>
           </td>
-          <td>{{ tx.outputs.length }}</td>
+          <td><app-time-since [time]="tx.time / 1000" [fastRender]="true"></app-time-since> ago</td>
-          <td><a [routerLink]="['/block/' | relativeUrl, tx.blockHash]">{{ tx.blockHeight }}</a></td>
+          <td class="d-none d-md-block"><a [routerLink]="['/block/' | relativeUrl, tx.blockHash]">{{ tx.blockHeight }}</a></td>
-          <td>{{ tx.time | date:'yyyy-MM-dd HH:mm' }}</td>
         </tr> 
       </tbody>
     </table>
@@ -42,6 +43,6 @@
 
 <ng-template #loadingTmpl>
   <tr *ngFor="let i of loadingItems">
-    <td *ngFor="let j of [1, 2, 3, 4, 5, 6]"><span class="skeleton-loader"></span></td>
+    <td *ngFor="let j of [1, 2, 3, 4, 5]"><span class="skeleton-loader"></span></td>
   </tr>
 </ng-template>

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

@@ -8,7 +8,6 @@
 
     <p>Development <a href="https://twitter.com/softsimon_">@softsimon_</a>
     <br />Operations <a href="https://twitter.com/wiz">@wiz</a>
-    <br />Design <a href="https://instagram.com/markjborg">@markjborg</a>
 
     <br><br>
 

frontend/src/app/components/master-page/master-page.component.html

@@ -1,6 +1,6 @@
 <header>
   <nav class="navbar navbar-expand-md navbar-dark bg-dark">
-  <a class="navbar-brand" [routerLink]="['/']" style="position: relative;">
+  <a class="navbar-brand" [routerLink]="['/' | relativeUrl]" style="position: relative;">
     <img src="./resources/mempool-logo.png" height="35" width="140" class="logo" [ngStyle]="{'opacity': connectionState === 2 ? 1 : 0.5 }">
     <div class="badge badge-warning connection-badge" *ngIf="connectionState === 0">Offline</div>
     <div class="badge badge-warning connection-badge" style="left: 30px;" *ngIf="connectionState === 1">Reconnecting...</div>

frontend/src/styles.scss

@@ -375,7 +375,7 @@ h1, h2, h3 {
 }
 
 @media (min-width: 768px) {
-  .md-inline {
+  .d-md-inline {
     display: inline-block;
   }
 }