show design fixes
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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%;
|
||||||
|
|||||||
@@ -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}} → </span>
|
<span *ngIf="showSong.keyOriginal!==showSong.key">{{showSong.keyOriginal}} → </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"
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user