benjamin/wgenerator
1
0
Fork 0
Code Releases Activity

optimizing mobile song text view

Browse Source
This commit is contained in:
smuddyx
2020-03-22 16:08:17 +01:00
committed by smuddy
parent a50d988f9b
commit 760964fb69
6 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

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

@@ -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;
}
}
}
}

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

@@ -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));
}

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

@@ -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>

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

@@ -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);
}
}