From 6c0fe3d7a16fbbc1f08e43b73e261d7f8066a1b8 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Thu, 16 Jun 2022 09:17:44 +0200
Subject: [PATCH] Remove dashboard row collasping feature

---
 .../language-selector.component.html          |   2 +-
 .../app/dashboard/dashboard.component.html    | 263 ++++++++----------
 .../src/app/dashboard/dashboard.component.ts  |  13 -
 3 files changed, 114 insertions(+), 164 deletions(-)

diff --git a/frontend/src/app/components/language-selector/language-selector.component.html b/frontend/src/app/components/language-selector/language-selector.component.html
index 81fcc8985..dee1e3acb 100644
--- a/frontend/src/app/components/language-selector/language-selector.component.html
+++ b/frontend/src/app/components/language-selector/language-selector.component.html
@@ -1,4 +1,4 @@
-<div [formGroup]="languageForm" class="text-small text-center mt-4">
+<div [formGroup]="languageForm" class="text-small text-center">
     <select formControlName="language" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 130px;" (change)="changeLanguage()">
         <option *ngFor="let lang of languages" [value]="lang.code">{{ lang.name }}</option>
     </select>
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 4eb95c1ca..c66750f70 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -1,8 +1,8 @@
 
 <div class="container-xl dashboard-container">
   <div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData">
-    <ng-template [ngIf]="collapseLevel === 'three'" [ngIfElse]="expanded">
-      <div class="col card-wrapper" *ngIf="(network$ | async) !== 'liquid' && (network$ | async) !== 'liquidtestnet'">
+    <ng-container *ngIf="(network$ | async) !== 'liquid' && (network$ | async) !== 'liquidtestnet'">
+      <div class="col card-wrapper">
         <div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
         <div class="card">
           <div class="card-body less-padding">
@@ -10,172 +10,135 @@
           </div>
         </div>
       </div>
-      <div class="col" *ngIf="(network$ | async) !== 'liquid' && (network$ | async) !== 'liquidtestnet'">
+      <div class="col">
         <app-difficulty></app-difficulty>
       </div>
-      <div class="col">
-        <div class="card">
-          <div class="card-body">
+    </ng-container>
+    <div class="col">
+      <div class="card graph-card">
+        <div class="card-body pl-0">
+          <div style="padding-left: 1.25rem;">
             <ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? lbtcPegs : mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
-          </div>
-        </div>
-      </div>
-      <div class="col">
-        <div class="card">
-          <div class="card-body">
-            <ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? mempoolTable : txPerSecond; context: { $implicit: mempoolInfoData }"></ng-container>
-          </div>
-        </div>
-      </div>
-    </ng-template>
-    <ng-template #expanded>
-      <ng-container *ngIf="(network$ | async) !== 'liquid' && (network$ | async) !== 'liquidtestnet'">
-        <div class="col card-wrapper">
-          <div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
-          <div class="card">
-            <div class="card-body less-padding">
-              <app-fees-box class="d-block"></app-fees-box>
-            </div>
-          </div>
-        </div>
-        <div class="col">
-          <app-difficulty></app-difficulty>
-        </div>
-      </ng-container>
-      <div class="col">
-        <div class="card graph-card">
-          <div class="card-body pl-0">
-            <div style="padding-left: 1.25rem;">
-              <ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? lbtcPegs : mempoolTable; context: { $implicit: mempoolInfoData }"></ng-container>
-              <hr>
-            </div>
-            <ng-template [ngIf]="(network$ | async) !== 'liquid'" [ngIfElse]="liquidPegs">
-              <ng-container *ngIf="{ value: (mempoolStats$ | async) } as mempoolStats">
-                <div class="mempool-graph">
-                  <app-mempool-graph
-                  [template]="'widget'"
-                  [limitFee]="150"
-                  [limitFilterFee]="1"
-                  [data]="mempoolStats.value?.mempool"
-                  [windowPreferenceOverride]="'2h'"
-                  ></app-mempool-graph>
-                </div>
-              </ng-container>
-            </ng-template>
-            <ng-template #liquidPegs>
-              <app-lbtc-pegs-graph [data]="liquidPegsMonth$ | async"></app-lbtc-pegs-graph>
-            </ng-template>
-          </div>
-        </div>
-      </div>
-      <div class="col">
-        <div class="card graph-card">
-          <div class="card-body">
-            <ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? mempoolTable : txPerSecond; context: { $implicit: mempoolInfoData }"></ng-container>
             <hr>
-            <div class="mempool-graph" *ngIf="stateService.network === 'liquid'; else mempoolGraph">
-              <table class="table table-borderless table-striped" *ngIf="(featuredAssets$ | async) as featuredAssets else loadingAssetsTable">
-                <tbody>
-                  <tr *ngFor="let group of featuredAssets">
-                    <td class="asset-icon">
-                      <a [routerLink]="['/assets/asset/' | relativeUrl, group.asset]">
-                        <img class="assetIcon" [src]="'/api/v1/asset/' + group.asset + '/icon'">
-                      </a>
-                    </td>
-                    <td class="asset-title">
-                      <a [routerLink]="['/assets/asset/' | relativeUrl, group.asset]">{{ group.name }}</a>
-                    </td>
-                    <td class="circulating-amount"><app-asset-circulation [assetId]="group.asset"></app-asset-circulation></td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <ng-template #mempoolGraph>
-              <div class="mempool-graph" *ngIf="{ value: (mempoolStats$ | async) } as mempoolStats">
-                <app-incoming-transactions-graph
-                  [left]="50"
-                  [data]="mempoolStats.value?.weightPerSecond"
-                  [windowPreferenceOverride]="'2h'"
-                  ></app-incoming-transactions-graph>
-              </div>
-            </ng-template>
           </div>
+          <ng-template [ngIf]="(network$ | async) !== 'liquid'" [ngIfElse]="liquidPegs">
+            <ng-container *ngIf="{ value: (mempoolStats$ | async) } as mempoolStats">
+              <div class="mempool-graph">
+                <app-mempool-graph
+                [template]="'widget'"
+                [limitFee]="150"
+                [limitFilterFee]="1"
+                [data]="mempoolStats.value?.mempool"
+                [windowPreferenceOverride]="'2h'"
+                ></app-mempool-graph>
+              </div>
+            </ng-container>
+          </ng-template>
+          <ng-template #liquidPegs>
+            <app-lbtc-pegs-graph [data]="liquidPegsMonth$ | async"></app-lbtc-pegs-graph>
+          </ng-template>
         </div>
       </div>
-      <ng-template [ngIf]="collapseLevel === 'one'">
-      <div class="col" style="max-height: 410px">
-        <div class="card">
-          <div class="card-body">
-            <a class="title-link" href="" [routerLink]="['/blocks' | relativeUrl]">
-              <h5 class="card-title d-inline" i18n="dashboard.latest-blocks">Latest blocks</h5>
-              <span>&nbsp;</span>
-              <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: '#4a68b9'"></fa-icon>
-            </a>
-            <table class="table lastest-blocks-table">
-              <thead>
-                <th class="table-cell-height" i18n="dashboard.latest-blocks.height">Height</th>
-                <th *ngIf="!stateService.env.MINING_DASHBOARD" class="table-cell-mined" i18n="dashboard.latest-blocks.mined">Mined</th>
-                <th *ngIf="stateService.env.MINING_DASHBOARD" class="table-cell-mined pl-lg-4" i18n="mining.pool-name">Pool</th>
-                <th class="table-cell-transaction-count" i18n="dashboard.latest-blocks.transaction-count">TXs</th>
-                <th class="table-cell-size" i18n="dashboard.latest-blocks.size">Size</th>
-              </thead>
+    </div>
+    <div class="col">
+      <div class="card graph-card">
+        <div class="card-body">
+          <ng-container *ngTemplateOutlet="stateService.network === 'liquid' ? mempoolTable : txPerSecond; context: { $implicit: mempoolInfoData }"></ng-container>
+          <hr>
+          <div class="mempool-graph" *ngIf="stateService.network === 'liquid'; else mempoolGraph">
+            <table class="table table-borderless table-striped" *ngIf="(featuredAssets$ | async) as featuredAssets else loadingAssetsTable">
               <tbody>
-                <tr *ngFor="let block of blocks$ | async; let i = index; trackBy: trackByBlock">
-                  <td class="table-cell-height" ><a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
-                  <td *ngIf="!stateService.env.MINING_DASHBOARD" class="table-cell-mined" ><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></td>
-                  <td *ngIf="stateService.env.MINING_DASHBOARD" class="table-cell-mined pl-lg-4">
-                    <a class="clear-link" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
-                      <img width="22" height="22" src="{{ block.extras.pool['logo'] }}"
-                        onError="this.src = './resources/mining-pools/default.svg'">
-                      <span class="pool-name">{{ block.extras.pool.name }}</span>
+                <tr *ngFor="let group of featuredAssets">
+                  <td class="asset-icon">
+                    <a [routerLink]="['/assets/asset/' | relativeUrl, group.asset]">
+                      <img class="assetIcon" [src]="'/api/v1/asset/' + group.asset + '/icon'">
                     </a>
                   </td>
-                  <td class="table-cell-transaction-count">{{ block.tx_count | number }}</td>
-                  <td class="table-cell-size">
-                    <div class="progress">
-                      <div class="progress-bar progress-mempool {{ network$ | async }}" role="progressbar" [ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }">&nbsp;</div>
-                      <div class="progress-text" [innerHTML]="block.size | bytes: 2"></div>
-                    </div>
+                  <td class="asset-title">
+                    <a [routerLink]="['/assets/asset/' | relativeUrl, group.asset]">{{ group.name }}</a>
                   </td>
+                  <td class="circulating-amount"><app-asset-circulation [assetId]="group.asset"></app-asset-circulation></td>
                 </tr>
               </tbody>
             </table>
           </div>
+          <ng-template #mempoolGraph>
+            <div class="mempool-graph" *ngIf="{ value: (mempoolStats$ | async) } as mempoolStats">
+              <app-incoming-transactions-graph
+                [left]="50"
+                [data]="mempoolStats.value?.weightPerSecond"
+                [windowPreferenceOverride]="'2h'"
+                ></app-incoming-transactions-graph>
+            </div>
+          </ng-template>
         </div>
       </div>
-      <div class="col" style="max-height: 410px">
-        <div class="card">
-          <div class="card-body">
-            <h5 class="card-title" i18n="dashboard.latest-transactions">Latest transactions</h5>
-            <table class="table latest-transactions">
-              <thead>
-                <th class="table-cell-txid" i18n="dashboard.latest-transactions.txid">TXID</th>
-                <th class="table-cell-satoshis" i18n="dashboard.latest-transactions.amount">Amount</th>
-                <th class="table-cell-fiat" *ngIf="(network$ | async) === ''" i18n="dashboard.latest-transactions.USD">USD</th>
-                <th class="table-cell-fees" i18n="dashboard.latest-transactions.fee">Fee</th>
-              </thead>
-              <tbody>
-                <tr *ngFor="let transaction of transactions$ | async; let i = index;">
-                  <td class="table-cell-txid"><a [routerLink]="['/tx' | relativeUrl, transaction.txid]">{{ transaction.txid | shortenString : 10 }}</a></td>
-                  <td class="table-cell-satoshis"><app-amount *ngIf="(network$ | async) !== 'liquid' && (network$ | async) !== 'liquidtestnet'; else liquidAmount" [satoshis]="transaction.value" digitsInfo="1.2-4" [noFiat]="true"></app-amount><ng-template #liquidAmount i18n="shared.confidential">Confidential</ng-template></td>
-                  <td class="table-cell-fiat" *ngIf="(network$ | async) === ''" ><app-fiat [value]="transaction.value" digitsInfo="1.0-0"></app-fiat></td>
-                  <td class="table-cell-fees">{{ transaction.fee / transaction.vsize | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </ng-template>
-    </ng-template>
-  </div>
-
-  <button type="button" class="btn btn-secondary btn-sm d-block mx-auto" (click)="toggleCollapsed()">
-    <div [ngSwitch]="collapseLevel">
-      <fa-icon *ngSwitchCase="'three'" [icon]="['fas', 'angle-down']" [fixedWidth]="true" i18n-title="dashboard.expand" title="Expand"></fa-icon>
-      <fa-icon *ngSwitchDefault [icon]="['fas', 'angle-up']" [fixedWidth]="true" i18n-title="dashboard.collapse" title="Collapse"></fa-icon>
     </div>
-  </button>
+    <div class="col" style="max-height: 410px">
+      <div class="card">
+        <div class="card-body">
+          <a class="title-link" href="" [routerLink]="['/blocks' | relativeUrl]">
+            <h5 class="card-title d-inline" i18n="dashboard.latest-blocks">Latest blocks</h5>
+            <span>&nbsp;</span>
+            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: '#4a68b9'"></fa-icon>
+          </a>
+          <table class="table lastest-blocks-table">
+            <thead>
+              <th class="table-cell-height" i18n="dashboard.latest-blocks.height">Height</th>
+              <th *ngIf="!stateService.env.MINING_DASHBOARD" class="table-cell-mined" i18n="dashboard.latest-blocks.mined">Mined</th>
+              <th *ngIf="stateService.env.MINING_DASHBOARD" class="table-cell-mined pl-lg-4" i18n="mining.pool-name">Pool</th>
+              <th class="table-cell-transaction-count" i18n="dashboard.latest-blocks.transaction-count">TXs</th>
+              <th class="table-cell-size" i18n="dashboard.latest-blocks.size">Size</th>
+            </thead>
+            <tbody>
+              <tr *ngFor="let block of blocks$ | async; let i = index; trackBy: trackByBlock">
+                <td class="table-cell-height" ><a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
+                <td *ngIf="!stateService.env.MINING_DASHBOARD" class="table-cell-mined" ><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></td>
+                <td *ngIf="stateService.env.MINING_DASHBOARD" class="table-cell-mined pl-lg-4">
+                  <a class="clear-link" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
+                    <img width="22" height="22" src="{{ block.extras.pool['logo'] }}"
+                      onError="this.src = './resources/mining-pools/default.svg'">
+                    <span class="pool-name">{{ block.extras.pool.name }}</span>
+                  </a>
+                </td>
+                <td class="table-cell-transaction-count">{{ block.tx_count | number }}</td>
+                <td class="table-cell-size">
+                  <div class="progress">
+                    <div class="progress-bar progress-mempool {{ network$ | async }}" role="progressbar" [ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }">&nbsp;</div>
+                    <div class="progress-text" [innerHTML]="block.size | bytes: 2"></div>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+    <div class="col" style="max-height: 410px">
+      <div class="card">
+        <div class="card-body">
+          <h5 class="card-title" i18n="dashboard.latest-transactions">Latest transactions</h5>
+          <table class="table latest-transactions">
+            <thead>
+              <th class="table-cell-txid" i18n="dashboard.latest-transactions.txid">TXID</th>
+              <th class="table-cell-satoshis" i18n="dashboard.latest-transactions.amount">Amount</th>
+              <th class="table-cell-fiat" *ngIf="(network$ | async) === ''" i18n="dashboard.latest-transactions.USD">USD</th>
+              <th class="table-cell-fees" i18n="dashboard.latest-transactions.fee">Fee</th>
+            </thead>
+            <tbody>
+              <tr *ngFor="let transaction of transactions$ | async; let i = index;">
+                <td class="table-cell-txid"><a [routerLink]="['/tx' | relativeUrl, transaction.txid]">{{ transaction.txid | shortenString : 10 }}</a></td>
+                <td class="table-cell-satoshis"><app-amount *ngIf="(network$ | async) !== 'liquid' && (network$ | async) !== 'liquidtestnet'; else liquidAmount" [satoshis]="transaction.value" digitsInfo="1.2-4" [noFiat]="true"></app-amount><ng-template #liquidAmount i18n="shared.confidential">Confidential</ng-template></td>
+                <td class="table-cell-fiat" *ngIf="(network$ | async) === ''" ><app-fiat [value]="transaction.value" digitsInfo="1.0-0"></app-fiat></td>
+                <td class="table-cell-fees">{{ transaction.fee / transaction.vsize | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
+              </tr>
+            </tbody>
+          </table>
+          <div class="">&nbsp;</div>
+        </div>
+      </div>
+    </div>
+  </div>
 
   <app-language-selector></app-language-selector>
 
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index 910d6a81a..68c4ff35a 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -33,7 +33,6 @@ interface MempoolStatsData {
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DashboardComponent implements OnInit {
-  collapseLevel: string;
   featuredAssets$: Observable<any>;
   network$: Observable<string>;
   mempoolBlocksData$: Observable<MempoolBlocksData>;
@@ -63,7 +62,6 @@ export class DashboardComponent implements OnInit {
     this.seoService.resetTitle();
     this.websocketService.want(['blocks', 'stats', 'mempool-blocks', 'live-2h-chart']);
     this.network$ = merge(of(''), this.stateService.networkChanged$);
-    this.collapseLevel = this.storageService.getValue('dashboard-collapsed') || 'one';
     this.mempoolLoadingStatus$ = this.stateService.loadingIndicators$
       .pipe(
         map((indicators) => indicators.mempool !== undefined ? indicators.mempool : 100)
@@ -230,15 +228,4 @@ export class DashboardComponent implements OnInit {
   trackByBlock(index: number, block: BlockExtended) {
     return block.height;
   }
-
-  toggleCollapsed() {
-    if (this.collapseLevel === 'one') {
-      this.collapseLevel = 'two';
-    } else if (this.collapseLevel === 'two') {
-      this.collapseLevel = 'three';
-    } else {
-      this.collapseLevel = 'one';
-    }
-    this.storageService.setValue('dashboard-collapsed', this.collapseLevel);
-  }
 }