From aa02170e5c5de89dd6b3571f318b5b167189b29f Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Thu, 9 Jun 2022 15:58:49 +0200
Subject: [PATCH] Use ellipsis + tooltip combo to fix layout on long string

---
 .../blocks-list/blocks-list.component.html     |  9 ++++++---
 .../blocks-list/blocks-list.component.scss     | 12 ++++++++++++
 .../blocks-list/blocks-list.component.ts       |  4 ++++
 .../fees-box/fees-box.component.scss           |  5 +++++
 .../pool-ranking/pool-ranking.component.html   |  9 ++++++---
 .../pool-ranking/pool-ranking.component.scss   |  4 ++++
 .../pool-ranking/pool-ranking.component.ts     |  4 ++++
 .../reward-stats/reward-stats.component.html   | 18 +++++++++---------
 .../reward-stats/reward-stats.component.scss   |  3 +++
 .../reward-stats/reward-stats.component.ts     |  4 ++++
 10 files changed, 57 insertions(+), 15 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 dfaba73b2..3f7b7730b 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.html
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.html
@@ -10,12 +10,15 @@
     <table class="table table-borderless">
       <thead>
         <th class="height text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}" i18n="latest-blocks.height">Height</th>
-        <th *ngIf="indexingAvailable" class="pool text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}" i18n="mining.pool-name">Pool</th>
+        <th *ngIf="indexingAvailable" class="pool text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}" i18n="mining.pool-name"
+          i18n-ngbTooltip="mining.pool-name" ngbTooltip="Pool" placement="bottom" #miningpool [disableTooltip]="!isEllipsisActive(miningpool)">Pool</th>
         <th class="timestamp" i18n="latest-blocks.timestamp" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Timestamp</th>
         <th class="mined" i18n="latest-blocks.mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Mined</th>
-        <th *ngIf="indexingAvailable" class="reward text-right" i18n="latest-blocks.reward" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">Reward</th>
+        <th *ngIf="indexingAvailable" class="reward text-right" i18n="latest-blocks.reward" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
+          i18n-ngbTooltip="latest-blocks.reward" ngbTooltip="Reward" placement="bottom" #reward [disableTooltip]="!isEllipsisActive(reward)">Reward</th>
         <th *ngIf="indexingAvailable && !widget" class="fees text-right" i18n="latest-blocks.fees" [class]="indexingAvailable ? '' : 'legacy'">Fees</th>
-        <th *ngIf="indexingAvailable" class="txs text-right" i18n="dashboard.txs" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">TXs</th>
+        <th *ngIf="indexingAvailable" class="txs text-right" i18n="dashboard.txs" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
+          i18n-ngbTooltip="dashboard.txs" ngbTooltip="TXs" placement="bottom" #txs [disableTooltip]="!isEllipsisActive(txs)">TXs</th>
         <th *ngIf="!indexingAvailable" class="txs text-right" i18n="dashboard.txs" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">Transactions</th>
         <th class="size" i18n="latest-blocks.size" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Size</th>
       </thead>
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 8388ecac2..0b5780187 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.scss
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.scss
@@ -44,6 +44,10 @@ tr, td, th {
   @media (max-width: 576px) {
     width: 34%;
   }
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 160px;
 }
 .pool.widget {
   width: 40%;
@@ -102,6 +106,10 @@ tr, td, th {
   @media (max-width: 875px) {
     display: none;
   }
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100px;
 }
 .txs.widget {
   padding-right: 0;
@@ -130,6 +138,10 @@ tr, td, th {
     width: 7%;
     padding-right: 30px;
   }
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100px;
 }
 .reward.widget {
   width: 20%;
diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.ts b/frontend/src/app/components/blocks-list/blocks-list.component.ts
index c565e9e30..cb8db2fe3 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.ts
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.ts
@@ -114,4 +114,8 @@ export class BlocksList implements OnInit {
   trackByBlock(index: number, block: BlockExtended) {
     return block.height;
   }
+
+  isEllipsisActive(e) {
+    return (e.offsetWidth < e.scrollWidth);
+  }
 }
\ No newline at end of file
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 8e20069aa..ba68e2086 100644
--- a/frontend/src/app/components/fees-box/fees-box.component.scss
+++ b/frontend/src/app/components/fees-box/fees-box.component.scss
@@ -120,4 +120,9 @@
   &.prority {
     width: 33%;
   }
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: 5px;
+  padding-right: 5px;
 }
\ No newline at end of file
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 367f460df..738f540f3 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
@@ -5,19 +5,22 @@
   <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">Pools Luck (1w)</h5>
+        <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">
           {{ miningStats['minersLuck'] }}%
         </p>
       </div>
       <div class="item">
-        <h5 class="card-title" i18n="master-page.blocks">Blocks (1w)</h5>
+        <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 }}
         </p>
       </div>
       <div class="item">
-        <h5 class="card-title" i18n="mining.miners-count">Pools Count (1w)</h5>
+        <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 }}
         </p>
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 5764cf73a..4f46c8927 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
@@ -92,6 +92,7 @@
     margin-bottom: 10px;
   }
   .item {
+    max-width: 160px;
     width: 50%;
     display: inline-block;
     margin: 0px auto 20px;
@@ -117,6 +118,9 @@
     .card-title {
       font-size: 1rem;
       color: #4a68b9;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
     .card-text {
       font-size: 18px;
diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
index b62a7d665..a5bf79678 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
@@ -292,5 +292,9 @@ export class PoolRankingComponent implements OnInit {
     this.chartOptions.backgroundColor = 'none';
     this.chartInstance.setOption(this.chartOptions);
   }
+
+  isEllipsisActive(e) {
+    return (e.offsetWidth < e.scrollWidth);
+  }
 }
 
diff --git a/frontend/src/app/components/reward-stats/reward-stats.component.html b/frontend/src/app/components/reward-stats/reward-stats.component.html
index eed9aa9da..acd7b26c8 100644
--- a/frontend/src/app/components/reward-stats/reward-stats.component.html
+++ b/frontend/src/app/components/reward-stats/reward-stats.component.html
@@ -1,9 +1,9 @@
 <div class="fee-estimation-wrapper" *ngIf="$rewardStats | async as rewardStats; else loadingReward">
   <div class="fee-estimation-container">
     <div class="item">
-      <h5 class="card-title" i18n="mining.rewards">Miners Reward</h5>
-      <div class="card-text" i18n-ngbTooltip="mining.rewards-desc"
-        ngbTooltip="Amount being paid to miners in the past 144 blocks" placement="bottom">
+      <h5 class="card-title" i18n="mining.rewards" i18n-ngbTooltip="mining.rewards"
+      ngbTooltip="Miners Reward" placement="bottom" #minersreward [disableTooltip]="!isEllipsisActive(minersreward)">Miners Reward</h5>
+      <div class="card-text" i18n-ngbTooltip="mining.rewards-desc" ngbTooltip="Amount being paid to miners in the past 144 blocks" placement="bottom">
         <div class="fee-text">
           <app-amount [satoshis]="rewardStats.totalReward" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
         </div>
@@ -13,9 +13,9 @@
       </div>
     </div>
     <div class="item">
-      <h5 class="card-title" i18n="mining.rewards-per-tx">Reward Per Tx</h5>
-      <div class="card-text" i18n-ngbTooltip="mining.rewards-per-tx-desc"
-        ngbTooltip="Average miners' reward per transaction in the past 144 blocks" placement="bottom">
+      <h5 class="card-title" i18n="mining.rewards-per-tx" i18n-ngbTooltip="mining.rewards-per-tx"
+      ngbTooltip="Reward Per Tx" placement="bottom" #rewardspertx [disableTooltip]="!isEllipsisActive(rewardspertx)">Reward Per Tx</h5>
+      <div class="card-text" i18n-ngbTooltip="mining.rewards-per-tx-desc" ngbTooltip="Average miners' reward per transaction in the past 144 blocks" placement="bottom">
         <div class="fee-text">
           {{ rewardStats.rewardPerTx | amountShortener: 2 }}
           <span i18n="shared.sat-vbyte|sat/vB">sats/tx</span>
@@ -26,9 +26,9 @@
       </div>
     </div>
     <div class="item">
-      <h5 class="card-title" i18n="mining.average-fee">Average Fee</h5>
-      <div class="card-text" i18n-ngbTooltip="mining.average-fee"
-        ngbTooltip="Fee paid on average for each transaction in the past 144 blocks" placement="bottom">
+      <h5 class="card-title" i18n="mining.average-fee" i18n-ngbTooltip="mining.average-fee"
+      ngbTooltip="Average Fee" placement="bottom" #averagefee [disableTooltip]="!isEllipsisActive(averagefee)">Average Fee</h5>
+      <div class="card-text" i18n-ngbTooltip="mining.average-fee" ngbTooltip="Fee paid on average for each transaction in the past 144 blocks" placement="bottom">
         <div class="fee-text">{{ rewardStats.feePerTx | amountShortener: 2 }}
           <span i18n="shared.sat-vbyte|sat/vB">sats/tx</span>
         </div>
diff --git a/frontend/src/app/components/reward-stats/reward-stats.component.scss b/frontend/src/app/components/reward-stats/reward-stats.component.scss
index 460db5e4b..e02b3a311 100644
--- a/frontend/src/app/components/reward-stats/reward-stats.component.scss
+++ b/frontend/src/app/components/reward-stats/reward-stats.component.scss
@@ -3,6 +3,9 @@
   font-size: 10px;
   margin-bottom: 4px;  
   font-size: 1rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .card-text {
diff --git a/frontend/src/app/components/reward-stats/reward-stats.component.ts b/frontend/src/app/components/reward-stats/reward-stats.component.ts
index 582796fa1..c92ac757d 100644
--- a/frontend/src/app/components/reward-stats/reward-stats.component.ts
+++ b/frontend/src/app/components/reward-stats/reward-stats.component.ts
@@ -48,4 +48,8 @@ export class RewardStatsComponent implements OnInit {
         })
       );
   }
+
+  isEllipsisActive(e) {
+    return (e.offsetWidth < e.scrollWidth);
+  }
 }