From c4914c2ced86b6e3ce097418eb9edf23d716729c Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Tue, 23 Aug 2022 16:26:01 +0200
Subject: [PATCH] Update node page layout

---
 .../node-statistics-chart.component.scss      | 130 +-----------------
 .../node-statistics-chart.component.ts        |   4 +-
 .../app/lightning/node/node.component.html    |  12 +-
 .../nodes-channels-map.component.html         |   5 +-
 .../nodes-channels-map.component.scss         |  18 +--
 .../nodes-channels-map.component.ts           |   2 +-
 6 files changed, 23 insertions(+), 148 deletions(-)

diff --git a/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.scss b/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.scss
index 85e7c5e68..d738daa81 100644
--- a/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.scss
+++ b/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;
-  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;
-}
\ No newline at end of file
diff --git a/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts b/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts
index 962059c9d..6f0721d38 100644
--- a/frontend/src/app/lightning/node-statistics-chart/node-statistics-chart.component.ts
+++ b/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,
       },
diff --git a/frontend/src/app/lightning/node/node.component.html b/frontend/src/app/lightning/node/node.component.html
index a97707930..12ca8eaa1 100644
--- a/frontend/src/app/lightning/node/node.component.html
+++ b/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>
-
-    <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>
diff --git a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html
index 7eda48b2b..0b3e4198b 100644
--- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.html
+++ b/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)"
-        (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>
diff --git a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss
index fd93b09c5..254bf4d64 100644
--- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss
+++ b/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;
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
index 09e6a17bc..421190d48 100644
--- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts
+++ b/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;
           }