Fix scrolling on details page
This commit is contained in:
parent
a2a9a3a373
commit
9ce8bd49ed
@ -1,4 +1,4 @@
|
|||||||
<div *ngIf="region">
|
<div #container *ngIf="region">
|
||||||
<img alt="Picture of {{region.name}}" class="region-img"
|
<img alt="Picture of {{region.name}}" class="region-img"
|
||||||
src="https://travopti.de/api/v1/regions/{{region.region_id}}/image">
|
src="https://travopti.de/api/v1/regions/{{region.region_id}}/image">
|
||||||
<div class="region-details-header">
|
<div class="region-details-header">
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import {Component, OnInit} from '@angular/core';
|
import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
|
||||||
import {Region} from '../../interfaces/region.interface';
|
import {Region} from '../../interfaces/region.interface';
|
||||||
import {ActivatedRoute, ParamMap} from '@angular/router';
|
import {ActivatedRoute, ParamMap} from '@angular/router';
|
||||||
import {DataService} from '../../services/data.service';
|
import {DataService} from '../../services/data.service';
|
||||||
@ -11,7 +11,10 @@ import {SearchParameter} from '../../interfaces/search-request.interface';
|
|||||||
templateUrl: './region-details.component.html',
|
templateUrl: './region-details.component.html',
|
||||||
styleUrls: ['./region-details.component.scss']
|
styleUrls: ['./region-details.component.scss']
|
||||||
})
|
})
|
||||||
export class RegionDetailsComponent implements OnInit {
|
export class RegionDetailsComponent implements AfterViewInit {
|
||||||
|
|
||||||
|
@ViewChild('container', {static: false})
|
||||||
|
container: ElementRef;
|
||||||
|
|
||||||
/** Cut descriptions after x chars */
|
/** Cut descriptions after x chars */
|
||||||
readonly DESC_CUT_POINT = 300;
|
readonly DESC_CUT_POINT = 300;
|
||||||
@ -34,10 +37,17 @@ export class RegionDetailsComponent implements OnInit {
|
|||||||
constructor(private route: ActivatedRoute, private ds: DataService) {
|
constructor(private route: ActivatedRoute, private ds: DataService) {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngAfterViewInit(): void {
|
||||||
this.route.paramMap.pipe(
|
this.route.paramMap.pipe(
|
||||||
switchMap((params: ParamMap) => this.ds.getRegion(parseInt(params.get('id'), 10)))
|
switchMap((params: ParamMap) => this.ds.getRegion(parseInt(params.get('id'), 10)))
|
||||||
).subscribe((region: Region) => this.region = region);
|
).subscribe((region: Region) => {
|
||||||
|
this.region = region;
|
||||||
|
setTimeout(() => {
|
||||||
|
if (this.container) {
|
||||||
|
this.container.nativeElement.scrollIntoView();
|
||||||
|
}
|
||||||
|
}, 10);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user