Merge pull request #3679 from vinodkumar45/Sb-17348-new

Issue #SB-17348 footer dynamic height issue 

src/app/client/src/app/modules/core/components/main-footer/main-footer.component.html

@@ -22,18 +22,27 @@
     <div class="ui grid stackable">
       <div class="four wide column footerMenu mr-auto">
         <ul class="p-0 m-0">
-          <!-- <li class="mb-15">
+          <!-- <li class="mb-16">
             <a href="/verticals/profile-registry/">
               {{resourceService.frmelmnts?.lnk?.footerDikshaVerticals}}
             </a>
           </li> -->
-          <li class="mb-15">
+          <li class="mb-16">
             <a appTelemetryInteract [telemetryInteractEdata]="setTelemetryInteractEdata('help-center')"
               href="/help/getting-started/explore-diksha/index.html">
               {{resourceService.frmelmnts?.lnk?.footerHelpCenter}}
             </a>
           </li>
-          <!-- <li class="mb-15">
+  <li>
+            <label class="d-block mb-0">
+              {{resourceService.frmelmnts?.lnk?.footerContact}}
+            </label>
+            <a appTelemetryInteract [telemetryInteractEdata]="setTelemetryInteractEdata('fresh-desk')" class="d-block mb-0"
+            href="mailto:support@diksha-ncte.freshdesk.com">
+            support@diksha-ncte.freshdesk.com
+          </a>
+          </li>
+          <!-- <li class="mb-16">
             <a href="/partners/">
               {{resourceService.frmelmnts?.lnk?.footerPartners}}
             </a>
@@ -61,14 +70,7 @@
         </div>
       </div>
       <div class="four wide column contantDetails">
-        <label class="d-block mb-10">
-          {{resourceService.frmelmnts?.lnk?.footerContact}}
-        </label>
-        <a appTelemetryInteract [telemetryInteractEdata]="setTelemetryInteractEdata('fresh-desk')" class="d-block mb-30"
-          href="mailto:support@diksha-ncte.freshdesk.com">
-          support@diksha-ncte.freshdesk.com
-        </a>
-        <label class="d-block">
+        <label class="d-block mb-16">
           <a appTelemetryInteract [telemetryInteractEdata]="setTelemetryInteractEdata('t&c')" href="/term-of-use.html">
             {{resourceService.frmelmnts?.lnk?.footerTnC}}
           </a>

src/app/client/src/app/modules/core/components/main-footer/main-footer.component.ts

-import { Component, OnInit, ViewChild, ElementRef, Renderer2, AfterViewInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef, Renderer2, ChangeDetectorRef,  HostListener} from '@angular/core';
 import { ResourceService, ConfigService } from '@sunbird/shared';
 import { environment } from '@sunbird/environment';
 import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
@@ -10,7 +10,7 @@ import * as _ from 'lodash-es';
   selector: 'app-footer',
   templateUrl: './main-footer.component.html'
 })
-export class MainFooterComponent implements OnInit, AfterViewInit {
+export class MainFooterComponent implements OnInit {
   @ViewChild('footerFix') footerFix: ElementRef;
   /**
    * reference of resourceService service.
@@ -29,29 +29,42 @@ export class MainFooterComponent implements OnInit, AfterViewInit {
   instance: string;
   bodyPaddingBottom: string;
   constructor(resourceService: ResourceService, public router: Router, public activatedRoute: ActivatedRoute,
-    public configService: ConfigService, private renderer: Renderer2) {
+    public configService: ConfigService, private renderer: Renderer2, private cdr: ChangeDetectorRef
+    ) {
     this.resourceService = resourceService;
   }
 
   ngOnInit() {
     this.instance = _.upperCase(this.resourceService.instance);
   }
+ ngAfterViewInit() {
+    this.footerAlign();
+  }
+ @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    console.log('event', event);
+    this.footerAlign();
+  }
+// footer dynamic height
+footerAlign() {
+    $('.footerfix').css('height', 'auto');
+    const footerHeight = $('footer').outerHeight();
+    $('.footerfix').css('height', footerHeight);
+    if (window.innerWidth <= 767) {
+      (document.querySelector('.download-mobile-app') as HTMLElement).style.minHeight = 0 + 'px';
+      (document.querySelector('.download-mobile-app') as HTMLElement).style.bottom = footerHeight + 'px';
+      (document.querySelector('body') as HTMLElement).style.paddingBottom = footerHeight + 178 + 'px';
+    } else {
+      (document.querySelector('.download-mobile-app') as HTMLElement).style.minHeight = 200 + 'px';
+      (document.querySelector('.download-mobile-app') as HTMLElement).style.bottom = 0 + 'px';
+      (document.querySelector('body') as HTMLElement).style.paddingBottom = footerHeight + 67 + 'px';
+    }
+  }
   checkRouterPath() {
     this.showDownloadmanager = this.router.url.includes('/profile') || this.router.url.includes('/play/collection') ||
       this.router.url.includes('/play/content');
   }
-  ngAfterViewInit() {
-    setTimeout(() => {
-      if (this.footerFix && this.footerFix.nativeElement) {
-        this.bodyPaddingBottom = this.footerFix.nativeElement.offsetHeight + 'px';
-        this.renderer.setStyle(
-          document.body,
-          'padding-bottom',
-          this.bodyPaddingBottom
-        );
-      }
-    }, 500);
-  }
+
 
   redirectToDikshaApp() {
     let applink = this.configService.appConfig.UrlLinks.downloadDikshaApp;

src/app/client/src/assets/styles/global.scss

@@ -27,35 +27,12 @@ body {
     }
   }
 }
-@include respond-above(lg) {
-  body {
-    .footer-fix {
-      padding-bottom: 56px;
-    }
-  }
-}
-@include respond-between(md, lg) {
-  body {
-    .footer-fix {
-      padding-bottom: 64px;
-    }
-  }
-}
-@include respond-between(sm, md) {
-  body {
-    .footer-fix {
-      padding-bottom: 112px;
-    }
-  }
-}
+
 @include respond-above(sm) {
   body {
-    padding-bottom: 168px;
     .pusher {
       padding-bottom: 240px !important;
-    }
-    .footer-fix {
-      min-height: calc(100vh - 168px);
+    
     }
     .sb-mid-container-min-height {
       min-height: calc(100vh - 288px);
@@ -64,16 +41,13 @@ body {
   }
 }
 @include respond-below(sm) {
-  .footer-fix {
-    min-height: calc(100vh - 336px);
-    padding-bottom: $base-block-space * 3;
+ .download-mobile-app .download-mobile-app-logo{
+    min-height: 116px;
   }
 }
 .sb-offline {
   padding-bottom: 0px;
-  // .footer-fix {
-  //   min-height: calc(100vh - 180px);
-  // }
+
 }
 
 *[lang="en"] body {
@@ -106,8 +80,12 @@ body {
       border-left: 1px solid rgba(51, 51, 51, 0.1);
     }
   }
+  @include respond-above(sm) {
+    .download-mobile-app .download-mobile-app-logo{
+      min-height: 168px;
+      }
+    }
 }
-
 [dir="ltr"] {
   .sb-explore-qr-container {
     .dial-section-column {
@@ -243,6 +221,12 @@ app-workspace {
     }
   }
 }
+.sb-workspace-bg{
+  position: relative;
+  bottom: -35px;
+  height: auto;
+  margin-top: -35px;
+}
 
 // common consumption cards for library
 .sb-library-cards{

src/app/client/src/assets/styles/layout/_footer.scss

@@ -152,17 +152,22 @@
   }
 
 }
-
+@media screen and (max-width: 900px) {
+  .footer{
+    padding: 20px 0;
+  }
+}
 @media screen and (max-width: 767px) {
 
   .download-mobile-app {
-    bottom: 206px;
     margin: 0 auto;
     right: 0;
     left: 0;
     z-index: inherit;
     box-shadow: 0 -5px 20px 5px rgba(0, 0, 0, 0.2);
-
+ .app-download{
+      padding-top: 12px;
+    }
     a {
       padding-bottom: 0 !important;
     }
@@ -182,11 +187,11 @@
     }
 
   .footer {
-    max-height: 206px;
+    max-height: 230px;
     .footerMenu {
       ul {
         margin-top: 0 !important;
-        margin-bottom: 24px !important;
+        margin-bottom: 0px !important;
       }
 
       li {