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

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
View file

@ -2,7 +2,10 @@
color: #4a68b9; color: #4a68b9;
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 {

12
frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
View file

@ -3,21 +3,21 @@
<div *ngIf="widget"> <div *ngIf="widget">
<div class="pool-distribution" *ngIf="(nodesPerAsObservable$ | async) as stats; else loadingReward"> <div class="pool-distribution" *ngIf="(nodesPerAsObservable$ | async) as stats; else loadingReward">
<div class="item"> <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" <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"> 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> <app-amount [satoshis]="stats.clearnetCapacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
</p> </p>
</div> </div>
<div class="item"> <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" <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"> 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> <app-amount [satoshis]="stats.unknownCapacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
</p> </p>
</div> </div>
<div class="item"> <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" <p class="card-text" i18n-ngbTooltip="lightning.tor-capacity-desc"
ngbTooltip="How much liquidity is running on nodes advertising only Tor addresses" placement="bottom"> 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> <app-amount [satoshis]="stats.torCapacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
@ -80,19 +80,19 @@
<ng-template #loadingReward> <ng-template #loadingReward>
<div class="pool-distribution"> <div class="pool-distribution">
<div class="item"> <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"> <p class="card-text">
<span class="skeleton-loader skeleton-loader-big"></span> <span class="skeleton-loader skeleton-loader-big"></span>
</p> </p>
</div> </div>
<div class="item"> <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"> <p class="card-text">
<span class="skeleton-loader skeleton-loader-big"></span> <span class="skeleton-loader skeleton-loader-big"></span>
</p> </p>
</div> </div>
<div class="item"> <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"> <p class="card-text">
<span class="skeleton-loader skeleton-loader-big"></span> <span class="skeleton-loader skeleton-loader-big"></span>
</p> </p>

5
frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
View file

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