From b512123f59dab836283e1f6b7b1015d2c54dc0a4 Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Thu, 23 Feb 2023 18:36:13 +0900
Subject: [PATCH] Fix design for node channels ranking

---
 .../lightning-dashboard.component.html        |  2 +-
 .../top-nodes-per-capacity.component.scss     | 22 -----
 .../top-nodes-per-capacity.component.ts       | 10 +-
 .../top-nodes-per-channels.component.html     | 89 +++++++----------
 .../top-nodes-per-channels.component.scss     | 99 ++++++-------------
 .../top-nodes-per-channels.component.ts       |  5 +
 6 files changed, 74 insertions(+), 153 deletions(-)

diff --git a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html
index c00a4be58..b73d21bcd 100644
--- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html
+++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html
@@ -69,7 +69,7 @@
     </div>
 
     <!-- Top nodes per channels -->
-    <div class="col">
+    <div class="col" style="max-height: 410px">
       <div class="card">
         <div class="card-body">
           <a class="title-link" href="" [routerLink]="['/lightning/nodes/rankings/connectivity' | relativeUrl]">
diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss
index d177a8b01..b7ed8cf04 100644
--- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss
+++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss
@@ -1,9 +1,3 @@
-.spinner-border {
-  height: 25px;
-  width: 25px;
-  margin-top: 13px;
-}
-
 .container-xl {
   max-width: 1400px;
 }
@@ -12,13 +6,6 @@
   padding-left: 0px;
   padding-bottom: 0px;
 }
-.container-xl.legacy {
-  max-width: 1140px;
-}
-
-.container {
-  max-width: 100%;
-}
 
 tr, td, th {
   border: 0px;
@@ -30,15 +17,6 @@ tr, td, th {
   color: white;
 }
 
-.disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}
-
-.progress {
-  background-color: #2d3348;
-}
-
 .pool {
   width: 15%;
   @media (max-width: 576px) {
diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.ts b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.ts
index 489ba9b21..4925256c0 100644
--- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.ts
+++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.ts
@@ -1,9 +1,8 @@
-import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { map, Observable, Subscription } from 'rxjs';
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { map, Observable } from 'rxjs';
 import { StateService } from 'src/app/services/state.service';
 import { INodesRanking, ITopNodesPerCapacity } from '../../../interfaces/node-api.interface';
 import { SeoService } from '../../../services/seo.service';
-import { isMobile } from '../../../shared/common.utils';
 import { GeolocationData } from '../../../shared/components/geolocation/geolocation.component';
 import { LightningApiService } from '../../lightning-api.service';
 
@@ -13,7 +12,7 @@ import { LightningApiService } from '../../lightning-api.service';
   styleUrls: ['./top-nodes-per-capacity.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TopNodesPerCapacity implements OnInit, OnDestroy {
+export class TopNodesPerCapacity implements OnInit {
   @Input() nodes$: Observable<INodesRanking>;
   @Input() widget: boolean = false;
   
@@ -27,9 +26,6 @@ export class TopNodesPerCapacity implements OnInit, OnDestroy {
     private stateService: StateService,
   ) {}
 
-  ngOnDestroy(): void {
-  }
-
   ngOnInit(): void {
     this.currency$ = this.stateService.fiatCurrency$;
 
diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html
index 7d02e510f..ccb6a48fe 100644
--- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html
+++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html
@@ -1,71 +1,56 @@
-<div [class]="!widget ? 'container-xl full-height' : ''">
-  <h1 *ngIf="!widget" class="float-left">
-    <span i18n="lightning.top-100-connectivity">Top 100 nodes connectivity ranking</span>
-  </h1>
 
-  <div [class]="widget ? 'widget' : 'full'">
+
+<div class="container-xl" style="min-height: 335px" [ngClass]="{'widget': widget, 'full-height': !widget}">
+  <h1 *ngIf="!widget" class="float-left" i18n="lightning.liquidity-ranking">Liquidity Ranking</h1>
+
+  <div class="clearfix"></div>
+
+  <div style="min-height: 295px">
     <table class="table table-borderless">
       <thead>
-        <th class="rank"></th>
         <th class="alias text-left" i18n="nodes.alias">Alias</th>
-        <th class="channels text-right" i18n="node.channels">Channels</th>
-        <th *ngIf="!widget" class="capacity text-right" i18n="lightning.liquidity">Liquidity</th>
-        <th *ngIf="!widget" class="timestamp-first text-left" i18n="transaction.first-seen|Transaction first seen">First seen</th>
-        <th *ngIf="!widget" class="timestamp-update text-left" i18n="lightning.last_update">Last update</th>
-        <th *ngIf="!widget" class="location text-right" i18n="lightning.location">Location</th>
+        <th class="liquidity text-right" i18n="node.channels">Channels</th>
+        <th *ngIf="!widget" class="d-none d-md-table-cell channels text-right" i18n="lightning.channels">Capacity</th>
+        <th *ngIf="!widget" class="d-none d-md-table-cell text-right" i18n="node.liquidity">{{ currency$ | async }}</th>
+        <th *ngIf="!widget" class="d-none d-md-table-cell timestamp text-right" i18n="transaction.first-seen|Transaction first seen">First seen</th>
+        <th *ngIf="!widget" class="d-none d-md-table-cell timestamp text-right" i18n="lightning.last_update">Last update</th>
+        <th *ngIf="!widget" class="d-none d-md-table-cell text-right" i18n="lightning.location">Location</th>
       </thead>
-      <tbody *ngIf="topNodesPerChannels$ | async as nodes; else skeleton">
-        <tr *ngFor="let node of nodes; let i = index;">
-          <td class="rank text-left">
-            {{ i + 1 }}
+      <tbody *ngIf="topNodesPerChannels$ | async as nodes">
+        <tr *ngFor="let node of nodes;">
+          <td class="pool text-left">
+            <div class="tooltip-custom d-block w-100">
+              <a class="link d-block w-100" [routerLink]="['/lightning/node' | relativeUrl, node.publicKey]">
+                <span class="pool-name w-100">{{ node.alias }}</span>
+              </a>
+            </div>
           </td>
-          <td class="alias text-left">
-            <a [routerLink]="['/lightning/node' | relativeUrl, node.publicKey]">{{ node.alias }}</a>
-          </td>
-          <td class="channels text-right">
+          <td class="text-right">
             {{ node.channels | number }}
           </td>
-          <td *ngIf="!widget" class="capacity text-right">
+          <td *ngIf="!widget" class="d-none d-md-table-cell capacity text-right">
             <app-amount [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
           </td>
-          <td *ngIf="!widget" class="timestamp-first text-left">
+          <td *ngIf="!widget" class="fiat d-none d-md-table-cell text-right">
+            <app-fiat [value]="node.capacity"></app-fiat>
+          </td>
+          <td *ngIf="!widget" class="d-none d-md-table-cell text-right">
             <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.firstSeen" [hideTimeSince]="true"></app-timestamp>
           </td>
-          <td *ngIf="!widget" class="timestamp-update text-left">
+          <td *ngIf="!widget" class="d-none d-md-table-cell text-right">
             <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt" [hideTimeSince]="true"></app-timestamp>
           </td>
-          <td *ngIf="!widget" class="location text-right text-truncate">
+          <td *ngIf="!widget" class="d-none d-md-table-cell text-right text-truncate">
             <app-geolocation [data]="node.geolocation" [type]="'list-isp'"></app-geolocation>
           </td>
-      </tr>
+        </tr>
       </tbody>
-      <ng-template #skeleton>
-        <tbody>
-          <tr *ngFor="let item of skeletonRows">
-            <td class="rank text-left">
-              <span class="skeleton-loader"></span>
-            </td>
-            <td class="alias text-left">
-              <span class="skeleton-loader"></span>
-            </td>
-            <td class="channels text-right">
-              <span class="skeleton-loader"></span>
-            </td>
-            <td *ngIf="!widget" class="capacity text-right">
-              <span class="skeleton-loader"></span>
-            </td>
-            <td *ngIf="!widget" class="timestamp-first text-left">
-              <span class="skeleton-loader"></span>
-            </td>
-            <td *ngIf="!widget" class="timestamp-update text-left">
-              <span class="skeleton-loader"></span>
-            </td>
-            <td *ngIf="!widget" class="location text-right text-truncate">
-              <span class="skeleton-loader"></span>
-            </td>
-          </tr>
-        </tbody>
-      </ng-template>
     </table>
+
+    <ng-template [ngIf]="!widget">
+      <div class="clearfix"></div>
+      <br>
+    </ng-template>
   </div>
-</div>
\ No newline at end of file
+  
+</div>
diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss
index 59151f6b2..b7ed8cf04 100644
--- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss
+++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss
@@ -1,91 +1,48 @@
 .container-xl {
   max-width: 1400px;
-  padding-bottom: 100px;
-  @media (min-width: 960px) {
-    padding-left: 50px;
-    padding-right: 50px;
-  }
+}
+.container-xl.widget {
+  padding-right: 0px;
+  padding-left: 0px;
+  padding-bottom: 0px;
 }
 
-.table td, .table th {
-  padding: 0.5rem;
+tr, td, th {
+  border: 0px;
+  padding-top: 0.65rem !important;
+  padding-bottom: 0.7rem !important;
 }
 
-.full .rank {
-  width: 5%;
-}
-.widget .rank {
-  @media (min-width: 960px) {
-    width: 13%;
-  }
-  @media (max-width: 960px) {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
+.clear-link {
+  color: white;
 }
 
-.full .alias {
-  width: 20%;
+.pool {
+  width: 15%;
+  @media (max-width: 576px) {
+    width: 75%;
+  }
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 350px;
-  @media (max-width: 960px) {
-    width: 40%;
-    max-width: 500px;
-  }
+  white-space: nowrap;
+  max-width: 160px;
 }
-.widget .alias {
-  width: 60%;
-  overflow: hidden;
+.pool-name {
+  display: inline-block;
+  vertical-align: text-top;
   text-overflow: ellipsis;
-  max-width: 350px;
-  @media (max-width: 960px) {
-    max-width: 175px;
-  }
+  overflow: hidden;
 }
 
-.full .capacity {
+.liquidity {
   width: 10%;
-  @media (max-width: 960px) {
-    width: 30%;
-  }
-}
-.widget .capacity {
-  width: 32%;
-  @media (max-width: 960px) {
-    padding-left: 0px;
-    padding-right: 0px;
+  @media (max-width: 576px) {
+    width: 25%;
   }
 }
 
-.full .channels {
+.fiat {
   width: 15%;
-  padding-right: 50px;
-  @media (max-width: 960px) {
-    display: none;
-  }
+  font-family: monospace;
+  font-size: 14px;
 }
-
-.full .timestamp-first {
-  width: 10%;
-  @media (max-width: 960px) {
-    display: none;
-  }
-}
-
-.full .timestamp-update {
-  width: 10%;
-  @media (max-width: 960px) {
-    display: none;
-  }
-}
-
-.full .location {
-  width: 15%;
-  @media (max-width: 960px) {
-    width: 30%;
-  }
-  @media (max-width: 600px) {
-    display: none;
-  }
-}
\ No newline at end of file
diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts
index ac67787e6..f1740e5bc 100644
--- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts
+++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { map, Observable } from 'rxjs';
+import { StateService } from 'src/app/services/state.service';
 import { INodesRanking, ITopNodesPerChannels } from '../../../interfaces/node-api.interface';
 import { isMobile } from '../../../shared/common.utils';
 import { GeolocationData } from '../../../shared/components/geolocation/geolocation.component';
@@ -17,12 +18,16 @@ export class TopNodesPerChannels implements OnInit {
   
   topNodesPerChannels$: Observable<ITopNodesPerChannels[]>;
   skeletonRows: number[] = [];
+  currency$: Observable<string>;
 
   constructor(
     private apiService: LightningApiService,
+    private stateService: StateService,
   ) {}
 
   ngOnInit(): void {
+    this.currency$ = this.stateService.fiatCurrency$;
+    
     for (let i = 1; i <= (this.widget ? (isMobile() ? 8 : 6) : 100); ++i) {
       this.skeletonRows.push(i);
     }