From 9fe4cc2d2b3b8d769fc21133c2a06246f3c3eb38 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Sat, 11 Jun 2022 00:04:19 +0200
Subject: [PATCH] Only show `(1w)` on `Blocks` in pool ranking widget Add
 tooltips to explain `Pools luck`, `Pools count` and `Blocs (1w)`

---
 .../pool-ranking/pool-ranking.component.html  | 27 ++++++++++---------
 .../pool-ranking/pool-ranking.component.scss  |  3 ++-
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.html b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
index 738f540f3..4651b62c1 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
@@ -5,24 +5,27 @@
   <div *ngIf="widget">
     <div class="pool-distribution" *ngIf="(miningStatsObservable$ | async) as miningStats; else loadingReward">
       <div class="item">
-        <h5 class="card-title" i18n="mining.miners-luck" i18n-ngbTooltip="mining.miners-luck"
-        ngbTooltip="Pools Luck (1w)" placement="bottom" #minersluck [disableTooltip]="!isEllipsisActive(minersluck)">Pools Luck (1w)</h5>
-        <p class="card-text">
+        <h5 class="card-title d-inline-block" i18n="mining.miners-luck" i18n-ngbTooltip="mining.miners-luck-1w"
+        ngbTooltip="Pools luck (1 week)" placement="bottom" #minersluck [disableTooltip]="!isEllipsisActive(minersluck)">Pools luck</h5>
+        <p class="card-text" i18n-ngbTooltip="mining.pools-luck-desc"
+        ngbTooltip="The overall luck of all mining pools over the past week. A luck bigger than 100% means the average block time for the current epoch is less than 10 minutes." placement="bottom">
           {{ miningStats['minersLuck'] }}%
         </p>
       </div>
       <div class="item">
-        <h5 class="card-title" i18n="master-page.blocks" i18n-ngbTooltip="master-page.blocks"
-        ngbTooltip="Blocks (1w)" placement="bottom" #blockscount [disableTooltip]="!isEllipsisActive(blockscount)">Blocks (1w)</h5>
-        <p class="card-text">
-          {{ miningStats.blockCount }}
+        <h5 class="card-title d-inline-block" i18n="mining.miners-count" i18n-ngbTooltip="mining.miners-count-1w"
+        ngbTooltip="Pools count (1w)" placement="bottom" #poolscount [disableTooltip]="!isEllipsisActive(poolscount)">Pools count</h5>
+        <p class="card-text" i18n-ngbTooltip="mining.pools-count-desc"
+        ngbTooltip="How many unique pools found at least one block over the past week." placement="bottom">
+          {{ miningStats.pools.length }}
         </p>
       </div>
       <div class="item">
-        <h5 class="card-title" i18n="mining.miners-count" i18n-ngbTooltip="mining.miners-count"
-        ngbTooltip="Pools Count (1w)" placement="bottom" #poolscount [disableTooltip]="!isEllipsisActive(poolscount)">Pools Count (1w)</h5>
-        <p class="card-text">
-          {{ miningStats.pools.length }}
+        <h5 class="card-title d-inline-block" i18n="master-page.blocks" i18n-ngbTooltip="master-page.blocks"
+        ngbTooltip="Blocks (1w)" placement="bottom" #blockscount [disableTooltip]="!isEllipsisActive(blockscount)">Blocks (1w)</h5>
+        <p class="card-text" i18n-ngbTooltip="mining.blocks-count-desc"
+        ngbTooltip="The number of blocks found over the past week." placement="bottom">
+          {{ miningStats.blockCount }}
         </p>
       </div>
     </div>
@@ -142,4 +145,4 @@
       </p>
     </div>
   </div>
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
index 4f46c8927..855b4e65c 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
@@ -89,7 +89,7 @@
     flex-direction: row;
   }
   h5 {
-    margin-bottom: 10px;
+    margin-bottom: 5px;
   }
   .item {
     max-width: 160px;
@@ -103,6 +103,7 @@
       }
     }
     &:nth-child(3) {
+      width: 50%;
       order: 3;
       @media (min-width: 485px) {
         order: 2;