tvolkmann/travopti
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix scrolling on details page

Browse Source
This commit is contained in:
Patrick Gebhardt 2020-06-21 16:04:41 +02:00
parent a2a9a3a373
commit 9ce8bd49ed
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/containers/region-details/region-details.component.html
View File

@ -1,4 +1,4 @@
<div *ngIf="region">
<div #container *ngIf="region">
<img alt="Picture of {{region.name}}" class="region-img"
src="https://travopti.de/api/v1/regions/{{region.region_id}}/image">
<div class="region-details-header">

18
frontend/src/app/containers/region-details/region-details.component.ts
View File

@ -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 {ActivatedRoute, ParamMap} from '@angular/router';
import {DataService} from '../../services/data.service';
@ -11,7 +11,10 @@ import {SearchParameter} from '../../interfaces/search-request.interface';
templateUrl: './region-details.component.html',
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 */
readonly DESC_CUT_POINT = 300;
@ -34,10 +37,17 @@ export class RegionDetailsComponent implements OnInit {
constructor(private route: ActivatedRoute, private ds: DataService) {
}
ngOnInit() {
ngAfterViewInit(): void {
this.route.paramMap.pipe(
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);
});
}
}