From 9ce8bd49ed0ac3dfbb28686a49bcceed6a955209 Mon Sep 17 00:00:00 2001
From: Patrick Gebhardt <pjgebhardt@icloud.com>
Date: Sun, 21 Jun 2020 16:04:41 +0200
Subject: [PATCH] Fix scrolling on details page

---
 .../region-details.component.html              |  2 +-
 .../region-details/region-details.component.ts | 18 ++++++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/containers/region-details/region-details.component.html b/frontend/src/app/containers/region-details/region-details.component.html
index 77d2442..97ccdb6 100644
--- a/frontend/src/app/containers/region-details/region-details.component.html
+++ b/frontend/src/app/containers/region-details/region-details.component.html
@@ -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">
diff --git a/frontend/src/app/containers/region-details/region-details.component.ts b/frontend/src/app/containers/region-details/region-details.component.ts
index f2efee5..89417cb 100644
--- a/frontend/src/app/containers/region-details/region-details.component.ts
+++ b/frontend/src/app/containers/region-details/region-details.component.ts
@@ -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);
+    });
   }
 
 }