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

Node and Channel pages improvements

Browse Source
This commit is contained in:
softsimon
2022-05-15 19:22:14 +04:00
parent 179f959f0f
commit e12f32ef80
16 changed files with 239 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/app/lightning/node/node.component.html
View File

@@ -1,10 +1,8 @@
<div class="container-xl" *ngIf="(node$ | async) as node">
<div class="title-container mb-2">
<h1 i18n="shared.address" class="mb-0">{{ node.alias }}</h1>
<h1 class="mb-0">{{ node.alias }}</h1>
<span class="tx-link">
<a [routerLink]="['/lightning/node' | relativeUrl, node.public_key]" >
<span class="d-inline">{{ node.public_key | shortenString : 18 }}</span>
</a>
<a [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">{{ node.public_key | shortenString : 12 }}</a>
<app-clipboard [text]="node.public_key"></app-clipboard>
</span>
</div>
@@ -20,7 +18,7 @@
<tr>
<td i18n="address.total-received">Total capacity</td>
<td>
<app-sats [satoshis]="node.capacity"></app-sats>&nbsp; <app-fiat [value]="node.capacity" digitsInfo="1.0-0"></app-fiat>
<app-sats [satoshis]="node.capacity"></app-sats><app-fiat [value]="node.capacity" digitsInfo="1.0-0"></app-fiat>
</td>
</tr>
<tr>
@@ -32,12 +30,13 @@
<tr>
<td i18n="address.total-received">Average channel size</td>
<td>
<app-sats [satoshis]="node.channels_capacity_avg"></app-sats>&nbsp; <app-fiat [value]="node.channels_capacity_avg" digitsInfo="1.0-0"></app-fiat>
<app-sats [satoshis]="node.channels_capacity_avg"></app-sats><app-fiat [value]="node.channels_capacity_avg" digitsInfo="1.0-0"></app-fiat>
</td>
</tr>
</tbody>
</table>
</div>
<div class="w-100 d-block d-md-none"></div>
<div class="col-md">
<table class="table table-borderless table-striped">
<tbody>

63
frontend/src/app/lightning/node/node.component.scss
View File

@@ -1,3 +1,31 @@
.title-container {
display: flex;
flex-direction: row;
@media (max-width: 768px) {
flex-direction: column;
}
}
.tx-link {
display: flex;
flex-grow: 1;
@media (min-width: 650px) {
align-self: end;
margin-left: 15px;
margin-top: 0px;
margin-bottom: -3px;
}
@media (min-width: 768px) {
margin-bottom: 4px;
top: 1px;
position: relative;
}
@media (max-width: 768px) {
order: 2;
}
}
.qr-wrapper {
background-color: #FFF;
padding: 10px;
@@ -20,34 +48,13 @@
position: relative;
}
.qrcode-col {
margin: 20px auto 10px;
text-align: center;
@media (min-width: 992px){
margin: 0px auto 0px;
app-fiat {
display: block;
font-size: 13px;
@media (min-width: 768px) {
font-size: 14px;
display: inline-block;
margin-left: 10px;
}
}
.tx-link {
display: flex;
flex-grow: 1;
@media (min-width: 650px) {
align-self: end;
margin-left: 15px;
margin-top: 0px;
margin-bottom: -3px;
}
@media (min-width: 768px) {
margin-bottom: 4px;
top: 1px;
position: relative;
}
@media (max-width: 768px) {
order: 3;
}
}
.title-container {
display: flex;
flex-direction: row;
}

4
frontend/src/app/lightning/node/node.component.ts
View File

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Observable } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';
import { SeoService } from 'src/app/services/seo.service';
import { LightningApiService } from '../lightning-api.service';
@Component({
@@ -20,6 +21,7 @@ export class NodeComponent implements OnInit {
constructor(
private lightningApiService: LightningApiService,
private activatedRoute: ActivatedRoute,
private seoService: SeoService,
) { }
ngOnInit(): void {
@@ -29,6 +31,8 @@ export class NodeComponent implements OnInit {
return this.lightningApiService.getNode$(params.get('public_key'));
}),
map((node) => {
this.seoService.setTitle(`Node: ${node.alias}`);
const socketsObject = [];
for (const socket of node.sockets.split(',')) {
if (socket === '') {