mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
thePR0M3TH3ANandClaude Opus 4.8
f46b1ce7f3
Design polish from feedback: - Playlist cards are now a "stack of clips" cover: the first video's thumbnail fills a 16:9 tile with two offset/rotated layers peeking behind it (::before/ ::after). A themed gradient scrim (accent-strong→accent→clear, via color-mix) darkens the base so the title sits BOLD and WHITE over the cover instead of small grey text underneath. Video count moved to a pill in the top-right. channelPlaylists.js resolves the cover from the app's active videos (buildVideoAddressPointer → video.thumbnail), falling back to playlist.image. - Back button on the playlist view: was a bare "← Back to channel" text link, now a proper .btn-ghost (sm) pill with a chevron icon — matches the site's buttons and is theme-aware. - tokens.css: added --size-4px/--size-5px for the stack offsets (token lint). Scrim/title use --color-white (always light — the scrim is always dark regardless of theme). Lint + build clean. Co-Authored-By: Claude Opus 4.8 <[email protected]>
42 lines
1.3 KiB
HTML
42 lines
1.3 KiB
HTML
<!-- views/playlist.html — creator playlist (#37). Renders the playlist's ordered
|
|
videos into the shared #videoList grid via app.renderVideoList. -->
|
|
<section data-ds="new">
|
|
<div class="mb-4">
|
|
<a
|
|
href="#view=most-recent-videos"
|
|
id="playlistBackLink"
|
|
class="btn-ghost"
|
|
data-size="sm"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="w-4 h-4"
|
|
aria-hidden="true"
|
|
>
|
|
<polyline points="15 18 9 12 15 6"></polyline>
|
|
</svg>
|
|
Back to channel
|
|
</a>
|
|
</div>
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<h2 id="playlistTitle" class="text-xl font-semibold text-text">Playlist</h2>
|
|
</div>
|
|
<p id="playlistMeta" class="text-sm text-muted mb-4"></p>
|
|
<div id="videoList" class="bv-grid-video" data-testid="video-list">
|
|
<div class="sidebar-loading-wrapper" role="status" aria-live="polite">
|
|
<div class="sidebar-loading-indicator">
|
|
<span
|
|
class="status-spinner status-spinner--inline"
|
|
aria-hidden="true"
|
|
></span>
|
|
<span class="sidebar-loading-text">Loading playlist…</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|