diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.scss b/frontend/src/app/shared/components/global-footer/global-footer.component.scss
index d9845eba8..defbe937e 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.scss
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.scss
@@ -13,6 +13,8 @@ footer p {
footer .row.main {
padding: 40px 0;
+ max-width: 1200px;
+ margin: 0 auto;
}
footer .row.main .branding {
@@ -29,13 +31,18 @@ footer .row.main .branding button.account {
}
footer .row.main .branding .cta {
- margin: 50px auto 45px auto;
+ margin: 20px auto 25px auto;
}
footer .row.main .branding .cta-secondary {
}
+footer .row.main .links.outer {
+ padding-left: 24px;
+ padding-top: 10px;
+}
+
footer .row.main .links > div:first-child {
margin-bottom: 20px;
}
@@ -53,18 +60,47 @@ footer .selector {
margin: 20px 0;
}
-footer .row.version .col-sm-12 {
+footer .row.social-links {
+ text-align: center;
+ margin-bottom: 24px;
+}
+
+footer .row.social-links a {
+ margin: 0 14px;
+}
+
+footer .row.social-links svg {
+ width: 20px;
+}
+
+footer .row.version {
padding: 20px !important;
background-color: #11131f;
}
-footer .row.version .col-sm-12 p {
+footer .row.version 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 {
+footer .row.version p a {
color: #09a3ba;
}
+
+@media (max-width: 992px) {
+
+ footer .row.main .links.outer {
+ text-align: center;
+ }
+
+ footer .row.main .links.outer > .row {
+ margin-top: 20px;
+ }
+
+ footer .row.main .links.outer > .row > div:first-child {
+ margin-bottom: 20px;
+ }
+
+}
diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.ts b/frontend/src/app/shared/components/global-footer/global-footer.component.ts
index aaf80f781..c1a26ac68 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.ts
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.ts
@@ -1,8 +1,10 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
-import { NavigationService } from '../../../services/navigation.service';
+import { Observable, merge, of, Subject } from 'rxjs';
+import { tap, takeUntil } from 'rxjs/operators';
import { Env, StateService } from '../../../services/state.service';
import { IBackendInfo } from '../../../interfaces/websocket.interface';
+import { LanguageService } from '../../../services/language.service';
+import { NavigationService } from '../../../services/navigation.service';
@Component({
selector: 'app-global-footer',
@@ -11,23 +13,56 @@ import { IBackendInfo } from '../../../interfaces/websocket.interface';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GlobalFooterComponent implements OnInit {
+ private destroy$: Subject
= new Subject();
env: Env;
- networkPaths: { [network: string]: string };
officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
- networkPaths$: Observable>;
backendInfo$: Observable;
frontendGitCommitHash = this.stateService.env.GIT_COMMIT_HASH;
packetJsonVersion = this.stateService.env.PACKAGE_JSON_VERSION;
+ urlLanguage: string;
+ network$: Observable;
+ networkPaths: { [network: string]: string };
+ currentNetwork = '';
constructor(
public stateService: StateService,
+ private languageService: LanguageService,
private navigationService: NavigationService,
) {}
ngOnInit(): void {
this.env = this.stateService.env;
- this.networkPaths$ = this.navigationService.subnetPaths;
this.backendInfo$ = this.stateService.backendInfo$;
+ this.urlLanguage = this.languageService.getLanguageForUrl();
+ this.navigationService.subnetPaths.subscribe((paths) => {
+ this.networkPaths = paths;
+ });
+ this.network$ = merge(of(''), this.stateService.networkChanged$).pipe(
+ tap((network: string) => {
+ return network;
+ })
+ );
+ this.network$.pipe(takeUntil(this.destroy$)).subscribe((network) => {
+ this.currentNetwork = network;
+ });
+ }
+
+ ngOnDestroy(): void {
+ this.destroy$.next(true);
+ this.destroy$.complete();
+ }
+
+ networkLink(network) {
+ const thisNetwork = network || 'mainnet';
+ if( network === '' || network === 'mainnet' || network === 'testnet' || network === 'signet' ) {
+ return (this.env.BASE_MODULE === 'mempool' ? '' : this.env.MEMPOOL_WEBSITE_URL + this.urlLanguage) + this.networkPaths[thisNetwork] || '/';
+ }
+ if( network === 'liquid' || network === 'liquidtestnet' ) {
+ return (this.env.BASE_MODULE === 'liquid' ? '' : this.env.LIQUID_WEBSITE_URL + this.urlLanguage) + this.networkPaths[thisNetwork] || '/';
+ }
+ if( network === 'bisq' ) {
+ return (this.env.BASE_MODULE === 'bisq' ? '' : this.env.BISQ_WEBSITE_URL + this.urlLanguage) + this.networkPaths[thisNetwork] || '/';
+ }
}
}
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index e58bcdc6a..b38a60898 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -62,6 +62,10 @@ body {
position: relative;
}
+main {
+ margin-top: 24px;
+}
+
.full-height {
@media (max-width: 767.98px) {
min-height: 100vh;
@@ -1143,7 +1147,7 @@ th {
display: none;
}
-app-master-page, app-liquid-master-page {
+app-master-page, app-liquid-master-page, app-bisq-master-page {
display: flex;
flex-direction: column;
min-height: 100vh;
@@ -1155,4 +1159,4 @@ app-master-page, app-liquid-master-page {
app-global-footer {
margin-top: auto;
-}
\ No newline at end of file
+}