Merge pull request #3311 from mempool/simon/lightning-stats-truncation

Lightning dashboard overflow titles fixes
This commit is contained in:
wiz 2023-03-12 16:51:38 +09:00 committed by GitHub
commit a1ea77ee50
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 8 deletions

View file

@ -2,7 +2,10 @@
color: #4a68b9;
font-size: 10px;
margin-bottom: 4px;
font-size: 1rem;
font-size: 1rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-text {

View file

@ -3,21 +3,21 @@
<div *ngIf="widget">
<div class="pool-distribution" *ngIf="(nodesPerAsObservable$ | async) as stats; else loadingReward">
<div class="item">
<h5 class="card-title d-inline-block" i18n="lightning.clearnet-capacity">Clearnet Capacity</h5>
<h5 class="card-title" i18n="lightning.clearnet-capacity">Clearnet Capacity</h5>
<p class="card-text" i18n-ngbTooltip="lightning.clearnet-capacity-desc"
ngbTooltip="How much liquidity is running on nodes advertising at least one clearnet IP address" placement="bottom">
<app-amount [satoshis]="stats.clearnetCapacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
</p>
</div>
<div class="item">
<h5 class="card-title d-inline-block" i18n="lightning.unknown-capacity">Unknown Capacity</h5>
<h5 class="card-title" i18n="lightning.unknown-capacity">Unknown Capacity</h5>
<p class="card-text" i18n-ngbTooltip="lightning.unknown-capacity-desc"
ngbTooltip="How much liquidity is running on nodes which ISP was not identifiable" placement="bottom">
<app-amount [satoshis]="stats.unknownCapacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
</p>
</div>
<div class="item">
<h5 class="card-title d-inline-block" i18n="lightning.tor-capacity">Tor Capacity</h5>
<h5 class="card-title" i18n="lightning.tor-capacity">Tor Capacity</h5>
<p class="card-text" i18n-ngbTooltip="lightning.tor-capacity-desc"
ngbTooltip="How much liquidity is running on nodes advertising only Tor addresses" placement="bottom">
<app-amount [satoshis]="stats.torCapacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
@ -80,19 +80,19 @@
<ng-template #loadingReward>
<div class="pool-distribution">
<div class="item">
<h5 class="card-title d-inline-block" i18n="lightning.clearnet-capacity">Clearnet Capacity</h5>
<h5 class="card-title" i18n="lightning.clearnet-capacity">Clearnet Capacity</h5>
<p class="card-text">
<span class="skeleton-loader skeleton-loader-big"></span>
</p>
</div>
<div class="item">
<h5 class="card-title d-inline-block" i18n="lightning.unknown-capacity">Unknown Capacity</h5>
<h5 class="card-title" i18n="lightning.unknown-capacity">Unknown Capacity</h5>
<p class="card-text">
<span class="skeleton-loader skeleton-loader-big"></span>
</p>
</div>
<div class="item">
<h5 class="card-title d-inline-block" i18n="lightning.tor-capacity">Tor Capacity</h5>
<h5 class="card-title" i18n="lightning.tor-capacity">Tor Capacity</h5>
<p class="card-text">
<span class="skeleton-loader skeleton-loader-big"></span>
</p>

View file

@ -68,10 +68,13 @@
margin-bottom: 5px;
}
.item {
max-width: 160px;
max-width: 150px;
width: 50%;
display: inline-block;
margin: 0px auto 20px;
@media (min-width: 485px) {
max-width: 160px;
}
&:nth-child(2) {
order: 2;
@media (min-width: 485px) {