Merge pull request #1867 from mempool/nymkappa/feature/add-tooltip-pool-ranking

Only show `(1w)` on `Blocks` in pool ranking widget and add tooltips
This commit is contained in:
wiz 2022-06-15 08:09:29 +09:00 committed by GitHub
commit c5bcf76353
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 13 deletions

View File

@ -5,24 +5,27 @@
<div *ngIf="widget"> <div *ngIf="widget">
<div class="pool-distribution" *ngIf="(miningStatsObservable$ | async) as miningStats; else loadingReward"> <div class="pool-distribution" *ngIf="(miningStatsObservable$ | async) as miningStats; else loadingReward">
<div class="item"> <div class="item">
<h5 class="card-title" i18n="mining.miners-luck" i18n-ngbTooltip="mining.miners-luck" <h5 class="card-title d-inline-block" i18n="mining.miners-luck" i18n-ngbTooltip="mining.miners-luck-1w"
ngbTooltip="Pools Luck (1w)" placement="bottom" #minersluck [disableTooltip]="!isEllipsisActive(minersluck)">Pools Luck (1w)</h5> ngbTooltip="Pools luck (1 week)" placement="bottom" #minersluck [disableTooltip]="!isEllipsisActive(minersluck)">Pools luck</h5>
<p class="card-text"> <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'] }}% {{ miningStats['minersLuck'] }}%
</p> </p>
</div> </div>
<div class="item"> <div class="item">
<h5 class="card-title" i18n="master-page.blocks" i18n-ngbTooltip="master-page.blocks" <h5 class="card-title d-inline-block" i18n="mining.miners-count" i18n-ngbTooltip="mining.miners-count-1w"
ngbTooltip="Blocks (1w)" placement="bottom" #blockscount [disableTooltip]="!isEllipsisActive(blockscount)">Blocks (1w)</h5> ngbTooltip="Pools count (1w)" placement="bottom" #poolscount [disableTooltip]="!isEllipsisActive(poolscount)">Pools count</h5>
<p class="card-text"> <p class="card-text" i18n-ngbTooltip="mining.pools-count-desc"
{{ miningStats.blockCount }} ngbTooltip="How many unique pools found at least one block over the past week." placement="bottom">
{{ miningStats.pools.length }}
</p> </p>
</div> </div>
<div class="item"> <div class="item">
<h5 class="card-title" i18n="mining.miners-count" i18n-ngbTooltip="mining.miners-count" <h5 class="card-title d-inline-block" i18n="master-page.blocks" i18n-ngbTooltip="master-page.blocks"
ngbTooltip="Pools Count (1w)" placement="bottom" #poolscount [disableTooltip]="!isEllipsisActive(poolscount)">Pools Count (1w)</h5> ngbTooltip="Blocks (1w)" placement="bottom" #blockscount [disableTooltip]="!isEllipsisActive(blockscount)">Blocks (1w)</h5>
<p class="card-text"> <p class="card-text" i18n-ngbTooltip="mining.blocks-count-desc"
{{ miningStats.pools.length }} ngbTooltip="The number of blocks found over the past week." placement="bottom">
{{ miningStats.blockCount }}
</p> </p>
</div> </div>
</div> </div>
@ -142,4 +145,4 @@
</p> </p>
</div> </div>
</div> </div>
</ng-template> </ng-template>

View File

@ -89,7 +89,7 @@
flex-direction: row; flex-direction: row;
} }
h5 { h5 {
margin-bottom: 10px; margin-bottom: 5px;
} }
.item { .item {
max-width: 160px; max-width: 160px;
@ -103,6 +103,7 @@
} }
} }
&:nth-child(3) { &:nth-child(3) {
width: 50%;
order: 3; order: 3;
@media (min-width: 485px) { @media (min-width: 485px) {
order: 2; order: 2;