Liquid dashboard updates. About page link.

This commit is contained in:
softsimon 2021-07-29 12:32:54 +03:00
parent 2de28b9926
commit e670f80fed
No known key found for this signature in database
GPG key ID: 488D7DCFB5A430D7
6 changed files with 20 additions and 8 deletions

View file

@ -32,6 +32,9 @@
<li class="nav-item mr-2" routerLinkActive="active"> <li class="nav-item mr-2" routerLinkActive="active">
<a class="nav-link" [routerLink]="['/api' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cogs']" [fixedWidth]="true" i18n-title="master-page.api" title="API"></fa-icon></a> <a class="nav-link" [routerLink]="['/api' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cogs']" [fixedWidth]="true" i18n-title="master-page.api" title="API"></fa-icon></a>
</li> </li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" href="https://mempool.space/about" (click)="collapse()"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" i18n-title="master-page.about" title="About"></fa-icon></a>
</li>
</ul> </ul>
</div> </div>
</nav> </nav>

View file

@ -1,5 +1,5 @@
<div class="text-center" class="blockchain-wrapper"> <div class="text-center" class="blockchain-wrapper">
<div class="position-container"> <div class="position-container {{ network }}">
<span> <span>
<app-mempool-blocks [isLoading$]="isLoading$"></app-mempool-blocks> <app-mempool-blocks [isLoading$]="isLoading$"></app-mempool-blocks>
<app-blockchain-blocks [isLoading$]="isLoading$"></app-blockchain-blocks> <app-blockchain-blocks [isLoading$]="isLoading$"></app-blockchain-blocks>

View file

@ -26,10 +26,17 @@
top: 75px; top: 75px;
} }
.position-container.liquid {
left: 15%;
}
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.position-container { .position-container {
left: 95%; left: 95%;
} }
.position-container.liquid {
left: 50%;
}
.position-container.loading { .position-container.loading {
left: 50%; left: 50%;
} }

View file

@ -1,6 +1,6 @@
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core'; import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { StateService } from 'src/app/services/state.service'; import { StateService } from 'src/app/services/state.service';
import { Subscription, Observable } from 'rxjs'; import { Observable } from 'rxjs';
@Component({ @Component({
selector: 'app-blockchain', selector: 'app-blockchain',
@ -10,6 +10,7 @@ import { Subscription, Observable } from 'rxjs';
}) })
export class BlockchainComponent implements OnInit { export class BlockchainComponent implements OnInit {
isLoading$: Observable<boolean>; isLoading$: Observable<boolean>;
network: string;
constructor( constructor(
private stateService: StateService, private stateService: StateService,
@ -17,5 +18,6 @@ export class BlockchainComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.isLoading$ = this.stateService.isLoadingWebSocket$; this.isLoading$ = this.stateService.isLoadingWebSocket$;
this.network = this.stateService.network;
} }
} }

View file

@ -45,7 +45,7 @@
<a class="nav-link" [routerLink]="['/api' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cogs']" [fixedWidth]="true" i18n-title="master-page.api" title="API"></fa-icon></a> <a class="nav-link" [routerLink]="['/api' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cogs']" [fixedWidth]="true" i18n-title="master-page.api" title="API"></fa-icon></a>
</li> </li>
<li class="nav-item" routerLinkActive="active"> <li class="nav-item" routerLinkActive="active">
<a class="nav-link" [routerLink]="['/about']" (click)="collapse()"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" i18n-title="master-page.about" title="About"></fa-icon></a> <a class="nav-link" href="https://mempool.space/about" (click)="collapse()"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" i18n-title="master-page.about" title="About"></fa-icon></a>
</li> </li>
</ul> </ul>
<app-search-form class="search-form-container" location="top" (searchTriggered)="collapse()"></app-search-form> <app-search-form class="search-form-container" location="top" (searchTriggered)="collapse()"></app-search-form>

View file

@ -2,7 +2,7 @@
<div class="container-xl dashboard-container"> <div class="container-xl dashboard-container">
<div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData"> <div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData">
<ng-template [ngIf]="collapseLevel === 'three'" [ngIfElse]="expanded"> <ng-template [ngIf]="collapseLevel === 'three'" [ngIfElse]="expanded">
<div class="col card-wrapper"> <div class="col card-wrapper" *ngIf="(network$ | async) !== 'liquid'">
<div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div> <div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
@ -24,12 +24,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col" *ngIf="(network$ | async) !== 'liquid'; else emptyBlock"> <div class="col" *ngIf="(network$ | async) !== 'liquid'">
<ng-container *ngTemplateOutlet="difficultyEpoch"></ng-container> <ng-container *ngTemplateOutlet="difficultyEpoch"></ng-container>
</div> </div>
</ng-template> </ng-template>
<ng-template #expanded> <ng-template #expanded>
<div class="col card-wrapper"> <div class="col card-wrapper" *ngIf="(network$ | async) !== 'liquid'">
<div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div> <div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
@ -37,7 +37,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col" *ngIf="(network$ | async) !== 'liquid'; else emptyBlock"> <div class="col" *ngIf="(network$ | async) !== 'liquid'">
<ng-container *ngTemplateOutlet="difficultyEpoch"></ng-container> <ng-container *ngTemplateOutlet="difficultyEpoch"></ng-container>
</div> </div>
<div class="col"> <div class="col">