show design fixes

This commit is contained in:
2020-04-17 15:33:08 +02:00
committed by smuddy
parent 617a87c29c
commit 3075069650
5 changed files with 17 additions and 7 deletions

View File

@@ -24,7 +24,7 @@
<mat-option *ngFor="let song of songs" [value]="song.id">{{song.title}}</mat-option> <mat-option *ngFor="let song of songs" [value]="song.id">{{song.title}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<button mat-button>aus Übersicht</button>
</div> </div>
<app-button-row> <app-button-row>
<button (click)="onArchive(true)" *ngIf="!show.archived" mat-button>Archivieren</button> <button (click)="onArchive(true)" *ngIf="!show.archived" mat-button>Archivieren</button>

View File

@@ -1,5 +1,6 @@
.add-row { .add-row {
display: flex; display: flex;
margin-top: 10px;
.mat-form-field { .mat-form-field {
width: 100%; width: 100%;

View File

@@ -2,8 +2,8 @@
<div *ngIf="show.published" class="title published">{{_song.title}}</div> <div *ngIf="show.published" class="title published">{{_song.title}}</div>
<div *ngIf="!show.published" class="song"> <div *ngIf="!show.published" class="song">
<app-menu-button (click)="reorder(true)" [icon]="faUp" class="btnUp"></app-menu-button> <app-menu-button (click)="reorder(true)" [icon]="faUp" class="btn-up btn-icon"></app-menu-button>
<app-menu-button (click)="reorder(false)" [icon]="faDown" class="btnDown"></app-menu-button> <app-menu-button (click)="reorder(false)" [icon]="faDown" class="btn-down btn-icon"></app-menu-button>
<span class="title">{{_song.title}}</span> <span class="title">{{_song.title}}</span>
<span class="keys"> <span class="keys">
<span *ngIf="showSong.keyOriginal!==showSong.key">{{showSong.keyOriginal}}&nbsp;&nbsp;</span> <span *ngIf="showSong.keyOriginal!==showSong.key">{{showSong.keyOriginal}}&nbsp;&nbsp;</span>
@@ -13,7 +13,7 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</span> </span>
<app-menu-button (click)="onDelete()" [icon]="faDelete" class="btnDelete"></app-menu-button> <app-menu-button (click)="onDelete()" [icon]="faDelete" class="btn-delete btn-icon"></app-menu-button>
</div> </div>
<app-song-text (chordModeChanged)="onChordModeChanged($event)" *ngIf="showText || show.published" <app-song-text (chordModeChanged)="onChordModeChanged($event)" *ngIf="showText || show.published"
[chordMode]="showSong.chordMode" [chordMode]="showSong.chordMode"

View File

@@ -20,11 +20,11 @@ mat-form-field {
margin: -24px 0 -20px 0; margin: -24px 0 -20px 0;
} }
.btnUp { .btn-up {
grid-area: up; grid-area: up;
} }
.btnDown { .btn-down {
grid-area: down; grid-area: down;
} }
@@ -42,7 +42,7 @@ mat-form-field {
justify-content: flex-end; justify-content: flex-end;
} }
.btnDelete { .btn-delete {
grid-area: delete; grid-area: delete;
justify-content: flex-end; justify-content: flex-end;
} }

View File

@@ -47,3 +47,12 @@ h1, h2, h3, h4 {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.btn-icon {
opacity: 0.2;
transition: all 300ms ease-in-out;
&:hover {
opacity: 1;
}
}