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

Update node page layout

Browse Source
This commit is contained in:
nymkappa 2022-08-23 16:26:01 +02:00
parent 7babc82f5d
commit c4914c2ced
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
6 changed files with 23 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.scss
View File

@ -1,129 +1,5 @@
.main-title {
position: relative;
color: #ffffff91;
margin-top: -13px;
font-size: 10px;
text-transform: uppercase;
font-weight: 500;
text-align: center;
padding-bottom: 3px;
}
.full-container {
padding: 0px 15px;
width: 100%;
/* min-height: 500px; */
height: calc(100% - 150px);
@media (max-width: 992px) {
height: 100%;
padding-bottom: 100px;
};
margin-top: 25px;
margin-bottom: 25px;
min-height: 100%;
}
/*
.chart {
width: 100%;
height: 100%;
padding-bottom: 20px;
padding-right: 10px;
@media (max-width: 992px) {
padding-bottom: 25px;
}
@media (max-width: 829px) {
padding-bottom: 50px;
}
@media (max-width: 767px) {
padding-bottom: 25px;
}
@media (max-width: 629px) {
padding-bottom: 55px;
}
@media (max-width: 567px) {
padding-bottom: 55px;
}
}
*/
.chart-widget {
width: 100%;
height: 100%;
max-height: 270px;
}
.formRadioGroup {
margin-top: 6px;
display: flex;
flex-direction: column;
@media (min-width: 991px) {
position: relative;
top: -65px;
}
@media (min-width: 830px) and (max-width: 991px) {
position: relative;
top: 0px;
}
@media (min-width: 830px) {
flex-direction: row;
float: right;
margin-top: 0px;
}
.btn-sm {
font-size: 9px;
@media (min-width: 830px) {
font-size: 14px;
}
}
}
.pool-distribution {
min-height: 56px;
display: block;
@media (min-width: 485px) {
display: flex;
flex-direction: row;
}
h5 {
margin-bottom: 10px;
}
.item {
width: 50%;
display: inline-block;
margin: 0px auto 20px;
&:nth-child(2) {
order: 2;
@media (min-width: 485px) {
order: 3;
}
}
&:nth-child(3) {
order: 3;
@media (min-width: 485px) {
order: 2;
display: block;
}
@media (min-width: 768px) {
display: none;
}
@media (min-width: 992px) {
display: block;
}
}
.card-title {
font-size: 1rem;
color: #4a68b9;
}
.card-text {
font-size: 18px;
span {
color: #ffffff66;
font-size: 12px;
}
}
}
}
.skeleton-loader {
width: 100%;
display: block;
max-width: 80px;
margin: 15px auto 3px;
}

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

@ -25,7 +25,7 @@ import { ActivatedRoute, ParamMap } from '@angular/router';
export class NodeStatisticsChartComponent implements OnInit {
@Input() publicKey: string;
@Input() right: number | string = 65;
@Input() left: number | string = 55;
@Input() left: number | string = 45;
@Input() widget = false;
miningWindowPreference: string;
@ -96,7 +96,7 @@ export class NodeStatisticsChartComponent implements OnInit {
],
grid: {
top: 30,
bottom: 70,
bottom: 20,
right: this.right,
left: this.left,
},

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

@ -119,10 +119,14 @@
</div>
<div *ngIf="!error">
<app-nodes-channels-map [style]="'nodepage'" [publicKey]="node.public_key"></app-nodes-channels-map>
<h2 i18n="lightning.node-history">Node history</h2>
<app-node-statistics-chart [publicKey]="node.public_key"></app-node-statistics-chart>
<div class="row">
<div class="col-sm">
<app-nodes-channels-map [style]="'nodepage'" [publicKey]="node.public_key"></app-nodes-channels-map>
</div>
<div class="col-sm">
<app-node-statistics-chart [publicKey]="node.public_key"></app-node-statistics-chart>
</div>
</div>
<h2 i18n="lightning.active-channels-map">Active channels map</h2>
<app-node-channels style="display:block;margin-bottom: 40px" [publicKey]="node.public_key"></app-node-channels>

5
frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html
View File

@ -8,9 +8,8 @@
<small style="color: #ffffff66" i18n="lightning.tor-nodes-excluded">(Tor nodes excluded)</small>
</div>
<div class="chart" [class]="style" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"
(chartFinished)="onChartFinished($event)">
</div>
<div class="chart" [class]="style" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"
(chartFinished)="onChartFinished($event)">
</div>
<div *ngIf="!chartOptions && style === 'nodepage'" style="padding-top: 30px"></div>

18
frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss
View File

@ -12,11 +12,6 @@
width: 100%;
min-height: 600px;
height: calc(100% - 150px);
@media (max-width: 992px) {
height: 100%;
padding-bottom: 100px;
}
}
.full-container.nodepage {
min-height: 400px;
@ -27,6 +22,7 @@
min-height: 400px;
margin-top: 25px;
margin-bottom: 25px;
min-height: 100%;
}
.full-container.widget {
height: 250px;
@ -68,21 +64,21 @@
min-height: 600px;
}
.chart.nodepage {
min-height: 400px;
min-height: 100%;
width: 100%;
height: 100%;
padding-bottom: 0px;
}
.chart.channelpage {
min-height: 400px;
}
.widget {
width: 90vw;
width: 100%;
margin-left: auto;
margin-right: auto;
height: 250px;
-webkit-mask: linear-gradient(0deg, #11131f00 5%, #11131fff 25%);
@media (max-width: 767.98px) {
width: 100vw;
}
}
.widget > .chart {
min-height: 250px;
@ -107,4 +103,4 @@
@media (max-width: 767.98px) {
top: 250px;
}
}
}

2
frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
View File

@ -165,7 +165,7 @@ export class NodesChannelsMap implements OnInit {
if (this.style === 'nodepage' && thisNodeGPS) {
this.center = [thisNodeGPS[0], thisNodeGPS[1]];
this.zoom = 10;
this.zoom = 5;
this.channelWidth = 1;
this.channelOpacity = 1;
}