[footer] polish breakpoints in /services/*

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
+      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;

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>

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;
+  }
+}

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();
-  }
 }