mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-23 22:46:54 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1855 from mempool/nymkappa/feature/ellipsis

Browse source 
Use ellipsis + tooltip combo to fix layout on long string
This commit is contained in:
wiz 2022-06-09 23:07:36 +09:00 • committed by GitHub
commit 80700fa031
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 57 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/app/components/blocks-list/blocks-list.component.html
View file

@ -10,12 +10,15 @@
<table class="table table-borderless"> <table class="table table-borderless">
<thead> <thead>
<th class="height text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}" i18n="latest-blocks.height">Height</th> <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="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 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 && !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 *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> <th class="size" i18n="latest-blocks.size" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Size</th>
</thead> </thead>

12
frontend/src/app/components/blocks-list/blocks-list.component.scss
View file

@ -44,6 +44,10 @@ tr, td, th {
@media (max-width: 576px) { @media (max-width: 576px) {
width: 34%; width: 34%;
} }
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 160px;
} }
.pool.widget { .pool.widget {
width: 40%; width: 40%;
@ -102,6 +106,10 @@ tr, td, th {
@media (max-width: 875px) { @media (max-width: 875px) {
display: none; display: none;
} }
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100px;
} }
.txs.widget { .txs.widget {
padding-right: 0; padding-right: 0;
@ -130,6 +138,10 @@ tr, td, th {
width: 7%; width: 7%;
padding-right: 30px; padding-right: 30px;
} }
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100px;
} }
.reward.widget { .reward.widget {
width: 20%; width: 20%;

4
frontend/src/app/components/blocks-list/blocks-list.component.ts
View file

@ -114,4 +114,8 @@ export class BlocksList implements OnInit {
trackByBlock(index: number, block: BlockExtended) { trackByBlock(index: number, block: BlockExtended) {
return block.height; return block.height;
} }
isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}
} }

5
frontend/src/app/components/fees-box/fees-box.component.scss
View file

@ -120,4 +120,9 @@
&.prority { &.prority {
width: 33%; width: 33%;
} }
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 5px;
padding-right: 5px;
} }

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

@ -5,19 +5,22 @@
<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">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"> <p class="card-text">
{{ miningStats['minersLuck'] }}% {{ miningStats['minersLuck'] }}%
</p> </p>
</div> </div>
<div class="item"> <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"> <p class="card-text">
{{ miningStats.blockCount }} {{ miningStats.blockCount }}
</p> </p>
</div> </div>
<div class="item"> <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"> <p class="card-text">
{{ miningStats.pools.length }} {{ miningStats.pools.length }}
</p> </p>

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

@ -92,6 +92,7 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
.item { .item {
max-width: 160px;
width: 50%; width: 50%;
display: inline-block; display: inline-block;
margin: 0px auto 20px; margin: 0px auto 20px;
@ -117,6 +118,9 @@
.card-title { .card-title {
font-size: 1rem; font-size: 1rem;
color: #4a68b9; color: #4a68b9;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.card-text { .card-text {
font-size: 18px; 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.chartOptions.backgroundColor = 'none';
this.chartInstance.setOption(this.chartOptions); this.chartInstance.setOption(this.chartOptions);
} }
isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}
} }

18
frontend/src/app/components/reward-stats/reward-stats.component.html
View file

@ -1,9 +1,9 @@
<div class="fee-estimation-wrapper" *ngIf="$rewardStats | async as rewardStats; else loadingReward"> <div class="fee-estimation-wrapper" *ngIf="$rewardStats | async as rewardStats; else loadingReward">
<div class="fee-estimation-container"> <div class="fee-estimation-container">
<div class="item"> <div class="item">
<h5 class="card-title" i18n="mining.rewards">Miners Reward</h5> <h5 class="card-title" i18n="mining.rewards" i18n-ngbTooltip="mining.rewards"
<div class="card-text" i18n-ngbTooltip="mining.rewards-desc" ngbTooltip="Miners Reward" placement="bottom" #minersreward [disableTooltip]="!isEllipsisActive(minersreward)">Miners Reward</h5>
ngbTooltip="Amount being paid to miners in the past 144 blocks" placement="bottom"> <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"> <div class="fee-text">
<app-amount [satoshis]="rewardStats.totalReward" digitsInfo="1.2-2" [noFiat]="true"></app-amount> <app-amount [satoshis]="rewardStats.totalReward" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
</div> </div>
@ -13,9 +13,9 @@
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<h5 class="card-title" i18n="mining.rewards-per-tx">Reward Per Tx</h5> <h5 class="card-title" i18n="mining.rewards-per-tx" i18n-ngbTooltip="mining.rewards-per-tx"
<div class="card-text" i18n-ngbTooltip="mining.rewards-per-tx-desc" ngbTooltip="Reward Per Tx" placement="bottom" #rewardspertx [disableTooltip]="!isEllipsisActive(rewardspertx)">Reward Per Tx</h5>
ngbTooltip="Average miners' reward per transaction in the past 144 blocks" placement="bottom"> <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"> <div class="fee-text">
{{ rewardStats.rewardPerTx | amountShortener: 2 }} {{ rewardStats.rewardPerTx | amountShortener: 2 }}
<span i18n="shared.sat-vbyte|sat/vB">sats/tx</span> <span i18n="shared.sat-vbyte|sat/vB">sats/tx</span>
@ -26,9 +26,9 @@
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<h5 class="card-title" i18n="mining.average-fee">Average Fee</h5> <h5 class="card-title" i18n="mining.average-fee" i18n-ngbTooltip="mining.average-fee"
<div class="card-text" i18n-ngbTooltip="mining.average-fee" ngbTooltip="Average Fee" placement="bottom" #averagefee [disableTooltip]="!isEllipsisActive(averagefee)">Average Fee</h5>
ngbTooltip="Fee paid on average for each transaction in the past 144 blocks" placement="bottom"> <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 }} <div class="fee-text">{{ rewardStats.feePerTx | amountShortener: 2 }}
<span i18n="shared.sat-vbyte|sat/vB">sats/tx</span> <span i18n="shared.sat-vbyte|sat/vB">sats/tx</span>
</div> </div>

3
frontend/src/app/components/reward-stats/reward-stats.component.scss
View file

@ -3,6 +3,9 @@
font-size: 10px; font-size: 10px;
margin-bottom: 4px; margin-bottom: 4px;
font-size: 1rem; font-size: 1rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.card-text { .card-text {

4
frontend/src/app/components/reward-stats/reward-stats.component.ts
View file

@ -48,4 +48,8 @@ export class RewardStatsComponent implements OnInit {
}) })
); );
} }
isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}
} }