machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix cramped/overflowing node ranking pages

Browse Source
This commit is contained in:
Mononaut 2023-01-18 16:37:12 -06:00
parent d89b313db8
commit c3ae46795b
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
6 changed files with 56 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html
View File

@ -4,7 +4,7 @@
</h1> </h1>
<div [class]="widget ? 'widget' : 'full'"> <div [class]="widget ? 'widget' : 'full'">
<table class="table table-borderless"> <table class="table table-borderless table-fixed">
<thead> <thead>
<th class="rank"></th> <th class="rank"></th>
<th class="alias text-left" i18n="nodes.alias">Alias</th> <th class="alias text-left" i18n="nodes.alias">Alias</th>
@ -29,10 +29,10 @@
{{ node.channels | number }} {{ node.channels | number }}
</td> </td>
<td *ngIf="!widget" class="timestamp-first text-left"> <td *ngIf="!widget" class="timestamp-first text-left">
<app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.firstSeen"></app-timestamp> <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.firstSeen" [hideTimeSince]="true"></app-timestamp>
</td> </td>
<td *ngIf="!widget" class="timestamp-update text-left"> <td *ngIf="!widget" class="timestamp-update text-left">
<app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt"></app-timestamp> <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt" [hideTimeSince]="true"></app-timestamp>
</td> </td>
<td *ngIf="!widget" class="location text-right text-truncate"> <td *ngIf="!widget" class="location text-right text-truncate">
<app-geolocation [data]="node.geolocation" [type]="'list-isp'"></app-geolocation> <app-geolocation [data]="node.geolocation" [type]="'list-isp'"></app-geolocation>

39
frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss
View File

@ -1,7 +1,7 @@
.container-xl { .container-xl {
max-width: 1400px; max-width: 1400px;
padding-bottom: 100px; padding-bottom: 100px;
@media (min-width: 767.98px) { @media (min-width: 960px) {
padding-left: 50px; padding-left: 50px;
padding-right: 50px; padding-right: 50px;
} }
@ -15,40 +15,44 @@
width: 5%; width: 5%;
} }
.widget .rank { .widget .rank {
@media (min-width: 767.98px) { @media (min-width: 960px) {
width: 13%; width: 13%;
} }
@media (max-width: 767.98px) { @media (max-width: 960px) {
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
} }
} }
.full .alias { .full .alias {
width: 10%; width: 20%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 350px; max-width: 350px;
@media (max-width: 767.98px) { @media (max-width: 960px) {
max-width: 175px; width: 40%;
max-width: 500px;
} }
} }
.widget .alias { .widget .alias {
width: 55%; width: 60%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 350px; max-width: 350px;
@media (max-width: 767.98px) { @media (max-width: 960px) {
max-width: 175px; max-width: 175px;
} }
} }
.full .capacity { .full .capacity {
width: 10%; width: 10%;
@media (max-width: 960px) {
width: 30%;
}
} }
.widget .capacity { .widget .capacity {
width: 32%; width: 32%;
@media (max-width: 767.98px) { @media (max-width: 960px) {
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
} }
@ -57,28 +61,31 @@
.full .channels { .full .channels {
width: 15%; width: 15%;
padding-right: 50px; padding-right: 50px;
@media (max-width: 767.98px) { @media (max-width: 960px) {
display: none; display: none;
} }
} }
.full .timestamp-first { .full .timestamp-first {
width: 15%; width: 10%;
@media (max-width: 767.98px) { @media (max-width: 960px) {
display: none; display: none;
} }
} }
.full .timestamp-update { .full .timestamp-update {
width: 15%; width: 10%;
@media (max-width: 767.98px) { @media (max-width: 960px) {
display: none; display: none;
} }
} }
.full .location { .full .location {
width: 10%; width: 15%;
@media (max-width: 767.98px) { @media (max-width: 960px) {
width: 30%;
}
@media (max-width: 600px) {
display: none; display: none;
} }
} }

4
frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html
View File

@ -29,10 +29,10 @@
<app-amount [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount> <app-amount [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
</td> </td>
<td *ngIf="!widget" class="timestamp-first text-left"> <td *ngIf="!widget" class="timestamp-first text-left">
<app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.firstSeen"></app-timestamp> <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.firstSeen" [hideTimeSince]="true"></app-timestamp>
</td> </td>
<td *ngIf="!widget" class="timestamp-update text-left"> <td *ngIf="!widget" class="timestamp-update text-left">
<app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt"></app-timestamp> <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt" [hideTimeSince]="true"></app-timestamp>
</td> </td>
<td *ngIf="!widget" class="location text-right text-truncate"> <td *ngIf="!widget" class="location text-right text-truncate">
<app-geolocation [data]="node.geolocation" [type]="'list-isp'"></app-geolocation> <app-geolocation [data]="node.geolocation" [type]="'list-isp'"></app-geolocation>

45
frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss
View File

@ -1,7 +1,7 @@
.container-xl { .container-xl {
max-width: 1400px; max-width: 1400px;
padding-bottom: 100px; padding-bottom: 100px;
@media (min-width: 767.98px) { @media (min-width: 960px) {
padding-left: 50px; padding-left: 50px;
padding-right: 50px; padding-right: 50px;
} }
@ -15,70 +15,77 @@
width: 5%; width: 5%;
} }
.widget .rank { .widget .rank {
@media (min-width: 767.98px) { @media (min-width: 960px) {
width: 13%; width: 13%;
} }
@media (max-width: 767.98px) { @media (max-width: 960px) {
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
} }
} }
.full .alias { .full .alias {
width: 10%; width: 20%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 350px; max-width: 350px;
@media (max-width: 767.98px) { @media (max-width: 960px) {
max-width: 175px; width: 40%;
max-width: 500px;
} }
} }
.widget .alias { .widget .alias {
width: 55%; width: 60%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 350px; max-width: 350px;
@media (max-width: 767.98px) { @media (max-width: 960px) {
max-width: 175px; max-width: 175px;
} }
} }
.full .channels { .full .capacity {
width: 10%; width: 10%;
@media (max-width: 960px) {
width: 30%;
}
} }
.widget .channels { .widget .capacity {
width: 32%; width: 32%;
@media (max-width: 767.98px) { @media (max-width: 960px) {
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 0px;
} }
} }
.full .capacity { .full .channels {
width: 15%; width: 15%;
padding-right: 50px; padding-right: 50px;
@media (max-width: 767.98px) { @media (max-width: 960px) {
display: none; display: none;
} }
} }
.full .timestamp-first { .full .timestamp-first {
width: 15%; width: 10%;
@media (max-width: 767.98px) { @media (max-width: 960px) {
display: none; display: none;
} }
} }
.full .timestamp-update { .full .timestamp-update {
width: 15%; width: 10%;
@media (max-width: 767.98px) { @media (max-width: 960px) {
display: none; display: none;
} }
} }
.full .location { .full .location {
width: 10%; width: 15%;
@media (max-width: 767.98px) { @media (max-width: 960px) {
width: 30%;
}
@media (max-width: 600px) {
display: none; display: none;
} }
} }

2
frontend/src/app/shared/components/timestamp/timestamp.component.html
View File

@ -1,7 +1,7 @@
<span *ngIf="seconds === undefined">-</span> <span *ngIf="seconds === undefined">-</span>
<span *ngIf="seconds !== undefined"> <span *ngIf="seconds !== undefined">
&lrm;{{ seconds * 1000 | date: customFormat ?? 'yyyy-MM-dd HH:mm' }} &lrm;{{ seconds * 1000 | date: customFormat ?? 'yyyy-MM-dd HH:mm' }}
<div class="lg-inline"> <div class="lg-inline" *ngIf="!hideTimeSince">
<i class="symbol">(<app-time-since [time]="seconds" [fastRender]="true"></app-time-since>)</i> <i class="symbol">(<app-time-since [time]="seconds" [fastRender]="true"></app-time-since>)</i>
</div> </div>
</span> </span>

1
frontend/src/app/shared/components/timestamp/timestamp.component.ts
View File

@ -10,6 +10,7 @@ export class TimestampComponent implements OnChanges {
@Input() unixTime: number; @Input() unixTime: number;
@Input() dateString: string; @Input() dateString: string;
@Input() customFormat: string; @Input() customFormat: string;
@Input() hideTimeSince: boolean = false;
seconds: number | undefined = undefined; seconds: number | undefined = undefined;