From a893e8734765537f139b9f15c04f696ff1cd8118 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Sat, 12 Mar 2022 17:33:07 +0100
Subject: [PATCH] Add more padding to the blocks list page

---
 .../blocks-list/blocks-list.component.html    | 142 +++++++++---------
 .../blocks-list/blocks-list.component.scss    |  13 +-
 2 files changed, 77 insertions(+), 78 deletions(-)

diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.html b/frontend/src/app/components/blocks-list/blocks-list.component.html
index 7cc7b2e17..f50a5fff2 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.html
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.html
@@ -3,92 +3,94 @@
 
   <div class="clearfix"></div>
 
-  <table class="table table-borderless">
-    <thead>
-      <th class="height" [class]="widget ? 'widget' : ''" i18n="latest-blocks.height">Height</th>
-      <th class="pool text-left" [class]="widget ? 'widget' : ''" i18n="latest-blocks.mined-by">
-        Pool</th>
-      <th class="timestamp" i18n="latest-blocks.timestamp" *ngIf="!widget">Timestamp</th>
-      <th class="mined" i18n="latest-blocks.mined" *ngIf="!widget">Mined</th>
-      <th class="reward text-right" i18n="latest-blocks.reward" [class]="widget ? 'widget' : ''">
-        Reward</th>
-      <th class="fees text-right" i18n="latest-blocks.fees" *ngIf="!widget">Fees</th>
-      <th class="txs text-right" i18n="latest-blocks.transactions" [class]="widget ? 'widget' : ''">Txs</th>
-      <th class="size" i18n="latest-blocks.size" *ngIf="!widget">Size</th>
-    </thead>
-    <tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
-      <tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
-        <td class="height "[class]="widget ? 'widget' : ''">
-          <a [routerLink]="['/block' | relativeUrl, block.height]">{{ block.height
-            }}</a>
-        </td>
-        <td class="pool text-left" [class]="widget ? 'widget' : ''">
-          <a class="clear-link"[routerLink]="[('/mining/pool/' + block.extras.pool.id) | relativeUrl]">
-            <img width="25" height="25" src="{{ block.extras.pool['logo'] }}"
-            onError="this.src = './resources/mining-pools/default.svg'">
-            <span class="pool-name">{{ block.extras.pool.name }}</span>
-          </a>
-        </td>
-        <td class="timestamp" *ngIf="!widget">
-          &lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
-        </td>
-        <td class="mined" *ngIf="!widget">
-          <app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
-        </td>
-        <td class="reward text-right" [class]="widget ? 'widget' : ''">
-          <app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-2"></app-amount>
-        </td>
-        <td class="fees text-right" *ngIf="!widget">
-          <app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-2"></app-amount>
-        </td>
-        <td class="txs text-right" [class]="widget ? 'widget' : ''">
-          {{ block.tx_count | number }}
-        </td>
-        <td class="size" *ngIf="!widget">
-          <div class="progress">
-            <div class="progress-bar progress-mempool" role="progressbar"
-              [ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }"></div>
-            <div class="progress-text" [innerHTML]="block.size | bytes: 2"></div>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-    <ng-template #skeleton>
-      <tbody>
-        <tr *ngFor="let item of skeletonLines">
-          <td class="height" [class]="widget ? 'widget' : ''">
-            <span class="skeleton-loader"></span>
+  <div style="min-height: 295px">
+    <table class="table table-borderless">
+      <thead>
+        <th class="height" [class]="widget ? 'widget' : ''" i18n="latest-blocks.height">Height</th>
+        <th class="pool text-left" [class]="widget ? 'widget' : ''" i18n="latest-blocks.mined-by">
+          Pool</th>
+        <th class="timestamp" i18n="latest-blocks.timestamp" *ngIf="!widget">Timestamp</th>
+        <th class="mined" i18n="latest-blocks.mined" *ngIf="!widget">Mined</th>
+        <th class="reward text-right" i18n="latest-blocks.reward" [class]="widget ? 'widget' : ''">
+          Reward</th>
+        <th class="fees text-right" i18n="latest-blocks.fees" *ngIf="!widget">Fees</th>
+        <th class="txs text-right" i18n="latest-blocks.transactions" [class]="widget ? 'widget' : ''">Txs</th>
+        <th class="size" i18n="latest-blocks.size" *ngIf="!widget">Size</th>
+      </thead>
+      <tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
+        <tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
+          <td class="height " [class]="widget ? 'widget' : ''">
+            <a [routerLink]="['/block' | relativeUrl, block.height]">{{ block.height
+              }}</a>
           </td>
           <td class="pool text-left" [class]="widget ? 'widget' : ''">
-            <img width="0" height="25" style="opacity: 0">
-            <span class="skeleton-loader"></span>
+            <a class="clear-link" [routerLink]="[('/mining/pool/' + block.extras.pool.id) | relativeUrl]">
+              <img width="25" height="25" src="{{ block.extras.pool['logo'] }}"
+                onError="this.src = './resources/mining-pools/default.svg'">
+              <span class="pool-name">{{ block.extras.pool.name }}</span>
+            </a>
           </td>
           <td class="timestamp" *ngIf="!widget">
-            <span class="skeleton-loader"></span>
+            &lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
           </td>
           <td class="mined" *ngIf="!widget">
-            <span class="skeleton-loader"></span>
+            <app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
           </td>
           <td class="reward text-right" [class]="widget ? 'widget' : ''">
-            <span class="skeleton-loader"></span>
+            <app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-2"></app-amount>
           </td>
           <td class="fees text-right" *ngIf="!widget">
-            <span class="skeleton-loader"></span>
+            <app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-2"></app-amount>
           </td>
           <td class="txs text-right" [class]="widget ? 'widget' : ''">
-            <span class="skeleton-loader"></span>
+            {{ block.tx_count | number }}
           </td>
           <td class="size" *ngIf="!widget">
-            <span class="skeleton-loader"></span>
+            <div class="progress">
+              <div class="progress-bar progress-mempool" role="progressbar"
+                [ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }"></div>
+              <div class="progress-text" [innerHTML]="block.size | bytes: 2"></div>
+            </div>
           </td>
         </tr>
       </tbody>
-    </ng-template>
-  </table>
-
-  <ngb-pagination *ngIf="!widget" class="pagination-container float-right mt-2"
-    [class]="isLoading ? 'disabled' : ''" [collectionSize]="blocksCount" [rotate]="true" [maxSize]="5" [pageSize]="15"
-    [(page)]="page" (pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
-  </ngb-pagination>
+      <ng-template #skeleton>
+        <tbody>
+          <tr *ngFor="let item of skeletonLines">
+            <td class="height" [class]="widget ? 'widget' : ''">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="pool text-left" [class]="widget ? 'widget' : ''">
+              <img width="0" height="25" style="opacity: 0">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="timestamp" *ngIf="!widget">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="mined" *ngIf="!widget">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="reward text-right" [class]="widget ? 'widget' : ''">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="fees text-right" *ngIf="!widget">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="txs text-right" [class]="widget ? 'widget' : ''">
+              <span class="skeleton-loader"></span>
+            </td>
+            <td class="size" *ngIf="!widget">
+              <span class="skeleton-loader"></span>
+            </td>
+          </tr>
+        </tbody>
+      </ng-template>
+    </table>
 
+    <ngb-pagination *ngIf="!widget" class="pagination-container float-right mt-2" [class]="isLoading ? 'disabled' : ''"
+      [collectionSize]="blocksCount" [rotate]="true" [maxSize]="5" [pageSize]="15" [(page)]="page"
+      (pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
+    </ngb-pagination>
+  </div>
+  
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.scss b/frontend/src/app/components/blocks-list/blocks-list.component.scss
index b9a19f927..9414348c1 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.scss
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.scss
@@ -1,9 +1,10 @@
 .container-xl {
   max-width: 1400px;
-  padding-bottom: 0;
+  padding-bottom: 100px;
 }
 .container-xl.widget {
   padding-left: 0px;
+  padding-bottom: 0px;
 }
 
 .container {
@@ -117,11 +118,7 @@ td {
   @media (max-width: 650px) {
     width: 20%;
   }
-}
-
-.pagination-container {
-  margin-bottom: 40px;
-  @media (max-width: 992px) {
-    margin-bottom: 80px;
+  @media (max-width: 450px) {
+    display: none;
   }
-}
\ No newline at end of file
+}