Merge pull request #3451 from mempool/simon/mining-difficulty-overflow-fix

Difficulty mining ellipsis fix
This commit is contained in:
wiz 2023-03-20 18:25:51 +09:00 committed by GitHub
commit 8e1cf997f7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 13 additions and 4 deletions

View file

@ -47,7 +47,8 @@
</div>
</div>
<div class="item" *ngIf="showHalving">
<h5 class="card-title" i18n="difficulty-box.next-halving">Next Halving</h5>
<h5 class="card-title" i18n="difficulty-box.next-halving" i18n-ngbTooltip="difficulty-box.next-halving"
ngbTooltip="Next Halving" placement="bottom" #averagefee [disableTooltip]="!isEllipsisActive(averagefee)">Next Halving</h5>
<div class="card-text">
<ng-container *ngTemplateOutlet="epochData.blocksUntilHalving === 1 ? blocksSingular : blocksPlural; context: {$implicit: epochData.blocksUntilHalving }"></ng-container>
<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
@ -77,7 +78,7 @@
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="difficulty-box.current-period">Current Period</h5>
<h5 class="card-title" i18n="difficulty-box.next-halving">Next Halving</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>

View file

@ -10,6 +10,7 @@
.item {
padding: 0 5px;
width: 100%;
max-width: 150px;
&:nth-child(1) {
display: none;
@media (min-width: 485px) {
@ -85,6 +86,9 @@
.card-title {
color: #4a68b9;
font-size: 1rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.progress {

View file

@ -83,4 +83,8 @@ export class DifficultyMiningComponent implements OnInit {
})
);
}
isEllipsisActive(e): boolean {
return (e.offsetWidth < e.scrollWidth);
}
}

View file

@ -50,14 +50,14 @@
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.rewards-per-tx">Reward Per Tx</h5>
<h5 class="card-title" i18n="mining.fees-per-block">Avg Block Fees</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>
</div>
</div>
<div class="item">
<h5 class="card-title" i18n="mining.average-fee">Reward Per Tx</h5>
<h5 class="card-title" i18n="mining.average-fee">Avg Tx Fee</h5>
<div class="card-text">
<div class="skeleton-loader"></div>
<div class="skeleton-loader"></div>