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

IMP: display of playlists on mobile

Browse source
This commit is contained in:
Julien Maille 2026-01-01 22:58:20 +01:00
parent f2cbcbcb61
commit c220e8585c
2 changed files with 11 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
index.html
View file

@ -282,17 +282,16 @@
</div>
<section id="page-playlist" class="page">
<div class="detail-header">
<img id="playlist-detail-image" class="detail-cover" alt="Playlist Cover">
<header class="detail-header">
<img id="playlist-detail-image" class="detail-header-image" alt="Playlist Cover">
<div class="detail-header-info">
<h1 class="title" id="playlist-detail-title"></h1>
<p class="meta" id="playlist-detail-meta"></p>
<div class="meta" id="playlist-detail-meta"></div>
<p id="playlist-detail-description" class="detail-description"></p>
<div class="detail-actions">
<div class="detail-header-actions">
<button id="play-playlist-btn" class="btn-primary">
<span>Play</span>
</button>
<!-- Like button not typically for own playlists, but good for "followed" ones if we support that. For now, maybe skip or add "Edit" if it's user playlist -->
<button id="download-playlist-btn" class="btn-primary">
<span>Download</span>
</button>
@ -301,24 +300,24 @@
</button>
</div>
</div>
</div>
</header>
<div id="playlist-detail-tracklist" class="track-list"></div>
</section>
<section id="page-mix" class="page">
<div class="detail-header">
<img id="mix-detail-image" class="detail-cover" alt="Mix Cover">
<header class="detail-header">
<img id="mix-detail-image" class="detail-header-image" alt="Mix Cover">
<div class="detail-header-info">
<h1 class="title" id="mix-detail-title"></h1>
<p class="meta" id="mix-detail-meta"></p>
<div class="meta" id="mix-detail-meta"></div>
<p id="mix-detail-description" class="detail-description"></p>
<div class="detail-actions">
<div class="detail-header-actions">
<button id="play-mix-btn" class="btn-primary">
<span>Play</span>
</button>
</div>
</div>
</div>
</header>
<div id="mix-detail-tracklist" class="track-list"></div>
</section>

119
styles.css
View file

@ -3061,56 +3061,6 @@ input:checked + .slider::before {
opacity: 1;
}
#page-playlist .detail-header,
#page-mix .detail-header {
display: flex;
align-items: flex-top;
gap: var(--spacing-xl);
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-md);
}
#page-playlist .detail-cover,
#page-mix .detail-cover {
width: 200px;
height: 200px;
flex-shrink: 0;
background-color: var(--muted);
border-radius: var(--radius);
object-fit: cover;
box-shadow: var(--shadow-lg);
transition: opacity 0.3s ease-in-out;
}
#playlist-detail-image.loading,
#mix-detail-image.loading {
opacity: 0.3;
}
#playlist-detail-title,
#mix-detail-title {
font-size: 3rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
#playlist-detail-meta,
#mix-detail-meta {
color: var(--muted-foreground);
font-size: 0.95rem;
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
#playlist-detail-description,
#mix-detail-description {
color: var(--foreground);
@ -3120,48 +3070,6 @@ input:checked + .slider::before {
max-width: 600px;
}
#page-playlist .detail-actions,
#page-mix .detail-actions {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
flex-wrap: wrap;
}
#play-playlist-btn,
#download-playlist-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.875rem 1.75rem;
border: none;
border-radius: 2rem;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: all var(--transition);
box-shadow: var(--shadow-sm);
}
#play-playlist-btn:hover,
#download-playlist-btn:hover {
transform: scale(1.05);
box-shadow: var(--shadow-md);
}
#play-playlist-btn:disabled,
#download-playlist-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
#play-playlist-btn svg,
#download-playlist-btn svg {
flex-shrink: 0;
}
#playlist-detail-tracklist {
display: flex;
flex-direction: column;
@ -3185,32 +3093,7 @@ input:checked + .slider::before {
}
@media (max-width: 768px) {
#page-playlist .detail-header,
#page-mix .detail-header {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-lg);
padding-bottom: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
#playlist-detail-image,
#mix-detail-image {
width: 150px;
height: 150px;
}
#playlist-detail-title,
#mix-detail-title {
font-size: 2rem;
line-height: 1.2;
}
#playlist-detail-meta,
#mix-detail-meta {
font-size: 0.85rem;
}
}
/* ... existing generic rules ... */
@media (max-width: 480px) {
#playlist-detail-title {