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

Polish global footer

Browse Source
This commit is contained in:
natsoni 2024-04-09 20:51:39 +09:00
parent b0058e94ce
commit f81bbb93a5
No known key found for this signature in database
GPG Key ID: C65917583181743B
3 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/app/components/theme-selector/theme-selector.component.ts
View File

@ -1,6 +1,7 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { ThemeService } from '../../services/theme.service';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-theme-selector',
@ -11,6 +12,7 @@ import { ThemeService } from '../../services/theme.service';
export class ThemeSelectorComponent implements OnInit {
themeForm: UntypedFormGroup;
themes = ['default', 'contrast', 'wiz'];
themeSubscription: Subscription;
constructor(
private formBuilder: UntypedFormBuilder,
@ -22,10 +24,20 @@ export class ThemeSelectorComponent implements OnInit {
theme: ['default']
});
this.themeForm.get('theme')?.setValue(this.themeService.theme);
// Subscribe to theme changes because two instances of this component exist
this.themeSubscription = this.themeService.themeChanged$.subscribe(() => {
if (this.themeForm.get('theme')?.value !== this.themeService.theme){
this.themeForm.get('theme')?.setValue(this.themeService.theme);
}
});
}
changeTheme() {
const newTheme = this.themeForm.get('theme')?.value;
this.themeService.apply(newTheme);
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
}
}

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

@ -25,16 +25,16 @@
<app-theme-selector></app-theme-selector>
</div>
<a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-none d-sm-flex justify-content-center" [routerLink]="['/login' | relativeUrl]">
<span *ngIf="loggedIn" i18n="shared.my-account">My Account</span>
<span *ngIf="!loggedIn" i18n="shared.sign-in">Sign In</span>
<span *ngIf="loggedIn" i18n="shared.my-account" class="nowrap">My Account</span>
<span *ngIf="!loggedIn" i18n="shared.sign-in" class="nowrap">Sign In</span>
</a>
</div>
<div class="selector d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0">
<app-theme-selector></app-theme-selector>
</div>
<a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0 mb-2" [routerLink]="['/login' | relativeUrl]">
<span *ngIf="loggedIn" i18n="shared.my-account">My Account</span>
<span *ngIf="!loggedIn" i18n="shared.sign-in">Sign In</span>
<span *ngIf="loggedIn" i18n="shared.my-account" class="nowrap">My Account</span>
<span *ngIf="!loggedIn" i18n="shared.sign-in" class="nowrap">Sign In</span>
</a>
<p class="explore-tagline-desktop">
<ng-container i18n="@@7deec1c1520f06170e1f8e8ddfbe4532312f638f">Explore the full Bitcoin ecosystem</ng-container>

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

@ -142,6 +142,10 @@ footer .sponsor {
max-width: 160px;
}
footer .nowrap {
white-space: nowrap;
}
.explore-tagline-desktop {
display: none;
}
@ -150,7 +154,7 @@ footer .sponsor {
display: block;
}
@media (min-width: 901px) {
@media (min-width: 951px) {
:host-context(.ltr-layout) .language-selector {
float: right !important;
}
@ -168,7 +172,7 @@ footer .sponsor {
}
.services {
@media (min-width: 901px) and (max-width: 1147px) {
@media (min-width: 951px) and (max-width: 1147px) {
:host-context(.ltr-layout) .services .language-selector {
float: none !important;
}
@ -244,7 +248,7 @@ footer .sponsor {
}
@media (max-width: 900px) {
@media (max-width: 950px) {
.main-logo {
width: 220px;