Polish dashboards second widgets line

frontend/src/app/components/blocks-list/blocks-list.component.html

@@ -8,7 +8,7 @@
   <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="height text-left" [class]="widget ? 'widget' : ''" i18n="latest-blocks.height">Height</th>
         <th class="pool text-left" [class]="widget ? 'widget' : ''" i18n="mining.pool-name">
           Pool</th>
         <th class="timestamp" i18n="latest-blocks.timestamp" *ngIf="!widget">Timestamp</th>
@@ -21,7 +21,7 @@
       </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]="widget ? 'widget' : ''">
+          <td class="text-left" [class]="widget ? 'widget' : ''">
             <a [routerLink]="['/block' | relativeUrl, block.height]">{{ block.height
               }}</a>
           </td>
@@ -62,7 +62,7 @@
       <ng-template #skeleton>
         <tbody>
           <tr *ngFor="let item of skeletonLines">
-            <td class="height" [class]="widget ? 'widget' : ''">
+            <td class="height text-left" [class]="widget ? 'widget' : ''">
               <span class="skeleton-loader" style="max-width: 75px"></span>
             </td>
             <td class="pool text-left" [class]="widget ? 'widget' : ''">

frontend/src/app/components/blocks-list/blocks-list.component.scss

@@ -11,13 +11,10 @@
   max-width: 100%;
 }
 
-td {
+tr, td, th {
-  padding-top: 0.7rem !important;
+  border: 0px;
+  padding-top: 0.65rem !important;
   padding-bottom: 0.7rem !important;
-  @media (max-width: 376px) {
-    padding-top: 0.73rem !important;
-    padding-bottom: 0.73rem !important;
-    }
 }
 
 .clear-link {
@@ -41,7 +38,7 @@ td {
 }
 .pool.widget {
   width: 40%;
-  padding-left: 30px;
+  padding-left: 24px;
   @media (max-width: 376px) {
     width: 60%;
   }
@@ -56,7 +53,7 @@ td {
   width: 10%;
 }
 .height.widget {
-  width: 20%;
+  width: 15%;
   @media (max-width: 576px) {
     width: 10%;
   }

frontend/src/app/components/blocks-list/blocks-list.component.ts

@@ -39,7 +39,7 @@ export class BlocksList implements OnInit {
       this.websocketService.want(['blocks']);
     }
 
-    this.skeletonLines = this.widget === true ? [...Array(5).keys()] : [...Array(15).keys()];
+    this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()];
     this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
 
     this.blocks$ = combineLatest([
@@ -61,7 +61,7 @@ export class BlocksList implements OnInit {
                     block.extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
                 }
                 if (this.widget) {
-                  return blocks.slice(0, 5);
+                  return blocks.slice(0, 6);
                 }
                 return blocks;
               }),
@@ -85,7 +85,7 @@ export class BlocksList implements OnInit {
           blocks[1][0].extras.pool.logo = `./resources/mining-pools/` +
             blocks[1][0].extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
           acc.unshift(blocks[1][0]);
-          acc = acc.slice(0, this.widget ? 5 : 15);
+          acc = acc.slice(0, this.widget ? 6 : 15);
           return acc;
         }, [])
       );

frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.component.html

@@ -22,7 +22,7 @@
       </tr>
     </tbody>
     <tbody *ngIf="isLoading">
-      <tr *ngFor="let item of [1,2,3,4,5]">
+      <tr *ngFor="let item of [1,2,3,4,5,6]">
         <td class="d-none d-md-block w-75"><span class="skeleton-loader"></span></td>
         <td class="text-left"><span class="skeleton-loader w-75"></span></td>
         <td class="text-right"><span class="skeleton-loader w-75"></span></td>

frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.component.scss

@@ -2,10 +2,15 @@
   width: 100%;
   text-align: left;
   table-layout:fixed;
-  tr, td, th {
+  tr, th {
     border: 0px;
+    padding-top: 0.65rem !important;
+    padding-bottom: 0.7rem !important;
   }
   td {
+    border: 0px;
+    padding-top: 0.71rem !important;
+    padding-bottom: 0.75rem !important;
     width: 25%;
     @media (max-width: 376px) {
       padding: 0.85rem;

frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.components.ts

@@ -54,7 +54,7 @@ export class DifficultyAdjustmentsTable implements OnInit {
 
           return {
             availableTimespanDay: availableTimespanDay,
-            difficulty: tableData.slice(0, 5),
+            difficulty: tableData.slice(0, 6),
           };
         }),
       );

frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss

@@ -52,7 +52,7 @@
 .chart-widget {
   width: 100%;
   height: 100%;
-  max-height: 270px;
+  height: 240px;
 }
 
 .formRadioGroup {

frontend/src/app/components/mining-dashboard/mining-dashboard.component.html

@@ -11,7 +11,7 @@
         <span style="font-size: xx-small" i18n="mining.144-blocks">(144 blocks)</span>
       </div>
       <div class="card-wrapper">
-        <div class="card" style="height: 123px">
+        <div class="card">
           <div class="card-body more-padding">
             <app-reward-stats></app-reward-stats>
           </div>
@@ -22,15 +22,13 @@
     <!-- difficulty adjustment -->
     <div class="col">
       <div class="main-title" i18n="dashboard.difficulty-adjustment">Difficulty Adjustment</div>
-      <div class="card" style="height: 123px">
+      <app-difficulty [showTitle]="false" [showProgress]="false" [showHalving]="true"></app-difficulty>
-        <app-difficulty [showTitle]="false" [showProgress]="false" [showHalving]="true"></app-difficulty>
-      </div>
     </div>
 
     <!-- pool distribution -->
-    <div class="col">
+    <div class="col" style="margin-bottom: 1.47rem">
-      <div class="card">
+      <div class="card graph-card">
-        <div class="card-body">
+        <div class="card-body pl-2 pr-2">
           <app-pool-ranking [widget]=true></app-pool-ranking>
           <div class="mt-1"><a [routerLink]="['/graphs/mining/pools' | relativeUrl]" i18n="dashboard.view-more">View more
               &raquo;</a></div>
@@ -39,9 +37,9 @@
     </div>
 
     <!-- hashrate -->
-    <div class="col">
+    <div class="col" style="margin-bottom: 1.47rem">
       <div class="card">
-        <div class="card-body">
+        <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
           <app-hashrate-chart [widget]=true></app-hashrate-chart>
           <div class="mt-1"><a [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" i18n="dashboard.view-more">View more
               &raquo;</a></div>

frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss

@@ -14,6 +14,13 @@
   background-color: #1d1f31;
 }
 
+.graph-card {
+  height: 100%;
+  @media (min-width: 992px) {
+    height: 385px;
+  }
+}
+
 .card-title {
   font-size: 1rem;
   color: #4a68b9;
@@ -22,9 +29,6 @@
   color: #4a68b9;
 }
 
-.card-body {
-  padding: 1.25rem 1rem 0.75rem 1rem;
-}
 .card-body.pool-ranking {
   padding: 1.25rem 0.25rem 0.75rem 0.25rem;
 }

frontend/src/app/components/pool-ranking/pool-ranking.component.scss

@@ -27,7 +27,7 @@
 .chart-widget {
   width: 100%;
   height: 100%;
-  max-height: 270px;
+  height: 240px;
   @media (max-width: 485px) {
     max-height: 200px;
   }

frontend/src/app/dashboard/dashboard.component.html

@@ -121,7 +121,7 @@
                   <td *ngIf="!stateService.env.MINING_DASHBOARD" class="table-cell-mined" ><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></td>
                   <td *ngIf="stateService.env.MINING_DASHBOARD" class="table-cell-mined pl-lg-4">
                     <a class="clear-link" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
-                      <img width="20" height="20" 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>
@@ -136,7 +136,7 @@
                 </tr>
               </tbody>
             </table>
-            <div class=""><a href="" [routerLink]="[(stateService.env.MINING_DASHBOARD ? '/mining/blocks' : '/blocks') | relativeUrl]" i18n="dashboard.view-all">View all &raquo;</a></div>
+            <div class=""><a href="" [routerLink]="[(stateService.env.MINING_DASHBOARD ? '/mining/blocks' : '/blocks') | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
           </div>
         </div>
       </div>

frontend/src/app/dashboard/dashboard.component.scss

@@ -134,6 +134,8 @@
   table-layout:fixed;
   tr, td, th {
     border: 0px;
+    padding-top: 0.71rem !important;
+    padding-bottom: 0.75rem !important;
   }
   td {
     overflow:hidden;
@@ -182,16 +184,15 @@
   text-align: left;
   tr, td, th {
     border: 0px;
+    padding-top: 0.65rem !important;
+    padding-bottom: 0.7rem !important;
   }
   .table-cell-height {
     width: 15%;
   }
   .table-cell-mined {
     width: 35%;
-    text-align: right;
+    text-align: left;
-    @media (min-width: 376px) {
-      text-align: left;
-    }
   }
   .table-cell-transaction-count {
     display: none;