Make base module and index.html file configurable with BASE_MODULE. Adding bare Liquid module.
This commit is contained in:
softsimon
@@ -0,0 +1,49 @@
|
||||
<ng-container *ngIf="{ val: network$ | async } as network">
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
|
||||
<a class="navbar-brand" [routerLink]="['/' | relativeUrl]" style="position: relative;">
|
||||
<ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
|
||||
<img [src]="'./resources/liquid-network-logo.svg'" height="35" width="120" class="logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }">
|
||||
<div class="connection-badge">
|
||||
<div class="badge badge-warning" *ngIf="connectionState.val === 0" i18n="master-page.offline">Offline</div>
|
||||
<div class="badge badge-warning" *ngIf="connectionState.val === 1" i18n="master-page.reconnecting">Reconnecting...</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</a>
|
||||
|
||||
<div class="navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav {{ network.val }}">
|
||||
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
|
||||
<a class="nav-link" [routerLink]="['/' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'tachometer-alt']" [fixedWidth]="true" i18n-title="master-page.dashboard" title="Dashboard"></fa-icon></a>
|
||||
</li>
|
||||
<li class="nav-item" routerLinkActive="active">
|
||||
<a class="nav-link" [routerLink]="['/blocks' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cubes']" [fixedWidth]="true" i18n-title="master-page.blocks" title="Blocks"></fa-icon></a>
|
||||
</li>
|
||||
<li class="nav-item" routerLinkActive="active">
|
||||
<a class="nav-link" [routerLink]="['/graphs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'chart-area']" [fixedWidth]="true" i18n-title="master-page.graphs" title="Graphs"></fa-icon></a>
|
||||
</li>
|
||||
<li class="nav-item d-none d-lg-block" routerLinkActive="active">
|
||||
<a class="nav-link" [routerLink]="['/tv' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'tv']" [fixedWidth]="true" i18n-title="master-page.tvview" title="TV view"></fa-icon></a>
|
||||
</li>
|
||||
<li class="nav-item" routerLinkActive="active">
|
||||
<a class="nav-link" [routerLink]="['/assets']" (click)="collapse()"><fa-icon [icon]="['fas', 'database']" [fixedWidth]="true" i18n-title="master-page.assets" title="Assets"></fa-icon></a>
|
||||
</li>
|
||||
<li [hidden]="isMobile" 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>
|
||||
</li>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
<app-search-form class="search-form-container" location="top" (searchTriggered)="collapse()"></app-search-form>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<br />
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
<br>
|
||||
|
||||
</ng-container>
|
||||
@@ -0,0 +1,135 @@
|
||||
li.nav-item.active {
|
||||
background-color: #653b9c;
|
||||
}
|
||||
|
||||
fa-icon {
|
||||
font-size: 1.66em;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
z-index: 100;
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
li.nav-item {
|
||||
margin: auto 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.navbar {
|
||||
padding: 0rem 2rem;
|
||||
}
|
||||
fa-icon {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.dropdown-container {
|
||||
margin-right: 16px;
|
||||
}
|
||||
li.nav-item {
|
||||
margin: auto 0px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
background: #212121;
|
||||
bottom: 0;
|
||||
box-shadow: 0px 0px 15px 0px #000;
|
||||
flex-direction: row;
|
||||
left: 0;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
@media (min-width: 992px) {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
position: relative;
|
||||
width: auto;
|
||||
}
|
||||
a {
|
||||
font-size: 0.8em;
|
||||
@media (min-width: 375px) {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.navbar-collapse {
|
||||
flex-basis: auto;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.navbar-collapse {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.navbar-brand {
|
||||
width: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
box-shadow: 0px 0px 15px 0px #000;
|
||||
}
|
||||
|
||||
.connection-badge {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 0px;
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin: 0 auto;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.mainnet.active {
|
||||
background-color: #653b9c;
|
||||
}
|
||||
|
||||
.liquid.active {
|
||||
background-color: #116761;
|
||||
}
|
||||
|
||||
.testnet.active {
|
||||
background-color: #1d486f;
|
||||
}
|
||||
|
||||
.signet.active {
|
||||
background-color: #6f1d5d;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
border-top: 1px solid #121420;
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
vertical-align: 0.1em;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.search-form-container {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
.navbar-dark .navbar-nav .nav-link {
|
||||
color: #f1f1f1;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Env, StateService } from '../../services/state.service';
|
||||
import { Observable} from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-liquid-master-page',
|
||||
templateUrl: './liquid-master-page.component.html',
|
||||
styleUrls: ['./liquid-master-page.component.scss'],
|
||||
})
|
||||
export class LiquidMasterPageComponent implements OnInit {
|
||||
env: Env;
|
||||
network$: Observable<string>;
|
||||
connectionState$: Observable<number>;
|
||||
navCollapsed = false;
|
||||
isMobile = window.innerWidth <= 767.98;
|
||||
officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
|
||||
|
||||
constructor(
|
||||
private stateService: StateService,
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.env = this.stateService.env;
|
||||
this.connectionState$ = this.stateService.connectionState$;
|
||||
}
|
||||
|
||||
collapse(): void {
|
||||
this.navCollapsed = !this.navCollapsed;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user