web-remote/src/app/components/chord-view/chord-view.component.html

26 lines
998 B
HTML

<div class="overlay">
<div>
<div class="tags">
<span *ngFor="let tag of tags" [class.active]="tag.active">{{ tag.text }}</span>
</div>
<div class="container">
<div class="slide currentSlide song" [innerHTML]="chordproFormatted(currentSlides[0])|chordpro:transpose"></div>
<div class="nextSlides">
<div class="slide song" [class.first]="slide.first_slide_of_tag" *ngFor="let slide of nextSlides" [innerHTML]="chordproFormatted(slide)|chordpro:transpose"></div>
</div>
</div>
</div>
<div class="sidebar">
<div class="time">{{ time|date:'HH:mm' }}</div>
<div class="transpose">
<button mat-icon-button (click)="transposeUp()">
<mat-icon>keyboard_arrow_up</mat-icon>
</button>
<span>{{ transpose }}</span>
<button mat-icon-button (click)="transposeDown()">
<mat-icon>keyboard_arrow_down</mat-icon>
</button>
</div>
<button mat-raised-button routerLink="/">Close</button>
</div>
</div>