benjamin/wgenerator
1
0
Fork 0
Code Releases Activity

fix show song header

Browse Source
This commit is contained in:
benjamin
2026-03-11 17:28:04 +01:00
parent 0452ec55b2
commit 3082ae1b55
2 changed files with 75 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/app/modules/shows/show/song/song.component.html
View File

@@ -7,7 +7,12 @@
</div>
}
@if (!show.published && !fullscreen) {
<div class="song">
<div
class="song"
[class.show-text-layout]="!!showText"
[class.compact-layout]="!showText"
[class.with-drag]="dragHandle && !edit"
>
@if (dragHandle && !edit) {
<button
aria-label="Lied verschieben"
@@ -37,19 +42,41 @@
}
</div>
@if (!edit) {
<div aria-hidden="true" class="song select">
<div
aria-hidden="true"
class="song select"
[class.show-text-layout]="!!showText"
[class.compact-layout]="!showText"
[class.with-drag]="dragHandle"
>
@if (dragHandle) {
<span class="drag-handle-placeholder"></span>
}
<span> <mat-form-field class="keys-select">
<mat-select #option [formControl]="keyFormControl" tabIndex="-1">
@for (key of keys; track key) {
<mat-option [value]="key">{{ key }}</mat-option>
}
</mat-select>
</mat-form-field></span>
<span></span>
<span></span>
@if (!showText) {
<span class="keys">
<mat-form-field class="keys-select">
<mat-select #option [formControl]="keyFormControl" tabIndex="-1">
@for (key of keys; track key) {
<mat-option [value]="key">{{ key }}</mat-option>
}
</mat-select>
</mat-form-field>
</span>
<span class="title"></span>
} @else {
<span class="title"></span>
<span class="keys">
<mat-form-field class="keys-select">
<mat-select #option [formControl]="keyFormControl" tabIndex="-1">
@for (key of keys; track key) {
<mat-option [value]="key">{{ key }}</mat-option>
}
</mat-select>
</mat-form-field>
</span>
}
<span class="btn-edit"></span>
<span class="btn-delete"></span>
</div>
}
}

42
src/app/modules/shows/show/song/song.component.less
View File

@@ -5,11 +5,6 @@
}
display: grid;
grid-template-columns: 24px auto 70px 25px 25px;
@media screen and (max-width: 860px) {
grid-template-columns: 24px auto 70px 45px 45px;
}
grid-template-areas: "drag title keys edit delete";
& > * {
display: flex;
@@ -17,6 +12,42 @@
}
overflow: hidden;
&.compact-layout {
grid-template-columns: 70px auto 25px 25px;
grid-template-areas: "keys title edit delete";
@media screen and (max-width: 860px) {
grid-template-columns: 50px auto 45px 45px;
}
&.with-drag {
grid-template-columns: 24px 50px auto 25px 25px;
grid-template-areas: "drag keys title edit delete";
@media screen and (max-width: 860px) {
grid-template-columns: 24px 50px auto 45px 45px;
}
}
}
&.show-text-layout {
grid-template-columns: auto 50px 25px 25px;
grid-template-areas: "title keys edit delete";
@media screen and (max-width: 860px) {
grid-template-columns: auto 50px 45px 45px;
}
&.with-drag {
grid-template-columns: 24px auto 50px 25px 25px;
grid-template-areas: "drag title keys edit delete";
@media screen and (max-width: 860px) {
grid-template-columns: 24px auto 50px 45px 45px;
}
}
}
}
.drag-handle,
@@ -73,6 +104,7 @@
height: 0;
overflow: hidden;
line-height: 0;
min-width: 80px;
}
.keys {