zoomable show list

src/app/modules/shows/show/show.component.html

@@ -8,10 +8,16 @@
     <i>{{show.public ? 'öffentliche' : 'geschlossene'}} Veranstaltung von
       <app-user-name [userId]="show.owner"></app-user-name>
     </i>
-    <p >
+    <div class="head">
       <mat-checkbox [(ngModel)]="showText">Text anzeigen</mat-checkbox>
-    </p>
-    <div *ngIf="showSongs" class="song-list" cdkDropList [cdkDropListDisabled]="show.published"
+      <div>
+        <app-menu-button @fade  (click)="onZoomOut()" [icon]="faZoomOut" class="btn-delete btn-icon" matTooltip="Vergrößern"></app-menu-button>
+        <app-menu-button @fade  (click)="onZoomIn()" [icon]="faZoomIn" class="btn-delete btn-icon" matTooltip="Verkleinern"></app-menu-button>
+      </div>
+    </div>
+    <div *ngIf="showSongs" class="song-list" cdkDropList [cdkDropListDisabled]="show.published || showText"
+         [style.cursor]="!(show.published || showText) ? 'drag' : 'inherit'"
+         [style.font-size]="textSize + 'em'"
          (cdkDropListDropped)="drop($event, show)">
       <div *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy" class="song-row" cdkDrag>
         <app-song

src/app/modules/shows/show/show.component.less

@@ -1,8 +1,18 @@
+:host {
+  --button-padding-mobile: 10px;
+  --button-font-size-mobile: 25px;
+}
+
 .song-row:not(:last-child) {
   display: block;
   border-bottom: 1px solid #0002;
 }
 
+.head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 
 .cdk-drag-preview {
   background-color: white;

src/app/modules/shows/show/show.component.ts

@@ -9,13 +9,15 @@ import {Song} from '../../songs/services/song';
 import {ShowSongService} from '../services/show-song.service';
 import {ShowSong} from '../services/show-song';
 import {DocxService} from '../services/docx.service';
-import {faBox, faBoxOpen, faExternalLinkAlt, faFileDownload, faLock, faUser, faUsers} from '@fortawesome/free-solid-svg-icons';
+import {faBox, faBoxOpen, faExternalLinkAlt, faFileDownload, faLock, faMagnifyingGlassMinus, faMagnifyingGlassPlus, faUser, faUsers} from '@fortawesome/free-solid-svg-icons';
 import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
+import {fade} from '../../../animations';
 
 @Component({
   selector: 'app-show',
   templateUrl: './show.component.html',
   styleUrls: ['./show.component.less'],
+  animations: [fade],
 })
 export class ShowComponent implements OnInit {
   public show$: Observable<Show | null> | null = null;
@@ -31,6 +33,8 @@ export class ShowComponent implements OnInit {
   public faDownload = faFileDownload;
   public faUser = faUser;
   public faUsers = faUsers;
+  public faZoomIn = faMagnifyingGlassPlus;
+  public faZoomOut = faMagnifyingGlassMinus;
 
   public constructor(
     private activatedRoute: ActivatedRoute,
@@ -62,6 +66,14 @@ export class ShowComponent implements OnInit {
       .subscribe(_ => (this.songs = _));
   }
 
+  public textSize = 1;
+  public onZoomIn() {
+    this.textSize += 0.1;
+  }
+  public onZoomOut() {
+    this.textSize -= 0.1;
+  }
+
   public getSong(songId: string): Song | null {
     if (!this.songs) return null;
     const filtered = this.songs.filter(_ => _.id === songId);

src/app/modules/shows/show/song/song.component.html

@@ -30,6 +30,7 @@
   </app-button-row>
 
   <app-song-text
+    @fade
     (chordModeChanged)="onChordModeChanged($event)"
     *ngIf="!edit && (showText )"
     [chordMode]="iSong.chordMode"

src/app/widget-modules/components/menu-button/menu-button.component.less

@@ -1,7 +1,9 @@
 button {
   min-width: 0;
-  padding: 0 5px;
+  padding: 0 var(--button-padding, 5px);
+  font-size: var(--button-font-size, 1em);
   @media screen and (max-width: 860px) {
-    padding: 0 15px;
+    padding: 0 var(--button-padding-mobile, 15px);
+    font-size: var(--button-font-size-mobile, 1em);
   }
 }

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

@@ -7,16 +7,16 @@
     font-family: 'Ubuntu Mono', monospace;
 
     @media screen and (max-width: 600px) {
-      font-size: 11px;
+      font-size: 0.9em;
     }
     @media screen and (max-width: 500px) {
-      font-size: 9px;
+      font-size: 0.8em;
     }
     @media screen and (max-width: 400px) {
-      font-size: 8px;
+      font-size: 0.7em;
     }
     @media screen and (max-width: 350px) {
-      font-size: 7px;
+      font-size: 0.6em;
     }
   }