optimizing mobile song text view

src/app/widget-modules/components/application-frame/navigation/navigation.component.html

@@ -1,4 +1,4 @@
-<nav class="head">
+<nav [class.hidden]="(windowScroll$|async)>60" class="head">
   <div class="links">
     <app-link [icon]="faSongs" link="/songs" text="Lieder"></app-link>
     <app-link [icon]="faShows" link="/shows" text="Veranstaltungen"></app-link>

src/app/widget-modules/components/application-frame/navigation/navigation.component.less

@@ -11,11 +11,17 @@ nav {
     background: @navigation-background;
     z-index: 1;
     .card-3;
+    transition: all 300ms ease-in-out;
 
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
 
+    &.hidden {
+      @media screen and (max-width: 860px) {
+        top: -60px;
+      }
+    }
 
   }
 }

src/app/widget-modules/components/application-frame/navigation/navigation.component.ts

@@ -1,23 +1,21 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 import {faMusic} from '@fortawesome/free-solid-svg-icons/faMusic';
 import {faPersonBooth} from '@fortawesome/free-solid-svg-icons/faPersonBooth';
 import {faUserCog} from '@fortawesome/free-solid-svg-icons/faUserCog';
+import {fromEvent} from 'rxjs';
+import {distinctUntilChanged, map, shareReplay, startWith} from 'rxjs/operators';
 
 @Component({
   selector: 'app-navigation',
   templateUrl: './navigation.component.html',
   styleUrls: ['./navigation.component.less']
 })
-export class NavigationComponent implements OnInit {
+export class NavigationComponent {
 
   public faSongs = faMusic;
   public faShows = faPersonBooth;
   public faUser = faUserCog;
 
-  constructor() {
+  public readonly windowScroll$ = fromEvent(window, 'scroll').pipe(map(x => window.scrollY), startWith(0), distinctUntilChanged(), shareReplay(1));
-  }
-
-  ngOnInit() {
-  }
 
 }

src/app/widget-modules/components/song-text/song-text.component.html

@@ -1,12 +1,10 @@
-<div [class.chords]="_chordMode!=='hide'" class="song-text">
+<div (click)="onClick()" [class.chords]="_chordMode!=='hide'" class="song-text">
 
   <div (click)="onChordClick()" class="menu">
     <fa-icon [icon]="faLines"></fa-icon>
   </div>
 
   <div *ngFor="let section of sections" [class.chorus]="section.type===1" class="section">
-    <div *ngFor="let line of getLines(section)" [class.chord]="line.type===0" class="line">
+    <div *ngFor="let line of getLines(section)" [class.chord]="line.type===0" class="line">{{line.text}}</div>
-      {{line.text}}
-    </div>
   </div>
 </div>

src/app/widget-modules/components/song-text/song-text.component.ts

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {
   Line,
   LineType,
@@ -26,7 +26,7 @@ export class SongTextComponent implements OnInit {
   @Output() public chordModeChanged = new EventEmitter<ChordMode>();
   public faLines = faGripLines;
 
-  constructor(private textRenderingService: TextRenderingService) {
+  constructor(private textRenderingService: TextRenderingService, private elRef: ElementRef) {
   }
 
   @Input()
@@ -71,4 +71,7 @@ export class SongTextComponent implements OnInit {
     }
   }
 
+  public onClick() {
+    scrollTo(0, this.elRef.nativeElement.offsetTop - 20);
+  }
 }

src/styles/styles.less

@@ -8,6 +8,9 @@
 //html, body {
 //  height: 100%;
 //}
+html {
+  scroll-behavior: smooth;
+}
 
 body {
   margin: 0;