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

Add open graph block preview page

Browse Source
This commit is contained in:
Mononaut
2022-07-12 22:04:20 +00:00
parent 7954bdfa94
commit a6535277ef
8 changed files with 209 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/app/components/master-page-preview/master-page-preview.component.html Normal file
View File

@@ -0,0 +1,21 @@
<ng-container *ngIf="{ val: network$ | async } as network">
<div class="preview-wrapper">
<router-outlet></router-outlet>
<footer>
<span class="footer-brand" style="position: relative;">
<img *ngIf="!officialMempoolSpace" src="/resources/mempool-logo.png" height="35" width="140" class="logo">
<app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 140px; height: 35px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
</span>
<div [ngSwitch]="network.val">
<span *ngSwitchCase="'signet'" class="network signet"><img src="/resources/signet-logo.png" style="width: 30px;" class="signet mr-1" alt="logo"> Signet</span>
<span *ngSwitchCase="'testnet'" class="network testnet"><img src="/resources/testnet-logo.png" style="width: 30px;" class="mr-1" alt="testnet logo"> Testnet</span>
<span *ngSwitchCase="'bisq'" class="network bisq"><img src="/resources/bisq-logo.png" style="width: 30px;" class="mr-1" alt="bisq logo"> Bisq</span>
<span *ngSwitchCase="'liquid'" class="network liquid"><img src="/resources/liquid-logo.png" style="width: 30px;" class="mr-1" alt="liquid mainnet logo"> Liquid</span>
<span *ngSwitchCase="'liquidtestnet'" class="network liquidtestnet"><img src="/resources/liquidtestnet-logo.png" style="width: 30px;" class="mr-1" alt="liquid testnet logo"> Liquid Testnet</span>
<span *ngSwitchDefault class="network mainnet"><img src="/resources/bitcoin-logo.png" style="width: 30px;" class="mainnet mr-1" alt="bitcoin logo"> Mainnet</span>
</div>
</footer>
</div>
</ng-container>

35
frontend/src/app/components/master-page-preview/master-page-preview.component.scss Normal file
View File

@@ -0,0 +1,35 @@
.preview-wrapper {
position: relative;
display: block;
margin: auto;
max-width: 1024px;
max-height: 512px;
padding-bottom: 64px;
footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
min-height: 64px;
padding: 0rem 2rem;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background: #11131f;
text-align: start;
}
.footer-brand {
width: 60%;
}
.network {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
}

25
frontend/src/app/components/master-page-preview/master-page-preview.component.ts Normal file
View File

@@ -0,0 +1,25 @@
import { Component, OnInit } from '@angular/core';
import { StateService } from '../../services/state.service';
import { Observable, merge, of } from 'rxjs';
import { LanguageService } from 'src/app/services/language.service';
@Component({
selector: 'app-master-page-preview',
templateUrl: './master-page-preview.component.html',
styleUrls: ['./master-page-preview.component.scss'],
})
export class MasterPagePreviewComponent implements OnInit {
network$: Observable<string>;
officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
urlLanguage: string;
constructor(
public stateService: StateService,
private languageService: LanguageService,
) { }
ngOnInit() {
this.network$ = merge(of(''), this.stateService.networkChanged$);
this.urlLanguage = this.languageService.getLanguageForUrl();
}
}