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 index 0edc7ec..ec45185 100644 --- 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 index e3d9c07..46f5074 100644 --- 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 index ec6c52c..0038c2f 100644 --- 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 @@
- @if (layout.desktop()) { - - - } + +
@@ -52,13 +50,6 @@

- - }

diff --git a/projects/chronomaps/src/app/chronomap-page/chronomap-page.component.less b/projects/chronomaps/src/app/chronomap-page/chronomap-page.component.less index 389ba44..93d6967 100644 --- 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 index e386454..e02b63d 100644 --- 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 index c88d198..1f4794d 100644 --- 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,4 +1,4 @@ -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'; @@ -6,13 +6,14 @@ 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; @@ -20,8 +21,9 @@ export class MapSelectorComponent implements AfterViewInit { @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 index f061d01..1c9970f 100644 --- 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 {