From c8100712e86db4e93aee8e4ad6ed6a147c1794e0 Mon Sep 17 00:00:00 2001
From: nymkappa <1612910616@pm.me>
Date: Wed, 23 Aug 2023 16:17:07 +0200
Subject: [PATCH] [footer] polish breakpoints in /services/*

---
 .../src/app/components/menu/menu.component.ts |  7 ++-
 .../global-footer.component.html              | 10 ++--
 .../global-footer.component.scss              | 59 +++++++++++++++++++
 .../global-footer/global-footer.component.ts  | 12 ----
 4 files changed, 69 insertions(+), 19 deletions(-)

diff --git a/frontend/src/app/components/menu/menu.component.ts b/frontend/src/app/components/menu/menu.component.ts
index 0fa22aa7c..d12bbe47e 100644
--- a/frontend/src/app/components/menu/menu.component.ts
+++ b/frontend/src/app/components/menu/menu.component.ts
@@ -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;
diff --git a/frontend/src/app/shared/components/global-footer/global-footer.component.html b/frontend/src/app/shared/components/global-footer/global-footer.component.html
index af53a4b9c..73b4d0975 100644
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.html
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html
@@ -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>
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 90367d524..3bdc239a9 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
@@ -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;
+  }
+}
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 54e1dcbe7..75d989ff7 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
@@ -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();
-  }
 }