From 81d7072a951306efd710b6811dee4f98bfc81690 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Wed, 29 Jul 2020 17:30:30 +0700
Subject: [PATCH] Fee box: Mobile view

---
 .../app/components/fees-box/fees-box.component.html  | 12 ++++++------
 .../app/components/fees-box/fees-box.component.scss  |  9 +++++++++
 .../latest-blocks/latest-blocks.component.html       |  2 +-
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/components/fees-box/fees-box.component.html b/frontend/src/app/components/fees-box/fees-box.component.html
index db58b4ab3..d2f9e0ba9 100644
--- a/frontend/src/app/components/fees-box/fees-box.component.html
+++ b/frontend/src/app/components/fees-box/fees-box.component.html
@@ -1,17 +1,17 @@
-<table class="table mx-auto text-center" style="width: 500px">
+<table class="table mx-auto text-center" style="max-width: 550px">
   <tr>
-    <td style="border-top: 0px; width: 33%;">1 hour</td>
-    <td style="border-top: 0px; width: 33%;">30 minutes</td>
-    <td style="border-top: 0px; width: 33%;">Next block</td>
+    <td class="d-none d-md-table-cell border-top-0">1 hour</td>
+    <td class="border-top-0">30 minutes</td>
+    <td class="border-top-0">Next block</td>
   </tr>
   <tr *ngIf="(feeEstimations$ | async) as feeEstimations; else loadingFees">
-    <td>{{ feeEstimations.hourFee }} sat/vB (<app-fiat [value]="feeEstimations.hourFee * 250"></app-fiat>)</td>
+    <td class="d-none d-md-table-cell">{{ feeEstimations.hourFee }} sat/vB (<app-fiat [value]="feeEstimations.hourFee * 250"></app-fiat>)</td>
     <td>{{ feeEstimations.halfHourFee }} sat/vB (<app-fiat [value]="feeEstimations.halfHourFee * 250"></app-fiat>)</td>
     <td>{{ feeEstimations.fastestFee }} sat/vB (<app-fiat [value]="feeEstimations.fastestFee * 250"></app-fiat>)</td>
   </tr>
   <ng-template #loadingFees>
     <tr>
-      <td><span class="skeleton-loader"></span></td>
+      <td class="d-none d-md-table-cell"><span class="skeleton-loader"></span></td>
       <td><span class="skeleton-loader"></span></td>
       <td><span class="skeleton-loader"></span></td>
     </tr>
diff --git a/frontend/src/app/components/fees-box/fees-box.component.scss b/frontend/src/app/components/fees-box/fees-box.component.scss
index e69de29bb..ab8257f06 100644
--- a/frontend/src/app/components/fees-box/fees-box.component.scss
+++ b/frontend/src/app/components/fees-box/fees-box.component.scss
@@ -0,0 +1,9 @@
+td {
+  width: 33%;
+}
+
+@media (max-width: 767.98px) {
+  td {
+    width: 50%;
+  }
+}
diff --git a/frontend/src/app/components/latest-blocks/latest-blocks.component.html b/frontend/src/app/components/latest-blocks/latest-blocks.component.html
index 72659cf0b..fd077080e 100644
--- a/frontend/src/app/components/latest-blocks/latest-blocks.component.html
+++ b/frontend/src/app/components/latest-blocks/latest-blocks.component.html
@@ -1,4 +1,4 @@
-<app-fees-box class="d-block mb-4"></app-fees-box>
+<app-fees-box class="d-block m-2 mb-4"></app-fees-box>
 
 <div class="container-xl">
 <hr>