fix draggable content height after reinit layout (ushahidi#324)

nimishmedatwal · Jun 14, 2023 · 3c32ed2 · 3c32ed2
1 parent a5e23eb
commit 3c32ed2
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/...mobile-mzima-client/src/app/map/components/draggable-layout/draggable-layout.component.ts b/...mobile-mzima-client/src/app/map/components/draggable-layout/draggable-layout.component.ts
@@ -51,11 +51,6 @@ export class DraggableLayoutComponent implements AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    const checkHeight = setInterval(() => {
-      this.getOffsetHeight();
-      if (this.fixedContentHeight) clearInterval(checkHeight);
-    }, 50);
-
     setTimeout(() => {
       if (this.mode) {
         this.content.scrollToPoint(
@@ -67,6 +62,13 @@ export class DraggableLayoutComponent implements AfterViewInit {
     }, 350);
   }
 
+  public updateOffsetHeight(): void {
+    const checkHeight = setInterval(() => {
+      this.getOffsetHeight();
+      if (this.fixedContentHeight) clearInterval(checkHeight);
+    }, 50);
+  }
+
   private getOffsetHeight(): void {
     this.fixedContentHeight = this.fixedContent.nativeElement.offsetHeight;
   }

diff --git a/apps/mobile-mzima-client/src/app/map/map.page.html b/apps/mobile-mzima-client/src/app/map/map.page.html
@@ -1,4 +1,5 @@
 <app-draggable-layout
+  #layout
   [mode]="1"
   [offsetTop]="78"
   [breakpoints]="[0, 300]"

diff --git a/apps/mobile-mzima-client/src/app/map/map.page.ts b/apps/mobile-mzima-client/src/app/map/map.page.ts
@@ -5,13 +5,15 @@ import { SessionService } from '@services';
 import { MainViewComponent } from './components/main-view.component';
 import { MapViewComponent } from './components/map-view/map-view.component';
 import { FeedViewComponent } from './components/feed-view/feed-view.component';
+import { DraggableLayoutComponent } from './components/draggable-layout/draggable-layout.component';
 
 @Component({
   selector: 'app-map',
   templateUrl: 'map.page.html',
   styleUrls: ['map.page.scss'],
 })
 export class MapPage extends MainViewComponent {
+  @ViewChild('layout') public layout: DraggableLayoutComponent;
   @ViewChild('map') public map: MapViewComponent;
   @ViewChild('feed') public feed: FeedViewComponent;
   public mode: number | 'fullscreen';
@@ -42,4 +44,8 @@ export class MapPage extends MainViewComponent {
   public updatePostsCount(data: any): void {
     this.totalPosts = data.total;
   }
+
+  ionViewWillEnter() {
+    this.layout.updateOffsetHeight();
+  }
 }