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

UI: Improve recommended tracks and album page layout, plus linting fixes

Browse source 
- Display recommended songs and artist top tracks in two columns on desktop.
- Implement a flowing 'L-shape' layout for the album page using floats.
- Increase playbar transparency in light mode for a better frost effect.
- Fix linting issues: add missing imports, merge duplicate CSS rules, and fix HTML quoting.
This commit is contained in:
Julien Maille 2026-01-18 14:08:52 +01:00
parent 47c5be79c7
commit a75d8b6b1f
3 changed files with 116 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
index.html
View file

@ -345,7 +345,7 @@
id="custom-firebase-config" id="custom-firebase-config"
class="template-input" class="template-input"
style="height: 150px; font-family: monospace; font-size: 0.8rem; resize: vertical" style="height: 150px; font-family: monospace; font-size: 0.8rem; resize: vertical"
placeholder='{"apiKey": "...", ...}' placeholder="{"apiKey": "...", ...}"
></textarea> ></textarea>
</div> </div>
<div class="modal-actions"> <div class="modal-actions">
@ -995,39 +995,45 @@
</div> </div>
</div> </div>
</header> </header>
<div class="track-list" id="album-detail-tracklist"></div> <div class="album-content-layout">
<div class="track-list" id="album-detail-tracklist"></div>
<section <section
class="content-section" class="content-section"
id="album-section-more-albums" id="album-section-more-albums"
style="display: none; margin-top: 3rem" style="display: none; margin-top: 3rem"
> >
<h2 class="section-title" id="album-title-more-albums">from Artist</h2> <h2 class="section-title" id="album-title-more-albums">from Artist</h2>
<div class="card-grid" id="album-detail-more-albums"></div> <div class="card-grid" id="album-detail-more-albums"></div>
</section> </section>
<section class="content-section" id="album-section-eps" style="display: none; margin-top: 3rem"> <section
<h2 class="section-title" id="album-title-eps">EPs and Singles</h2> class="content-section"
<div class="card-grid" id="album-detail-eps"></div> id="album-section-eps"
</section> style="display: none; margin-top: 3rem"
>
<h2 class="section-title" id="album-title-eps">EPs and Singles</h2>
<div class="card-grid" id="album-detail-eps"></div>
</section>
<section <section
class="content-section" class="content-section"
id="album-section-similar-artists" id="album-section-similar-artists"
style="display: none; margin-top: 3rem" style="display: none; margin-top: 3rem"
> >
<h2 class="section-title">Similar Artists</h2> <h2 class="section-title">Similar Artists</h2>
<div class="card-grid" id="album-detail-similar-artists"></div> <div class="card-grid" id="album-detail-similar-artists"></div>
</section> </section>
<section <section
class="content-section" class="content-section"
id="album-section-similar-albums" id="album-section-similar-albums"
style="display: none; margin-top: 3rem" style="display: none; margin-top: 3rem"
> >
<h2 class="section-title">Similar Albums</h2> <h2 class="section-title">Similar Albums</h2>
<div class="card-grid" id="album-detail-similar-albums"></div> <div class="card-grid" id="album-detail-similar-albums"></div>
</section> </section>
</div>
</div> </div>
<section id="page-playlist" class="page"> <section id="page-playlist" class="page">

1
js/ui.js
View file

@ -1,4 +1,5 @@
//js/ui.js //js/ui.js
import { showNotification } from './downloads.js';
import { import {
SVG_PLAY, SVG_PLAY,
SVG_DOWNLOAD, SVG_DOWNLOAD,

102
styles.css
View file

@ -327,6 +327,7 @@ kbd {
padding: var(--spacing-xl); padding: var(--spacing-xl);
scroll-behavior: smooth; scroll-behavior: smooth;
position: relative; /* Context for background */ position: relative; /* Context for background */
padding-bottom: 160px !important;
} }
/* Ensure content sits on top of background */ /* Ensure content sits on top of background */
@ -369,18 +370,31 @@ kbd {
.now-playing-bar { .now-playing-bar {
grid-area: player; grid-area: player;
background-color: var(--card);
border-top: 1px solid var(--border);
padding: var(--spacing-sm) var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md);
display: grid; display: grid;
grid-template-columns: 1fr 0.9fr 1fr; grid-template-columns: 1fr 0.9fr 1fr;
align-items: center; align-items: center;
gap: var(--spacing-sm); gap: var(--spacing-sm);
position: relative;
z-index: 2100; z-index: 2100;
/* Floating bar overrides */
width: calc(96% - 190px) !important;
left: calc(190px + 2%);
bottom: 15px !important;
border-radius: 16px;
position: fixed !important;
background-color: color-mix(in srgb, var(--card) 85%, transparent);
backdrop-filter: blur(20px);
border: 1px solid var(--border);
box-shadow: 0 8px 32px rgb(0, 0, 0, 0.4);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
height: var(--player-bar-height-desktop); height: var(--player-bar-height-desktop);
} }
:root[data-theme='light'] .now-playing-bar {
background-color: color-mix(in srgb, var(--card) 80%, transparent);
}
.sidebar-logo { .sidebar-logo {
display: flex; display: flex;
align-items: center; align-items: center;
@ -889,6 +903,67 @@ body.has-page-background .track-item:hover {
gap: 2px; gap: 2px;
} }
#home-recommended-songs,
#artist-detail-tracks,
#playlist-detail-recommended {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
gap: 2px var(--spacing-xl);
}
@media (max-width: 1100px) {
#home-recommended-songs,
#artist-detail-tracks,
#playlist-detail-recommended {
grid-template-columns: 1fr;
}
}
.album-content-layout {
display: block;
}
.album-content-layout::after {
content: '';
display: table;
clear: both;
}
@media (min-width: 1200px) {
#album-detail-tracklist {
float: left;
width: 55%;
margin-right: var(--spacing-2xl);
margin-bottom: var(--spacing-2xl);
}
.album-content-layout .content-section {
/* Default flow to allow wrapping around the float */
margin-top: 0 !important;
margin-bottom: var(--spacing-2xl);
}
/* Switch to inline-block layout for flow behavior */
.album-content-layout .content-section .card-grid {
display: block;
gap: 0;
}
.album-content-layout .content-section .card-grid .card {
display: inline-block;
vertical-align: top;
width: 155px; /* Fixed width to ensure consistent flow */
margin: 0 var(--spacing-md) var(--spacing-md) 0;
white-space: normal; /* Reset in case inherited */
}
.album-content-layout .section-title {
font-size: 1.4rem;
margin-bottom: var(--spacing-md);
clear: none; /* Allow sitting next to float */
}
}
.track-list-header { .track-list-header {
display: grid; display: grid;
grid-template-columns: 40px 1fr auto; grid-template-columns: 40px 1fr auto;
@ -1489,6 +1564,7 @@ input:checked + .slider::before {
gap: 0.75rem; gap: 0.75rem;
font-size: 0.8rem; font-size: 0.8rem;
color: var(--muted-foreground); color: var(--muted-foreground);
order: -1;
} }
.player-controls .progress-container span { .player-controls .progress-container span {
@ -3983,23 +4059,6 @@ img[src=''] {
} }
} }
.player-controls .progress-container {
order: -1;
}
.now-playing-bar {
width: calc(96% - 190px) !important;
left: calc(190px + 2%);
bottom: 15px !important;
border-radius: 16px;
position: fixed !important;
background-color: color-mix(in srgb, var(--card) 85%, transparent);
backdrop-filter: blur(20px);
border: 1px solid var(--border);
box-shadow: 0 8px 32px rgb(0, 0, 0, 0.4);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
body:has(#fullscreen-cover-overlay:not([style*='display: none'])) .now-playing-bar { body:has(#fullscreen-cover-overlay:not([style*='display: none'])) .now-playing-bar {
width: 96% !important; width: 96% !important;
left: 2% !important; left: 2% !important;
@ -4012,6 +4071,3 @@ body:has(#fullscreen-cover-overlay:not([style*='display: none'])) .now-playing-b
} }
} }
.main-content {
padding-bottom: 160px !important;
}