machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use ellipsis + tooltip combo to fix layout on long string

Browse Source
This commit is contained in:
nymkappa
2022-06-09 15:58:49 +02:00
parent cedb8d20c4
commit db9f9a2fab
10 changed files with 57 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/app/components/pool-ranking/pool-ranking.component.html
View File

@@ -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>

4
frontend/src/app/components/pool-ranking/pool-ranking.component.scss
View File

@@ -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;

4
frontend/src/app/components/pool-ranking/pool-ranking.component.ts
View File

@@ -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);
}
}