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 { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { ThemeService } from '../../services/theme.service'; import { ThemeService } from '../../services/theme.service';
import { Subscription } from 'rxjs';
@Component({ @Component({
selector: 'app-theme-selector', selector: 'app-theme-selector',
@ -11,6 +12,7 @@ import { ThemeService } from '../../services/theme.service';
export class ThemeSelectorComponent implements OnInit { export class ThemeSelectorComponent implements OnInit {
themeForm: UntypedFormGroup; themeForm: UntypedFormGroup;
themes = ['default', 'contrast', 'wiz']; themes = ['default', 'contrast', 'wiz'];
themeSubscription: Subscription;
constructor( constructor(
private formBuilder: UntypedFormBuilder, private formBuilder: UntypedFormBuilder,
@ -22,10 +24,20 @@ export class ThemeSelectorComponent implements OnInit {
theme: ['default'] theme: ['default']
}); });
this.themeForm.get('theme')?.setValue(this.themeService.theme); 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() { changeTheme() {
const newTheme = this.themeForm.get('theme')?.value; const newTheme = this.themeForm.get('theme')?.value;
this.themeService.apply(newTheme); 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> <app-theme-selector></app-theme-selector>
</div> </div>
<a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-none d-sm-flex justify-content-center" [routerLink]="['/login' | relativeUrl]"> <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.my-account" class="nowrap">My Account</span>
<span *ngIf="!loggedIn" i18n="shared.sign-in">Sign In</span> <span *ngIf="!loggedIn" i18n="shared.sign-in" class="nowrap">Sign In</span>
</a> </a>
</div> </div>
<div class="selector d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0"> <div class="selector d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0">
<app-theme-selector></app-theme-selector> <app-theme-selector></app-theme-selector>
</div> </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]"> <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.my-account" class="nowrap">My Account</span>
<span *ngIf="!loggedIn" i18n="shared.sign-in">Sign In</span> <span *ngIf="!loggedIn" i18n="shared.sign-in" class="nowrap">Sign In</span>
</a> </a>
<p class="explore-tagline-desktop"> <p class="explore-tagline-desktop">
<ng-container i18n="@@7deec1c1520f06170e1f8e8ddfbe4532312f638f">Explore the full Bitcoin ecosystem</ng-container> <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; max-width: 160px;
} }
footer .nowrap {
white-space: nowrap;
}
.explore-tagline-desktop { .explore-tagline-desktop {
display: none; display: none;
} }
@ -150,7 +154,7 @@ footer .sponsor {
display: block; display: block;
} }
@media (min-width: 901px) { @media (min-width: 951px) {
:host-context(.ltr-layout) .language-selector { :host-context(.ltr-layout) .language-selector {
float: right !important; float: right !important;
} }
@ -168,7 +172,7 @@ footer .sponsor {
} }
.services { .services {
@media (min-width: 901px) and (max-width: 1147px) { @media (min-width: 951px) and (max-width: 1147px) {
:host-context(.ltr-layout) .services .language-selector { :host-context(.ltr-layout) .services .language-selector {
float: none !important; float: none !important;
} }
@ -244,7 +248,7 @@ footer .sponsor {
} }
@media (max-width: 900px) { @media (max-width: 950px) {
.main-logo { .main-logo {
width: 220px; width: 220px;