From a26dc977ba0783bc6beb492741c2f1a007531e4e Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Fri, 24 Feb 2023 14:20:16 +0900
Subject: [PATCH] Hide new columns when screen width is too small

---
 .../top-nodes-per-capacity.component.html              |  4 ++--
 .../top-nodes-per-capacity.component.scss              |  3 +++
 .../top-nodes-per-channels.component.html              |  6 +++---
 .../top-nodes-per-channels.component.scss              | 10 +++++-----
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html
index a9e30705e..3efbc8594 100644
--- a/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html
+++ b/frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html
@@ -10,7 +10,7 @@
       <thead>
         <th class="text-left" i18n="nodes.alias">Alias</th>
         <th class="liquidity text-right" i18n="node.liquidity">Liquidity</th>
-        <th class="d-none d-md-table-cell text-right" i18n="node.liquidity">{{ currency$ | async }}</th>
+        <th class="d-table-cell fiat text-right" [class]="{'widget': widget}">{{ currency$ | async }}</th>
         <th *ngIf="!widget" class="d-none d-md-table-cell channels text-right" i18n="lightning.channels">Channels</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>
@@ -28,7 +28,7 @@
           <td class="text-right">
             <app-amount [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
           </td>
-          <td class="fiat d-none d-md-table-cell text-right">
+          <td class="d-table-cell fiat text-right" [ngClass]="{'widget': widget}">
             <app-fiat [value]="node.capacity"></app-fiat>
           </td>
           <td *ngIf="!widget" class="d-none d-md-table-cell text-right">
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 b7ed8cf04..452122d8e 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
@@ -45,4 +45,7 @@ tr, td, th {
   width: 15%;
   font-family: monospace;
   font-size: 14px;
+  @media (max-width: 991px) {
+    display: none !important;
+  }
 }
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 538cae1c2..4bab712a8 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
@@ -14,7 +14,7 @@
         <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 class="d-none d-md-table-cell text-right" i18n="lightning.location">Location</th>
+        <th class="geolocation d-table-cell text-right" i18n="lightning.location">Location</th>
       </thead>
       <tbody *ngIf="topNodesPerChannels$ | async as nodes">
         <tr *ngFor="let node of nodes;">
@@ -26,7 +26,7 @@
             </div>
           </td>
           <td class="text-right">
-            {{ node.channels | number }}
+            {{ node.channels ? (node.channels | number) : '~' }}
           </td>
           <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>
@@ -40,7 +40,7 @@
           <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 class="d-none d-md-table-cell text-right text-truncate">
+          <td class="geolocation d-table-cell text-right text-truncate">
             <app-geolocation [data]="node.geolocation" [type]="'list-isp'"></app-geolocation>
           </td>
         </tr>
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 ffde7c479..eba9afee9 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
@@ -44,8 +44,8 @@ tr, td, th {
   }
 }
 
-.fiat {
-  width: 15%;
-  font-family: monospace;
-  font-size: 14px;
-}
+.geolocation {
+  @media (max-width: 991px) {
+    display: none !important;
+  }
+}
\ No newline at end of file