Update node page layout

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

@@ -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;
+  margin-top: 25px;
-  width: 100%;
+  margin-bottom: 25px;
-  /* min-height: 500px; */
+  min-height: 100%;
-  height: calc(100% - 150px);
-  @media (max-width: 992px) {
-    height: 100%;
-    padding-bottom: 100px;
-  };
 }
-/*
-.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;
-}

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

@@ -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,
       },

frontend/src/app/lightning/node/node.component.html

@@ -119,10 +119,14 @@
   </div>
 
   <div *ngIf="!error">
-    <app-nodes-channels-map [style]="'nodepage'" [publicKey]="node.public_key"></app-nodes-channels-map>
+    <div class="row">
-
+      <div class="col-sm">
-    <h2 i18n="lightning.node-history">Node history</h2>
+        <app-nodes-channels-map [style]="'nodepage'" [publicKey]="node.public_key"></app-nodes-channels-map>
-    <app-node-statistics-chart [publicKey]="node.public_key"></app-node-statistics-chart>
+      </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>

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

@@ -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)"
+    <div class="chart" [class]="style" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)"
-        (chartFinished)="onChartFinished($event)">
+      (chartFinished)="onChartFinished($event)">
-      </div>
     </div>
 
     <div *ngIf="!chartOptions && style === 'nodepage'" style="padding-top: 30px"></div>

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

@@ -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;
   }
-}
+}

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

@@ -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;
           }