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

[footer] fix footer sizing in /services

Browse Source
This commit is contained in:
nymkappa 2023-08-20 22:54:12 +02:00
parent 22886cb32d
commit e82b43e340
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
5 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/fiat-selector/fiat-selector.component.html
View File

@ -1,5 +1,5 @@
<div [formGroup]="fiatForm" class="text-small text-center">
<select formControlName="fiat" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 95px;" (change)="changeFiat()">
<select formControlName="fiat" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 85px;" (change)="changeFiat()">
<option *ngFor="let currency of currencies" [value]="currency[1].code">{{ currency[1].code }}</option>
</select>
</div>

9
frontend/src/app/components/menu/menu.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Component, OnInit, Output, EventEmitter, HostListener } from '@angular/core';
import { Observable } from 'rxjs';
import { ApiService } from '../../services/api.service';
import { MenuGroup } from '../../interfaces/services.interface';
@ -51,4 +51,11 @@ export class MenuComponent implements OnInit {
hambugerClick() {
this.navOpen = !this.navOpen;
}
@HostListener('window:resize', ['$event'])
onResize(event) {
if (this.isServices) {
this.navOpen = !this.isSmallScreen();
}
}
}

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

@ -1,7 +1,7 @@
<footer>
<div class="container-fluid">
<div class="row main" [style]="addPadding ? 'padding-left: 250px !important' : ''">
<div class="row main" [style]="addPadding ? 'padding-left: 235px !important' : ''">
<div class="col-md-12 branding mt-2">
<div class="main-logo">
<app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
@ -18,12 +18,6 @@
<app-rate-unit-selector></app-rate-unit-selector>
</div>
</div>
<div *ngIf="officialMempoolSpace && stateService.env.ACCELERATOR" class="cta">
<a class="btn btn-purple sponsor" [routerLink]="['/login' | relativeUrl]">
<span *ngIf="loggedIn" i18n="shared.my-account">My Account</span>
<span *ngIf="!loggedIn" i18n="shared.sign-in">Sign In / Sign Up</span>
</a>
</div>
</div>
</div>
<div class="row col-md-12 link-tree" [style]="addPadding ? 'padding-left: 250px !important' : ''">
@ -79,8 +73,8 @@
<a href="https://mempool.chat" target="_blank"><svg fill="#fff" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Matrix</title><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg></a>
</div>
</div>
<div class="row version" [style]="addPadding ? 'padding-left: 250px !important' : ''">
<div class="col-sm-12">
<div class="row version" [style]="{'padding-left': addPadding ? '250px !important' : '', 'background-color': isServices ? '#1d1f31' : ''}">
<div class="col-sm-12" *ngIf="!isServices">
<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>

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

@ -157,6 +157,7 @@ footer .row.version p a {
footer .row.main .branding {
text-align: center;
padding: 0px;
}
.main-logo {

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

@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, Inject, LOCALE_ID } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, Inject, LOCALE_ID, HostListener } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Observable, merge, of, Subject, Subscription } from 'rxjs';
import { tap, takeUntil } from 'rxjs/operators';
import { Env, StateService } from '../../../services/state.service';
@ -47,6 +47,8 @@ export class GlobalFooterComponent implements OnInit {
ngOnInit(): void {
this.isServices = this.router.url.includes('/services/');
this.addPadding = this.isServices && !this.isSmallScreen();
this.env = this.stateService.env;
this.backendInfo$ = this.stateService.backendInfo$;
this.servicesBackendInfo$ = this.stateService.servicesBackendInfo$;
@ -71,7 +73,6 @@ export class GlobalFooterComponent implements OnInit {
} else {
this.username = null;
}
this.addPadding = url[0].path === 'services' && !this.isSmallScreen();
this.cd.markForCheck();
})
}
@ -98,4 +99,10 @@ export class GlobalFooterComponent implements OnInit {
isSmallScreen() {
return window.innerWidth <= 767.98;
}
@HostListener('window:resize', ['$event'])
onResize(event) {
this.addPadding = this.router.url.includes('/services/') && !this.isSmallScreen();
this.cd.markForCheck();
}
}