Merge pull request #2958 from mempool/mononaut/ln-mobile-css-fixes

Assorted mobile/tablet CSS fixes

frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts

@@ -213,6 +213,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
         },
       },
       legend: (data.series.length === 0) ? undefined : {
+        padding: [10, 75],
         data: data.legends,
         selected: JSON.parse(this.storageService.getValue('fee_rates_legend')) ?? {
           'Min': true,

frontend/src/app/lightning/channel/channel.component.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: row;
 
-  @media (max-width: 768px) {
+  @media (max-width: 767.98px) {
     flex-direction: column;
   }
 }
@@ -10,16 +10,13 @@
 .tx-link {
   display: flex;
 	flex-grow: 1;
-	@media (min-width: 650px) {
+	@media (min-width: 768px) {
+    top: 1px;
+    position: relative;
     align-self: end;
     margin-left: 15px;
     margin-top: 0px;
-    margin-bottom: -3px;
-	}
-	@media (min-width: 768px) {
     margin-bottom: 4px;
-    top: 1px;
-    position: relative;
 	}
 	@media (max-width: 768px) {
 	  order: 2;

frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.html

@@ -56,7 +56,7 @@
 
     <!-- Top nodes per capacity -->
     <div class="col">
-      <div class="card" style="height: 409px">
+      <div class="card">
         <div class="card-body">
           <a class="title-link" href="" [routerLink]="['/lightning/nodes/rankings/liquidity' | relativeUrl]">
             <h5 class="card-title d-inline" i18n="lightning.liquidity-ranking">Liquidity Ranking</h5>
@@ -70,7 +70,7 @@
 
     <!-- Top nodes per channels -->
     <div class="col">
-      <div class="card" style="height: 409px">
+      <div class="card">
         <div class="card-body">
           <a class="title-link" href="" [routerLink]="['/lightning/nodes/rankings/connectivity' | relativeUrl]">
             <h5 class="card-title d-inline" i18n="lightning.connectivity-ranking">Connectivity Ranking</h5>

frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html

@@ -21,7 +21,7 @@
       <div class="spinner-border text-light"></div>
     </div>
 
-    <table class="table table-borderless text-center m-auto" style="max-width: 900px">
+    <table class="table table-borderless table-fixed text-center m-auto" style="max-width: 900px">
       <thead>
         <tr>
           <th class="text-left rank" i18n="mining.rank">Rank</th>

frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.scss

@@ -42,14 +42,14 @@
 }
 
 .rank {
-  width: 20%;
+  width: 8%;
   @media (max-width: 576px) {
     display: none
   }
 }
 
 .name {
-  width: 20%;
+  width: 36%;
   @media (max-width: 576px) {
     width: 80%;
     max-width: 150px;
@@ -59,21 +59,21 @@
 }
 
 .share {
-  width: 20%;
+  width: 15%;
   @media (max-width: 576px) {
     display: none
   }
 }
 
 .nodes {
-  width: 20%;
+  width: 15%;
   @media (max-width: 576px) {
     width: 10%;
   }
 }
 
 .capacity {
-  width: 20%;
+  width: 26%;
   @media (max-width: 576px) {
     width: 10%;
     max-width: 100px;
@@ -91,3 +91,8 @@ a:hover .link {
 .flag {
   font-size: 20px;
 }
+
+.text-truncate .link {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html

@@ -51,7 +51,7 @@
       <app-toggle [textLeft]="'Sort by nodes'" [textRight]="'capacity'" [checked]="true" (toggleStatusChanged)="onGroupToggleStatusChanged($event)"></app-toggle>
     </div>
 
-    <table class="table table-borderless text-center m-auto" style="max-width: 900px"  *ngIf="!widget">
+    <table class="table table-borderless table-fixed text-center m-auto" style="max-width: 900px"  *ngIf="!widget">
       <thead>
         <tr>
           <th class="rank text-left pl-0" i18n="mining.rank">Rank</th>

frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.html

@@ -4,7 +4,7 @@
   </h1>
 
   <div [class]="widget ? 'widget' : 'full'">
-    <table class="table table-borderless">
+    <table class="table table-borderless table-fixed">
       <thead>
         <th class="rank"></th>
         <th class="alias text-left" i18n="nodes.alias">Alias</th>
@@ -29,10 +29,10 @@
             {{ node.channels | number }}
           </td>
           <td *ngIf="!widget" class="timestamp-first text-left">
-            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.firstSeen"></app-timestamp>
+            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.firstSeen" [hideTimeSince]="true"></app-timestamp>
           </td>
           <td *ngIf="!widget" class="timestamp-update text-left">
-            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt"></app-timestamp>
+            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt" [hideTimeSince]="true"></app-timestamp>
           </td>
           <td *ngIf="!widget" class="location text-right text-truncate">
             <app-geolocation [data]="node.geolocation" [type]="'list-isp'"></app-geolocation>

frontend/src/app/lightning/nodes-ranking/top-nodes-per-capacity/top-nodes-per-capacity.component.scss

@@ -1,7 +1,7 @@
 .container-xl {
   max-width: 1400px;
   padding-bottom: 100px;
-  @media (min-width: 767.98px) {
+  @media (min-width: 960px) {
     padding-left: 50px;
     padding-right: 50px;
   }
@@ -15,40 +15,44 @@
   width: 5%;
 }
 .widget .rank {
-  @media (min-width: 767.98px) {
+  @media (min-width: 960px) {
     width: 13%;
   }
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
     padding-left: 0px;
     padding-right: 0px;
   }
 }
 
 .full .alias {
-  width: 10%;
+  width: 20%;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 350px;
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
-    max-width: 175px;
+    width: 40%;
+    max-width: 500px;
   }
 }
 .widget .alias {
-  width: 55%;
+  width: 60%;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 350px;
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
     max-width: 175px;
   }
 }
 
 .full .capacity {
   width: 10%;
+  @media (max-width: 960px) {
+    width: 30%;
+  }
 }
 .widget .capacity {
   width: 32%;
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
     padding-left: 0px;
     padding-right: 0px;
   }
@@ -57,28 +61,31 @@
 .full .channels {
   width: 15%;
   padding-right: 50px;
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
     display: none;
   }
 }
 
 .full .timestamp-first {
-  width: 15%;
+  width: 10%;
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
     display: none;
   }
 }
 
 .full .timestamp-update {
-  width: 15%;
+  width: 10%;
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
     display: none;
   }
 }
 
 .full .location {
-  width: 10%;
+  width: 15%;
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
+    width: 30%;
+  }
+  @media (max-width: 600px) {
     display: none;
   }
 }

frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.html

@@ -29,10 +29,10 @@
             <app-amount [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
           </td>
           <td *ngIf="!widget" class="timestamp-first text-left">
-            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.firstSeen"></app-timestamp>
+            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.firstSeen" [hideTimeSince]="true"></app-timestamp>
           </td>
           <td *ngIf="!widget" class="timestamp-update text-left">
-            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt"></app-timestamp>
+            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt" [hideTimeSince]="true"></app-timestamp>
           </td>
           <td *ngIf="!widget" class="location text-right text-truncate">
             <app-geolocation [data]="node.geolocation" [type]="'list-isp'"></app-geolocation>

frontend/src/app/lightning/nodes-ranking/top-nodes-per-channels/top-nodes-per-channels.component.scss

@@ -1,7 +1,7 @@
 .container-xl {
   max-width: 1400px;
   padding-bottom: 100px;
-  @media (min-width: 767.98px) {
+  @media (min-width: 960px) {
     padding-left: 50px;
     padding-right: 50px;
   }
@@ -15,70 +15,77 @@
   width: 5%;
 }
 .widget .rank {
-  @media (min-width: 767.98px) {
+  @media (min-width: 960px) {
     width: 13%;
   }
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
     padding-left: 0px;
     padding-right: 0px;
   }
 }
 
 .full .alias {
-  width: 10%;
+  width: 20%;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 350px;
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
-    max-width: 175px;
+    width: 40%;
+    max-width: 500px;
   }
 }
 .widget .alias {
-  width: 55%;
+  width: 60%;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 350px;
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
     max-width: 175px;
   }
 }
 
-.full .channels {
+.full .capacity {
   width: 10%;
+  @media (max-width: 960px) {
+    width: 30%;
+  }
 }
-.widget .channels {
+.widget .capacity {
   width: 32%;
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
     padding-left: 0px;
     padding-right: 0px;
   }
 }
 
-.full .capacity {
+.full .channels {
   width: 15%;
   padding-right: 50px;
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
     display: none;
   }
 }
 
 .full .timestamp-first {
-  width: 15%;
+  width: 10%;
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
     display: none;
   }
 }
 
 .full .timestamp-update {
-  width: 15%;
+  width: 10%;
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
     display: none;
   }
 }
 
 .full .location {
-  width: 10%;
+  width: 15%;
-  @media (max-width: 767.98px) {
+  @media (max-width: 960px) {
+    width: 30%;
+  }
+  @media (max-width: 600px) {
     display: none;
   }
 }

frontend/src/app/shared/components/timestamp/timestamp.component.html

@@ -1,7 +1,7 @@
 <span *ngIf="seconds === undefined">-</span>
 <span *ngIf="seconds !== undefined">
   &lrm;{{ seconds * 1000 | date: customFormat ?? 'yyyy-MM-dd HH:mm' }}
-  <div class="lg-inline">
+  <div class="lg-inline" *ngIf="!hideTimeSince">
     <i class="symbol">(<app-time-since [time]="seconds" [fastRender]="true"></app-time-since>)</i>
   </div>
 </span>

frontend/src/app/shared/components/timestamp/timestamp.component.ts

@@ -10,6 +10,7 @@ export class TimestampComponent implements OnChanges {
   @Input() unixTime: number;
   @Input() dateString: string;
   @Input() customFormat: string;
+  @Input() hideTimeSince: boolean = false;
 
   seconds: number | undefined = undefined;