machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages 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">
<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>

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

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

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

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

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

@ -3,6 +3,9 @@
font-size: 10px;
margin-bottom: 4px;
font-size: 1rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.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);
}
}