From a2ad69beb14a8f60c8ad2141c3adf901c0e817de Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Mon, 18 Apr 2022 11:54:52 +0900
Subject: [PATCH] Update blocks list skeleton

---
 .../blocks-list/blocks-list.component.html    | 20 +++++++++----------
 .../blocks-list/blocks-list.component.scss    |  9 ++++++---
 2 files changed, 16 insertions(+), 13 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 f052b7fd6..703ccb6fc 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.html
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.html
@@ -19,14 +19,14 @@
       </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' : ''">
+          <td [class]="widget ? 'widget' : ''">
             <a [routerLink]="['/block' | relativeUrl, block.height]">{{ block.height
               }}</a>
           </td>
           <td class="pool text-left" [class]="widget ? 'widget' : ''">
             <div class="tooltip-custom">
               <a class="clear-link" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]">
-                <img width="23" height="23" src="{{ block.extras.pool['logo'] }}"
+                <img width="22" height="22" src="{{ block.extras.pool['logo'] }}"
                   onError="this.src = './resources/mining-pools/default.svg'">
                 <span class="pool-name">{{ block.extras.pool.name }}</span>
               </a>
@@ -61,26 +61,26 @@
         <tbody>
           <tr *ngFor="let item of skeletonLines">
             <td class="height" [class]="widget ? 'widget' : ''">
-              <span class="skeleton-loader"></span>
+              <span class="skeleton-loader" style="max-width: 75px"></span>
             </td>
             <td class="pool text-left" [class]="widget ? 'widget' : ''">
-              <img width="25" height="25" style="opacity: 0">
-              <span class="skeleton-loader"></span>
+              <img width="1" height="25" style="opacity: 0">
+              <span class="skeleton-loader" style="max-width: 125px"></span>
             </td>
             <td class="timestamp" *ngIf="!widget">
-              <span class="skeleton-loader"></span>
+              <span class="skeleton-loader" style="max-width: 150px"></span>
             </td>
             <td class="mined" *ngIf="!widget">
-              <span class="skeleton-loader"></span>
+              <span class="skeleton-loader" style="max-width: 125px"></span>
             </td>
             <td class="reward text-right" [class]="widget ? 'widget' : ''">
-              <span class="skeleton-loader"></span>
+              <span class="skeleton-loader" style="max-width: 75px"></span>
             </td>
             <td class="fees text-right" *ngIf="!widget">
-              <span class="skeleton-loader"></span>
+              <span class="skeleton-loader" style="max-width: 75px"></span>
             </td>
             <td class="txs text-right" [class]="widget ? 'widget' : ''">
-              <span class="skeleton-loader"></span>
+              <span class="skeleton-loader" style="max-width: 75px"></span>
             </td>
             <td class="size" *ngIf="!widget">
               <span class="skeleton-loader"></span>
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 abf337821..c8035dc44 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.scss
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.scss
@@ -35,6 +35,9 @@ td {
 
 .pool {
   width: 17%;
+  @media (max-width: 576px) {
+    width: 34%;
+  }
 }
 .pool.widget {
   width: 40%;
@@ -51,9 +54,6 @@ td {
 
 .height {
   width: 10%;
-  @media (max-width: 1100px) {
-    width: 10%;
-  }
 }
 .height.widget {
   width: 20%;
@@ -63,6 +63,7 @@ td {
 }
 
 .timestamp {
+  width: 18%;
   @media (max-width: 900px) {
     display: none;
   }
@@ -92,6 +93,7 @@ td {
 }
 
 .fees {
+  width: 10%;
   @media (max-width: 650px) {
     display: none;
   }
@@ -101,6 +103,7 @@ td {
 }
 
 .reward {
+  width: 10%;
   @media (max-width: 576px) {
     width: 7%;
     padding-right: 30px;