Mobile layout for add new

whiletrue-industries · Jan 25, 2024 · 1878644 · 1878644
1 parent 3068b94
commit 1878644
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 31 deletions.
diff --git a/projects/chronomaps/src/app/chronomap-page/add-new-bar/add-new-bar.component.less b/projects/chronomaps/src/app/chronomap-page/add-new-bar/add-new-bar.component.less
@@ -2,7 +2,6 @@
 
 :host {
     width: 100%;
-    height: 100%;
     display: flex;
     flex-flow: column;
     justify-content: flex-start;
@@ -14,6 +13,7 @@
 
     .desktop({
         max-width: 360px;
+        height: 100%;
         padding: 16px;
         border-right: 1px solid black;
     });
@@ -22,6 +22,10 @@
         overflow-y: scroll;
         padding: 16px;
         .no-scrollbars;
+        height: 242px;
+        &.maximized {
+            height: 80vh;
+        }
     });
 
     ::ng-deep {

diff --git a/projects/chronomaps/src/app/chronomap-page/add-new-bar/add-new-bar.component.ts b/projects/chronomaps/src/app/chronomap-page/add-new-bar/add-new-bar.component.ts
@@ -13,6 +13,7 @@ import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
   styleUrls: ['./add-new-bar.component.less'],
   host: {
     '[style.border-color]': 'chronomap.primaryColor() + "40"',
+    '[class.maximized]': 'slide !== 1 && slide !== 2'
   }
 })
 export class AddNewBarComponent implements OnInit {
@@ -28,6 +29,7 @@ export class AddNewBarComponent implements OnInit {
   selectedDate: string;
   selectedGeo: string;
   mapSubscription: Subscription | null = null;
+  timelineSubscription: Subscription | null = null;
 
   iframeURL: string | null = null;
   iframeSafeURL: SafeResourceUrl | null;
@@ -97,8 +99,8 @@ export class AddNewBarComponent implements OnInit {
 
   openTimeline() {
     this.mapSelector.showTimelineSelector = true;
-    this.mapSubscription?.unsubscribe();
-    this.mapSubscription = this.mapSelector.timelineResults.pipe(
+    this.timelineSubscription?.unsubscribe();
+    this.timelineSubscription = this.mapSelector.timelineResults.pipe(
       untilDestroyed(this)
     ).subscribe((value) => {
       console.log('GOT DATE', value);
@@ -110,8 +112,8 @@ export class AddNewBarComponent implements OnInit {
 
   closeTimeline() {
     this.mapSelector.showTimelineSelector = false;
-    this.mapSubscription?.unsubscribe();
-    this.mapSubscription = null;
+    this.timelineSubscription?.unsubscribe();
+    this.timelineSubscription = null;
   }
 
   closeMe() {
@@ -138,12 +140,12 @@ export class AddNewBarComponent implements OnInit {
     this.slide_ = value;
     if (this.slide_ === 1) {
       this.openMap();
+    } else {
+      this.closeMap();
     }
     if (this.slide_ === 2) {
-      this.closeMap();
       this.openTimeline();
-    }
-    if (this.slide_ === 3) {
+    } else {
       this.closeTimeline();
     }
   }

diff --git a/projects/chronomaps/src/app/chronomap-page/chronomap-page.component.html b/projects/chronomaps/src/app/chronomap-page/chronomap-page.component.html
@@ -1,12 +1,10 @@
 <div class='layout' *ngIf='chronomap()'>
     <div class='content'>
         <app-chronomap [chronomap]='chronomap_'></app-chronomap>
-        @if (layout.desktop()) {
-            <app-infobar [class.open]='info' [chronomap]='chronomap_' (close)='info=false'
-            ></app-infobar>
-            <app-add-new-bar *ngIf='addNew' [chronomap]='chronomap_' [class.open]='addNewOpen' (close)='addNew=false'
-            ></app-add-new-bar>        
-        }
+        <app-infobar *ngIf='info' [class.open]='info' [chronomap]='chronomap_'  [class.open]='infoOpen' (close)='info=false'
+        ></app-infobar>
+        <app-add-new-bar *ngIf='addNew' [chronomap]='chronomap_' [class.open]='addNewOpen' (close)='addNew=false'
+        ></app-add-new-bar>        
         <!-- <app-layers-bar *ngIf='layers' [class.open]='layersOpen' [api]='api' (close)='layers=false' (addNew)='addNew=true'
         ></app-layers-bar> -->
     </div>
@@ -52,13 +50,6 @@ <h2 [style.color]='chronomap()?.primaryColor()' [innerHTML]='marked(chronomap()?
             </div>
         </div>
     </div>
-
-    @if (layout.mobile()) {
-        <app-infobar [class.open]='info' [chronomap]='chronomap_' (close)='info=false'
-        ></app-infobar>
-        <app-add-new-bar *ngIf='addNew' [chronomap]='chronomap_' [class.open]='addNewOpen' (close)='addNew=false'
-        ></app-add-new-bar>    
-    }
 </div>
 
 

diff --git a/projects/chronomaps/src/app/chronomap-page/chronomap-page.component.less b/projects/chronomaps/src/app/chronomap-page/chronomap-page.component.less
@@ -37,6 +37,10 @@
                 display: flex;
                 flex-flow: row;        
             });
+            .mobile({
+                display: flex;
+                flex-flow: column;
+            })
         }
 
         app-infobar, app-add-new-bar, app-layers-bar {
@@ -54,11 +58,8 @@
                 }
             });
             .mobile({
-                position: absolute;;
-                bottom: 0;
-                right: 0;
+                flex: 0 0 auto;
                 width: 100%;
-                height: auto;
                 transform: translateY(100%);
                 &.open {
                     transform: translateY(0);
@@ -69,7 +70,7 @@
             z-index: 20;
         }
 
-        app-add-new-bar, app-layers-bar {
+        app-layers-bar {
             min-height: 80vh;
         }
 
@@ -134,6 +135,7 @@
                     flex-flow: row;
                     padding: 8px 8px 8px 0;
                     border-bottom: solid 1px black;
+                    gap: 4px;
                 });
 
                 &.layout-mobile {

diff --git a/projects/chronomaps/src/app/chronomap-page/chronomap-page.component.ts b/projects/chronomaps/src/app/chronomap-page/chronomap-page.component.ts
@@ -25,6 +25,7 @@ export class ChronomapPageComponent {
   _info = false;
   _addNew = false;
   _sortFilter = false;
+  infoOpen = false;
   addNewOpen = false;
   sortFilterOpen = false;
   mobileMenu = false;
@@ -78,8 +79,14 @@ export class ChronomapPageComponent {
     console.log('INFO=', value);
     this._addNew = false;
     this._sortFilter = false;
-    this._info = value;
     localStorage.setItem(this.storageKey, 'opened');
+    if (value) {
+      this._info = value;
+      timer(0).subscribe(() => {this.infoOpen = value;});
+    } else {
+      this.infoOpen = value;
+      timer(300).subscribe(() => {this._info = value;});
+    }
   }
 
   get addNew() { return this._addNew; }

diff --git a/projects/chronomaps/src/app/chronomap-page/map-selector/map-selector.component.ts b/projects/chronomaps/src/app/chronomap-page/map-selector/map-selector.component.ts
@@ -1,27 +1,29 @@
-import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { MapService } from '../../map.service';
 
 import * as mapboxgl from 'mapbox-gl';
 import * as MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
 
 import { MapSelectorService } from '../../map-selector.service';
 import { ChronomapDatabase } from '../../data.service';
+import { timer } from 'rxjs';
 
 @Component({
   selector: 'app-map-selector',
   templateUrl: './map-selector.component.html',
   styleUrls: ['./map-selector.component.less']
 })
-export class MapSelectorComponent implements AfterViewInit {
+export class MapSelectorComponent implements AfterViewInit, OnDestroy {
 
   @Input() chronomap: ChronomapDatabase;
   @Input() flyToOptions: mapboxgl.FlyToOptions;
 
   @ViewChild('mapEl', {static: true}) mapEl: ElementRef;
 
   theMap: mapboxgl.Map;
+  resizeObserver: ResizeObserver;
 
-  constructor(private mapSvc: MapService, private mapSelector: MapSelectorService) { }
+  constructor(private mapSvc: MapService, private mapSelector: MapSelectorService, private el: ElementRef) { }
 
   ngAfterViewInit(): void {
     this.chronomap.ready.subscribe(() => {
@@ -51,5 +53,16 @@ export class MapSelectorComponent implements AfterViewInit {
         this.mapSelector.submitMapResult(geo);
       });
     });
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = new ResizeObserver(() => {
+      timer(0).subscribe(() => {
+        this.theMap.resize();
+      });
+    });
+    this.resizeObserver.observe(this.el.nativeElement);
+  }
+
+  ngOnDestroy(): void {
+    this.resizeObserver?.disconnect();
   }
 }
diff --git a/projects/chronomaps/src/app/time-line/time-line.component.ts b/projects/chronomaps/src/app/time-line/time-line.component.ts
@@ -131,7 +131,7 @@ export class TimeLineComponent implements OnInit, OnChanges, AfterViewInit {
   }
 
   ngOnInit(): void {
-      this.parseState(this.state() || '');
+      this.parseState(this.state ? (this.state() || '') : '');
   }
 
   ngAfterViewInit(): void {