From 760964fb69e837f637f5bbc0469756c10e18eb92 Mon Sep 17 00:00:00 2001
From: smuddyx <smuddyx@gmail.com>
Date: Sun, 22 Mar 2020 16:08:17 +0100
Subject: [PATCH] optimizing mobile song text view

---
 .../navigation/navigation.component.html             |  2 +-
 .../navigation/navigation.component.less             |  6 ++++++
 .../navigation/navigation.component.ts               | 12 +++++-------
 .../components/song-text/song-text.component.html    |  6 ++----
 .../components/song-text/song-text.component.ts      |  7 +++++--
 src/styles/styles.less                               |  3 +++
 6 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/app/widget-modules/components/application-frame/navigation/navigation.component.html b/src/app/widget-modules/components/application-frame/navigation/navigation.component.html
index afb6e9c..4371a6e 100644
--- a/src/app/widget-modules/components/application-frame/navigation/navigation.component.html
+++ b/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>
diff --git a/src/app/widget-modules/components/application-frame/navigation/navigation.component.less b/src/app/widget-modules/components/application-frame/navigation/navigation.component.less
index e8e0fae..6ef8dfe 100644
--- a/src/app/widget-modules/components/application-frame/navigation/navigation.component.less
+++ b/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;
+      }
+    }
 
   }
 }
diff --git a/src/app/widget-modules/components/application-frame/navigation/navigation.component.ts b/src/app/widget-modules/components/application-frame/navigation/navigation.component.ts
index b137daa..af245bc 100644
--- a/src/app/widget-modules/components/application-frame/navigation/navigation.component.ts
+++ b/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() {
-  }
-
-  ngOnInit() {
-  }
+  public readonly windowScroll$ = fromEvent(window, 'scroll').pipe(map(x => window.scrollY), startWith(0), distinctUntilChanged(), shareReplay(1));
 
 }
diff --git a/src/app/widget-modules/components/song-text/song-text.component.html b/src/app/widget-modules/components/song-text/song-text.component.html
index 4d46bbd..377e8f0 100644
--- a/src/app/widget-modules/components/song-text/song-text.component.html
+++ b/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">
-      {{line.text}}
-    </div>
+    <div *ngFor="let line of getLines(section)" [class.chord]="line.type===0" class="line">{{line.text}}</div>
   </div>
 </div>
diff --git a/src/app/widget-modules/components/song-text/song-text.component.ts b/src/app/widget-modules/components/song-text/song-text.component.ts
index 377886b..36b2473 100644
--- a/src/app/widget-modules/components/song-text/song-text.component.ts
+++ b/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);
+  }
 }
diff --git a/src/styles/styles.less b/src/styles/styles.less
index 66b04fc..0ffbeff 100644
--- a/src/styles/styles.less
+++ b/src/styles/styles.less
@@ -8,6 +8,9 @@
 //html, body {
 //  height: 100%;
 //}
+html {
+  scroll-behavior: smooth;
+}
 
 body {
   margin: 0;