mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-24 22:58:30 +01:00
Code Issues Projects Releases Wiki Activity

[footer] polish breakpoints in /services/*

Browse source
This commit is contained in:
nymkappa 2023-08-23 16:17:07 +02:00
parent a7b2c39f51
commit c8100712e8
No known key found for this signature in database
GPG key ID: E155910B16E8BD04
4 changed files with 69 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/app/components/menu/menu.component.ts
View file

@ -72,15 +72,18 @@ export class MenuComponent implements OnInit {
@HostListener('window:click', ['$event'])
onClick(event) {
const isServicesPageOnMobile = this.isServicesPage && this.isSmallScreen();
const cssClasses = event.target.className;
if (!cssClasses.indexOf) { // Click on chart or non html thingy, close the menu
this.navOpen = false;
if (!this.isServicesPage || isServicesPageOnMobile) {
this.navOpen = false;
}
return;
}
const isHamburger = cssClasses.indexOf('profile_image') !== -1;
const isMenu = cssClasses.indexOf('menu-click') !== -1;
const isServicesPageOnMobile = this.isServicesPage && this.isSmallScreen();
if (!isHamburger && !isMenu && (!this.isServicesPage || isServicesPageOnMobile)) {
this.navOpen = false;
return;

10
frontend/src/app/shared/components/global-footer/global-footer.component.html
View file

@ -1,9 +1,9 @@
<footer>
<footer [class]="{'services': isServicesPage}">
<div class="container-fluid">
<div class="row main">
<div class="row main" [class]="{'services': isServicesPage}">
<div class="col-md-12 branding mt-2">
<div class="main-logo">
<div class="main-logo" [class]="{'services': isServicesPage}">
<app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
<app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126"></app-svg-images>
</div>
@ -11,7 +11,7 @@
<ng-container i18n="@@7deec1c1520f06170e1f8e8ddfbe4532312f638f">Explore the full Bitcoin ecosystem</ng-container>
<ng-template [ngIf]="locale.substr(0, 2) === 'en'"> &trade;</ng-template>
</p>
<div class="site-options d-flex justify-content-center align-items-center">
<div class="site-options d-flex justify-content-center align-items-center" [class]="{'services': isServicesPage}">
<div class="selector">
<app-language-selector></app-language-selector>
</div>
@ -36,7 +36,7 @@
</p>
</div>
</div>
<div class="row col-md-12 link-tree">
<div class="row col-md-12 link-tree" [class]="{'services': isServicesPage}">
<div class="links">
<p class="category">Explore</p>
<p><a [routerLink]="['/mining' | relativeUrl]">Mining Dashboard</a></p>

59
frontend/src/app/shared/components/global-footer/global-footer.component.scss
View file

@ -15,6 +15,12 @@ footer .row.main {
padding: 40px 0 24px 0;
max-width: 1140px;
margin: 0 auto;
&.services {
@media (min-width: 1201px) {
padding-left: 50px;
padding-right: 50px;
}
}
}
footer .row.main .branding > p {
@ -72,6 +78,12 @@ footer .row.link-tree {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
&.services {
@media (min-width: 1201px) {
padding-left: 65px;
padding-right: 65px;
}
}
}
footer .row.social-links {
@ -185,3 +197,50 @@ footer .sponsor {
margin-right: 10px;
}
}
@media (max-width: 1147px) {
.services.main-logo {
width: 220px;
}
footer .services.row.link-tree {
font-size: 16px;
}
footer .services.row.social-links svg {
width: 20px;
}
footer .services.row.link-tree {
display: block;
text-align: center;
}
footer .services.link-tree .links {
margin-bottom: 20px;
}
footer .services.row.main .branding {
text-align: center;
padding: 0px;
}
.services.main-logo {
display: block;
margin: 0 auto;
}
footer .services.site-options {
float: none;
margin-top: 15px;
}
footer .services.row.social-links {
margin: 48px 0 24px 0;
}
footer .services.selector:not(:last-child) {
margin-right: 10px;
}
}

12
frontend/src/app/shared/components/global-footer/global-footer.component.ts
View file

@ -30,7 +30,6 @@ export class GlobalFooterComponent implements OnInit {
loggedIn = false;
username = null;
urlSubscription: Subscription;
addPadding = false;
isServicesPage = false;
constructor(
@ -47,7 +46,6 @@ export class GlobalFooterComponent implements OnInit {
ngOnInit(): void {
this.isServicesPage = this.router.url.includes('/services/');
this.addPadding = this.isServicesPage && !this.isSmallScreen();
this.env = this.stateService.env;
this.backendInfo$ = this.stateService.backendInfo$;
@ -95,14 +93,4 @@ export class GlobalFooterComponent implements OnInit {
return (this.env.BASE_MODULE === 'bisq' ? '' : this.env.BISQ_WEBSITE_URL + this.urlLanguage) + this.networkPaths[thisNetwork] || '/';
}
}
isSmallScreen() {
return window.innerWidth <= 767.98;
}
@HostListener('window:resize', ['$event'])
onResize(event) {
this.addPadding = this.router.url.includes('/services/') && !this.isSmallScreen();
this.cd.markForCheck();
}
}