Merge pull request #4665 from mempool/natsoni/fix-liquid-dashboard-mobile

Fix Liquid dashboard layout on mobile view

frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts

@@ -18,9 +18,9 @@ import { EChartsOption } from '../../graphs/echarts';
 })
 export class LbtcPegsGraphComponent implements OnInit, OnChanges {
   @Input() data: any;
+  @Input() height: number | string = '320';
   pegsChartOptions: EChartsOption;
 
-  height: number | string = '320';
   right: number | string = '10';
   top: number | string = '20';
   left: number | string = '50';

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

@@ -44,7 +44,7 @@
               <ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? lbtcPegs : mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
               <hr>
             </div>
-            <app-lbtc-pegs-graph [data]="fullHistory$ | async"></app-lbtc-pegs-graph>
+            <app-lbtc-pegs-graph [data]="fullHistory$ | async" [height]="lbtcPegGraphHeight"></app-lbtc-pegs-graph>
           </ng-template>
         </div>
       </div>
@@ -187,7 +187,7 @@
 <ng-template #loadingAssetsTable>
   <table class="table table-borderless table-striped asset-table">
     <tbody>
-      <tr *ngFor="let i of [1,2,3,4,5,6]">
+      <tr *ngFor="let i of getArrayFromNumber(this.nbFeaturedAssets)">
         <td class="asset-icon">
           <div class="skeleton-loader skeleton-loader-transactions"></div>
         </td>

frontend/src/app/dashboard/dashboard.component.scss

@@ -69,7 +69,7 @@
     @media (min-width: 485px) {
       margin: 0px auto 10px;
     }
-    @media (min-width: 785px) {
+    @media (min-width: 768px) {
       margin: 0px auto 0px;
     }
     &:last-child {

frontend/src/app/dashboard/dashboard.component.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, ChangeDetectionStrategy, Component, HostListener, OnDestroy, OnInit } from '@angular/core';
-import { combineLatest, EMPTY, merge, Observable, of, Subject, Subscription, timer } from 'rxjs';
+import { combineLatest, EMPTY, fromEvent, merge, Observable, of, Subject, Subscription, timer } from 'rxjs';
-import { catchError, delayWhen, filter, map, scan, share, shareReplay, startWith, switchMap, takeUntil, tap, throttleTime } from 'rxjs/operators';
+import { catchError, delayWhen, distinctUntilChanged, filter, map, scan, share, shareReplay, startWith, switchMap, takeUntil, tap, throttleTime } from 'rxjs/operators';
 import { AuditStatus, BlockExtended, CurrentPegs, OptimizedMempoolStats } from '../interfaces/node-api.interface';
 import { MempoolInfo, TransactionStripped, ReplacementInfo } from '../interfaces/websocket.interface';
 import { ApiService } from '../services/api.service';
@@ -33,6 +33,7 @@ interface MempoolStatsData {
 })
 export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   featuredAssets$: Observable<any>;
+  nbFeaturedAssets = 6;
   network$: Observable<string>;
   mempoolBlocksData$: Observable<MempoolBlocksData>;
   mempoolInfoData$: Observable<MempoolInfoData>;
@@ -58,6 +59,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
   currencySubscription: Subscription;
   currency: string;
   incomingGraphHeight: number = 300;
+  lbtcPegGraphHeight: number = 320;
   private lastPegBlockUpdate: number = 0;
   private lastPegAmount: string = '';
   private lastReservesBlockUpdate: number = 0;
@@ -153,16 +155,23 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
         })
       );
 
-    this.featuredAssets$ = this.apiService.listFeaturedAssets$()
+    const windowResize$ = fromEvent(window, 'resize').pipe(
-      .pipe(
+      distinctUntilChanged(),
-        map((featured) => {
+      startWith(null)
+    );
+  
+    this.featuredAssets$ = combineLatest([
+      this.apiService.listFeaturedAssets$(),
+      windowResize$
+    ]).pipe(
+        map(([featured, _]) => {
           const newArray = [];
           for (const feature of featured) {
             if (feature.ticker !== 'L-BTC' && feature.asset) {
               newArray.push(feature);
             }
           }
-          return newArray.slice(0, 6);
+          return newArray.slice(0, this.nbFeaturedAssets);
         }),
       );
 
@@ -362,17 +371,27 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
     return block.height;
   }
 
+  getArrayFromNumber(num: number): number[] {
+    return Array.from({ length: num }, (_, i) => i + 1);
+  }
+  
   @HostListener('window:resize', ['$event'])
   onResize(): void {
     if (window.innerWidth >= 992) {
       this.incomingGraphHeight = 300;
       this.goggleResolution = 82;
+      this.lbtcPegGraphHeight = 320;
+      this.nbFeaturedAssets = 6;
     } else if (window.innerWidth >= 768) {
       this.incomingGraphHeight = 215;
       this.goggleResolution = 80;
+      this.lbtcPegGraphHeight = 230;
+      this.nbFeaturedAssets = 4;
     } else {
       this.incomingGraphHeight = 180;
       this.goggleResolution = 86;
+      this.lbtcPegGraphHeight = 220;
+      this.nbFeaturedAssets = 4;
     }
   }
 }