machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change collapsing dashboard into 3 levels.

Browse Source
This commit is contained in:
softsimon
2020-10-27 16:34:27 +07:00
parent 91f9bb3e5f
commit 2ac8608620
4 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/app/dashboard/dashboard.component.html
View File

@@ -2,7 +2,7 @@
<div class="container-xl mt-2">
<div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData">
<ng-template [ngIf]="collapsed" [ngIfElse]="expanded">
<ng-template [ngIf]="collapseLevel === 'three'" [ngIfElse]="expanded">
<div class="col mb-4">
<div class="card text-center">
<div class="card-body">
@@ -68,6 +68,7 @@
</div>
</div>
</div>
<ng-template [ngIf]="collapseLevel === 'one'">
<div class="col mb-4">
<div class="card text-center">
<div class="card-body">
@@ -122,9 +123,15 @@
</div>
</div>
</ng-template>
</ng-template>
</div>
<button type="button" class="btn btn-secondary btn-sm d-block mx-auto" (click)="toggleCollapsed()">{{ collapsed ? 'Expand' : 'Collapse' }}</button>
<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" title="Collapse"></fa-icon>
<fa-icon *ngSwitchDefault [icon]="['fas', 'angle-up']" [fixedWidth]="true" title="Expand"></fa-icon>
</div>
</button>
<br>