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:34:30 +01:00
parent 3082ae1b55
commit ce67fb4a34
3 changed files with 24 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/modules/shows/show/show.component.html
View File

@@ -31,6 +31,7 @@
@if (showSongs && !useSwiper) {
<div (cdkDropListDropped)="drop($event, show)"
[cdkDropListDisabled]="show.published || showText"
[style.--song-key-column-width]="getSongKeyColumnWidth(show)"
[style.font-size]="textSize + 'em'"
cdkDropList
class="song-list">

14
src/app/modules/shows/show/show.component.ts
View File

@@ -255,6 +255,20 @@ export class ShowComponent implements OnInit, OnDestroy {
const song = showSongs[i + 1];
return song?.title ?? '';
}
public getSongKeyColumnWidth(show: Show): string {
const labels = this.orderedShowSongs(show).map(song => {
if (song.keyOriginal && song.keyOriginal !== song.key) {
return `${song.keyOriginal} -> ${song.key}`;
}
return song.key ?? '';
});
const longestLabelLength = labels.reduce((max, label) => Math.max(max, label.length), 0);
const widthInCh = Math.max(3, longestLabelLength);
return `${widthInCh}ch`;
}
}
export interface Swiper {

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

@@ -14,37 +14,37 @@
overflow: hidden;
&.compact-layout {
grid-template-columns: 70px auto 25px 25px;
grid-template-columns: var(--song-key-column-width, 30px) auto 25px 25px;
grid-template-areas: "keys title edit delete";
@media screen and (max-width: 860px) {
grid-template-columns: 50px auto 45px 45px;
grid-template-columns: var(--song-key-column-width, 30px) auto 45px 45px;
}
&.with-drag {
grid-template-columns: 24px 50px auto 25px 25px;
grid-template-columns: 24px var(--song-key-column-width, 30px) 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;
grid-template-columns: 24px var(--song-key-column-width, 30px) auto 45px 45px;
}
}
}
&.show-text-layout {
grid-template-columns: auto 50px 25px 25px;
grid-template-columns: auto var(--song-key-column-width, 30px) 25px 25px;
grid-template-areas: "title keys edit delete";
@media screen and (max-width: 860px) {
grid-template-columns: auto 50px 45px 45px;
grid-template-columns: auto var(--song-key-column-width, 30px) 45px 45px;
}
&.with-drag {
grid-template-columns: 24px auto 50px 25px 25px;
grid-template-columns: 24px auto var(--song-key-column-width, 30px) 25px 25px;
grid-template-areas: "drag title keys edit delete";
@media screen and (max-width: 860px) {
grid-template-columns: 24px auto 50px 45px 45px;
grid-template-columns: 24px auto var(--song-key-column-width, 30px) 45px 45px;
}
}
}
@@ -104,7 +104,7 @@
height: 0;
overflow: hidden;
line-height: 0;
min-width: 80px;
min-width: max(100px, var(--song-key-column-width, 30px));
}
.keys {