From c5759be3eee7f0e4db4b81dd4583b7f60a6563f4 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Thu, 16 Jul 2020 14:36:02 +0700
Subject: [PATCH] Fix responsiveness.

---
 .../bisq-blocks/bisq-blocks.component.html    | 36 ++++++------
 .../bisq-transactions.component.html          | 56 ++++++++++---------
 frontend/src/styles.scss                      |  4 ++
 3 files changed, 51 insertions(+), 45 deletions(-)

diff --git a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html
index df9821efe..929c9df74 100644
--- a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html
+++ b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html
@@ -4,24 +4,24 @@
 
   <div class="clearfix"></div>
 
-  <table class="table table-borderless table-striped">
-    <thead>
-      <th style="width: 20%;">Hash</th>
-      <th style="width: 20%;">Total Sent (BSQ)</th>
-      <th style="width: 20%;">Transactions</th>
-      <th style="width: 20%;">Height</th>
-      <th style="width: 20%;">Time</th>
-    </thead>
-    <tbody *ngIf="!isLoading; else loadingTmpl">
-      <tr *ngFor="let block of blocks; trackBy: trackByFn">
-        <td><a [routerLink]="['/block/' | relativeUrl, block.hash]" title="{{ block.hash }}" [state]="{ data: { block: block } }">{{ block.hash | shortenString : 13 }}</a></td>
-        <td>{{ calculateTotalOutput(block) / 100 | number: '1.2-2' }}</td>
-        <td>{{ block.txs.length }}</td>
-        <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>
-      </tr> 
-    </tbody>
-  </table>
+  <div class="table-responsive-sm">
+    <table class="table table-borderless table-striped">
+      <thead>
+        <th style="width: 25%;">Height</th>
+        <th style="width: 25%;">Timestamp</th>
+        <th style="width: 25%;">Total Sent (BSQ)</th>
+        <th 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>{{ calculateTotalOutput(block) / 100 | number: '1.2-2' }}</td>
+          <td>{{ block.txs.length }}</td>
+        </tr> 
+      </tbody>
+    </table>
+  </div>
 
   <br>
 
diff --git a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html
index ee8071373..5a7f9cd7c 100644
--- a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html
+++ b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html
@@ -4,33 +4,35 @@
 
   <div class="clearfix"></div>
 
-  <table class="table table-borderless table-striped">
-    <thead>
-      <th style="width: 18%;">Transaction</th>
-      <th style="width: 20%;">Type</th>
-      <th style="width: 15%;">Total Sent (BSQ)</th>
-      <th style="width: 10%;">Outputs</th>
-      <th style="width: 12%;">Block 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><app-bisq-icon class="mr-1" [txType]="tx.txType"></app-bisq-icon> {{ tx.txTypeDisplayString }}</td>
-        <td>
-          <ng-template [ngIf]="tx.txType === 'PAY_TRADE_FEE'" [ngIfElse]="defaultTxType">
-            {{ tx.burntFee / 100 | number: '1.2-2' }}
-          </ng-template>
-          <ng-template #defaultTxType>
-            {{ calculateTotalOutput(tx.outputs) / 100 | number: '1.2-2' }}
-          </ng-template>
-        </td>
-        <td>{{ tx.outputs.length }}</td>
-        <td><a [routerLink]="['/block/' | relativeUrl, tx.blockHash]">{{ tx.blockHeight }}</a></td>
-        <td>{{ tx.time | date:'yyyy-MM-dd HH:mm' }}</td>
-      </tr> 
-    </tbody>
-  </table>
+  <div class="table-responsive-sm">
+    <table class="table table-borderless table-striped">
+      <thead>
+        <th style="width: 18%;">Transaction</th>
+        <th style="width: 20%;">Type</th>
+        <th style="width: 15%;">Total Sent (BSQ)</th>
+        <th style="width: 10%;">Outputs</th>
+        <th style="width: 12%;">Block 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><app-bisq-icon class="mr-1" [txType]="tx.txType"></app-bisq-icon> {{ tx.txTypeDisplayString }}</td>
+          <td>
+            <ng-template [ngIf]="tx.txType === 'PAY_TRADE_FEE'" [ngIfElse]="defaultTxType">
+              {{ tx.burntFee / 100 | number: '1.2-2' }}
+            </ng-template>
+            <ng-template #defaultTxType>
+              {{ calculateTotalOutput(tx.outputs) / 100 | number: '1.2-2' }}
+            </ng-template>
+          </td>
+          <td>{{ tx.outputs.length }}</td>
+          <td><a [routerLink]="['/block/' | relativeUrl, tx.blockHash]">{{ tx.blockHeight }}</a></td>
+          <td>{{ tx.time | date:'yyyy-MM-dd HH:mm' }}</td>
+        </tr> 
+      </tbody>
+    </table>
+  </div>
 
   <br>
 
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 268ce2238..1d392a811 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -416,3 +416,7 @@ h1, h2, h3 {
   background-color: #653b9c;
   border-color: #3a1c61;
 }
+
+th {
+  white-space: nowrap;
+}