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

Add initial content to big footer

Browse Source
This commit is contained in:
hunicus 2023-05-06 04:10:17 -04:00
parent 64b4bd9088
commit fc6b853a72
3 changed files with 139 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/src/app/shared/components/global-footer/global-footer.component.html
View File

@ -1,22 +1,76 @@
<footer *ngIf="networkPaths$ | async as networkPaths">
<div class="pref-selectors">
<div class="selector">
<app-language-selector></app-language-selector>
<div class="container-fluid">
<div class="row main">
<div class="col-sm-4 branding">
<h5>The Mempool Open Source Project™</h5>
<p>Explore the full Bitcoin ecosystem.</p>
<div class="selector">
<app-language-selector></app-language-selector>
</div>
<div class="selector">
<app-fiat-selector></app-fiat-selector>
</div>
<a class="cta btn btn-purple sponsor" [routerLink]="['/signup' | relativeUrl]">Sign In / Sign Up</a>
<p class="cta-secondary"><a [routerLink]="['/tx/push' | relativeUrl]" i18n="shared.broadcast-transaction|Broadcast Transaction">Broadcast Transaction</a></p>
<p class="cta-secondary"><a [routerLink]="['/lightning/group/the-mempool-open-source-project' | relativeUrl]">Connect to Mempool Nodes</a></p>
</div>
<div class="col-sm-8 links">
<div class="row">
<div class="col-sm-4">
<p class="category">Explore</p>
<p><a [routerLink]="['/mining' | relativeUrl]">Mining Dashboard</a></p>
<p><a [routerLink]="['/lightning' | relativeUrl]">Lightning Dashboard</a></p>
<p><a [routerLink]="['/blocks' | relativeUrl]">Recent Blocks</a></p>
<p><a [routerLink]="['/rbf' | relativeUrl]">Recent RBF Transactions</a></p>
</div>
<div class="col-sm-4 links">
<p class="category">Learn</p>
<p><a [routerLink]="['/docs/faq']" fragment="what-is-a-mempool">What is a mempool?</a></p>
<p><a [routerLink]="['/docs/faq']" fragment="what-is-a-block-explorer">What is a block explorer?</a></p>
<p><a [routerLink]="['/docs/faq']" fragment="what-is-a-mempool-explorer">What is a mempool explorer?</a></p>
<p><a [routerLink]="['/docs/faq']" fragment="why-is-transaction-stuck-in-mempool">Why isn't my transaction confirming?</a></p>
<p><a [routerLink]="['/docs/faq' | relativeUrl]">More FAQs ›</a></p>
</div>
<div class="col-sm-4 links">
<p class="category">Connect</p>
<p><a href="https://github.com/mempool" target="_blank">GitHub</a></p>
<p><a href="https://twitter.com/mempool" target="_blank">Twitter</a></p>
<p><a href="nostr:npub18d4r6wanxkyrdfjdrjqzj2ukua5cas669ew2g5w7lf4a8te7awzqey6lt3" target="_blank">Nostr</a></p>
<p><a href="https://youtube.com/@mempool" target="_blank">YouTube</a></p>
<p><a href="https://bitcointv.com/c/mempool/videos" target="_blank">BitcoinTV</a></p>
<p><a href="https://mempool.chat" target="_blank">Matrix</a></p>
</div>
</div>
<div class="row">
<div class="col-sm-4 links">
<p class="category">Resources</p>
<p><a [routerLink]="['/docs/faq' | relativeUrl]">FAQs</a></p>
<p><a [routerLink]="['/docs/api' | relativeUrl]">API Documentation</a></p>
<p><a [routerLink]="['/about' | relativeUrl]">About the Project</a></p>
</div>
<div class="col-sm-4 links">
<p class="category">More Networks</p>
<p><a [routerLink]="['/testnet' | relativeUrl]">Testnet Block Explorer</a></p>
<p><a [routerLink]="['/signet' | relativeUrl]">Signet Block Explorer</a></p>
<p><a href="https://liquid.network">Liquid Block Explorer</a></p>
<p><a href="https://bisq.network">Bisq Block Explorer</a></p>
</div>
<div class="col-sm-4 links">
<p class="category">Legal</p>
<p><a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a></p>
<p><a [routerLink]="['/privacy-policy']" i18n="shared.privacy-policy|Privacy Policy">Privacy Policy</a></p>
<p><a [routerLink]="['/trademark-policy']">Trademark Policy</a></p>
</div>
</div>
</div>
</div>
<div class="selector">
<app-fiat-selector></app-fiat-selector>
</div>
</div>
<div class="row version">
<div class="col-sm-12">
<p *ngIf="officialMempoolSpace">{{ (backendInfo$ | async)?.hostname }} (v{{ (backendInfo$ | async )?.version }}) [<a target="_blank" href="https://github.com/mempool/mempool/commit/{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }}">{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }}</a>]</p>
<p *ngIf="!officialMempoolSpace">v{{ packetJsonVersion }} [<a target="_blank" href="https://github.com/mempool/mempool/commit/{{ frontendGitCommitHash }}">{{ frontendGitCommitHash }}</a>]</p>
<div class="terms-of-service">
<a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
|
<a [routerLink]="['/privacy-policy']" i18n="shared.privacy-policy|Privacy Policy">Privacy Policy</a>
|
<a *ngIf="officialMempoolSpace && networkPaths['mainnet'] === '/lightning' else broadcastTransaction" [routerLink]="['/lightning/group/the-mempool-open-source-project' | relativeUrl]">Connect to our nodes</a>
<ng-template #broadcastTransaction>
<a [routerLink]="['/tx/push' | relativeUrl]" i18n="shared.broadcast-transaction|Broadcast Transaction">Broadcast Transaction</a>
</ng-template>
</div>
</div>
</div>
<br>
</footer>
</footer>

76
frontend/src/app/shared/components/global-footer/global-footer.component.scss
View File

@ -1,22 +1,70 @@
footer {
background-color: #1d1f31;
margin-top: 30px;
}
footer a {
color: rgba(255, 255, 255, 0.4);
}
footer p {
margin-bottom: 0.25rem;
}
footer .row.main {
padding: 40px 0;
}
footer .row.main .branding {
text-align: center;
}
.terms-of-service {
footer .row.main .branding .btn {
display: inline-block;
color: #fff !important;
}
footer .row.main .branding button.account {
background-color: #2d3348;
}
footer .row.main .branding .cta {
margin: 50px auto 45px auto;
}
footer .row.main .branding .cta-secondary {
}
footer .row.main .links > div:first-child {
margin-bottom: 20px;
}
footer .row.main .links .category {
color: #4a68b9;
font-weight: 700;
}
footer .row.main .links .category:not(:first-child) {
margin-top: 1rem;
}
.pref-selectors {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
.selector {
margin-left: .5em;
margin-bottom: .5em;
&:first {
margin-left: 0;
}
}
footer .selector {
margin: 20px 0;
}
footer .row.version .col-sm-12 {
padding: 20px !important;
background-color: #11131f;
}
footer .row.version .col-sm-12 p {
margin-bottom: 0;
text-align: center;
font-size: 12px;
color: rgba(255, 255, 255, 0.4);
}
footer .row.version .col-sm-12 p a {
color: #09a3ba;
}

5
frontend/src/app/shared/components/global-footer/global-footer.component.ts
View File

@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { NavigationService } from '../../../services/navigation.service';
import { Env, StateService } from '../../../services/state.service';
import { IBackendInfo } from '../../../interfaces/websocket.interface';
@Component({
selector: 'app-global-footer',
@ -14,6 +15,9 @@ export class GlobalFooterComponent implements OnInit {
networkPaths: { [network: string]: string };
officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
networkPaths$: Observable<Record<string, string>>;
backendInfo$: Observable<IBackendInfo>;
frontendGitCommitHash = this.stateService.env.GIT_COMMIT_HASH;
packetJsonVersion = this.stateService.env.PACKAGE_JSON_VERSION;
constructor(
public stateService: StateService,
@ -23,6 +27,7 @@ export class GlobalFooterComponent implements OnInit {
ngOnInit(): void {
this.env = this.stateService.env;
this.networkPaths$ = this.navigationService.subnetPaths;
this.backendInfo$ = this.stateService.backendInfo$;
}
}