vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI: dynamically adjust title font size based on length

Browse source
This commit is contained in:
Julien Maille 2025-12-23 12:50:53 +01:00
parent 43f04e7454
commit ed2d9425eb
2 changed files with 50 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
js/ui.js
View file

@ -23,6 +23,15 @@ export class UIRenderer {
`;
}
adjustTitleFontSize(element, text) {
element.classList.remove('long-title', 'very-long-title');
if (text.length > 40) {
element.classList.add('very-long-title');
} else if (text.length > 25) {
element.classList.add('long-title');
}
}
createTrackItemHTML(track, index, showCover = false, hasMultipleDiscs = false) {
const playIconSmall = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>';
const trackImageHTML = showCover ? `<img src="${this.api.getCoverUrl(track.album?.cover, '80')}" alt="Track Cover" class="track-item-cover" loading="lazy">` : '';
@ -299,6 +308,8 @@ export class UIRenderer {
const explicitBadge = hasExplicitContent(album) ? this.createExplicitBadge() : '';
titleEl.innerHTML = `${album.title} ${explicitBadge}`;
this.adjustTitleFontSize(titleEl, album.title);
const totalDuration = calculateTotalDuration(tracks);
let dateDisplay = '';
if (album.releaseDate) {
@ -378,6 +389,8 @@ async renderPlaylistPage(playlistId) {
titleEl.textContent = playlist.title;
this.adjustTitleFontSize(titleEl, playlist.title);
const totalDuration = calculateTotalDuration(tracks);
metaEl.textContent = `${playlist.numberOfTracks} tracks • ${formatDuration(totalDuration)}`;
@ -423,6 +436,9 @@ async renderPlaylistPage(playlistId) {
imageEl.src = this.api.getArtistPictureUrl(artist.picture, '750');
imageEl.style.backgroundColor = '';
nameEl.textContent = artist.name;
this.adjustTitleFontSize(nameEl, artist.name);
metaEl.textContent = `${artist.popularity} popularity`;
this.renderListWithTracks(tracksContainer, artist.tracks, true);

35
styles.css
View file

@ -131,7 +131,7 @@
--highlight: #2563eb;
--highlight-rgb: 37, 99, 235;
--active-highlight: var(--highlight);
--explicit-badge: #000000;
--explicit-badge: #ef4444;
--explicit-badge-foreground: #ffffff;
}
@ -702,6 +702,15 @@ kbd {
align-items: center;
gap: 1rem;
flex-wrap: wrap;
word-break: break-word;
}
.detail-header-info .title.long-title {
font-size: 2.5rem;
}
.detail-header-info .title.very-long-title {
font-size: 1.75rem;
}
.detail-header-info .meta {
@ -1837,6 +1846,14 @@ input:checked + .slider::before {
font-size: 3rem;
}
.detail-header-info .title.long-title {
font-size: 2rem;
}
.detail-header-info .title.very-long-title {
font-size: 1.35rem;
}
.main-content {
padding: var(--spacing-lg);
}
@ -1921,6 +1938,14 @@ input:checked + .slider::before {
line-height: 1.2;
}
.detail-header-info .title.long-title {
font-size: 1.5rem;
}
.detail-header-info .title.very-long-title {
font-size: 1.25rem;
}
.detail-header-info .meta {
font-size: 0.85rem;
gap: 0.35rem;
@ -2157,6 +2182,14 @@ input:checked + .slider::before {
font-size: 1.75rem;
}
.detail-header-info .title.long-title {
font-size: 1.35rem;
}
.detail-header-info .title.very-long-title {
font-size: 1.1rem;
}
.search-tab {
padding: var(--spacing-sm) var(--spacing-md);
font-size: 0.9rem;