owenandClaude Sonnet 5
9a3f1e4a24
The song title links to its album, the artist name links to the artist page, and clicking the cover art opens a larger version in a modal. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014r98AtcBbevpscWLsfwVvv
48 lines
2.0 KiB
HTML
48 lines
2.0 KiB
HTML
{{define "album_card"}}
|
|
<a href="/albums/{{.ID}}" class="vs-card">
|
|
<img class="vs-card-art" src="{{if .CoverArtID}}/cover-art/{{.CoverArtID}}?size=300{{else}}/static/img/default-art.svg{{end}}" alt="" loading="lazy">
|
|
<div class="vs-card-title">{{.Title}}</div>
|
|
<div class="vs-card-subtitle">{{.ArtistName}}</div>
|
|
</a>
|
|
{{end}}
|
|
|
|
{{define "artist_card"}}
|
|
<a href="/artists/{{.ID}}" class="vs-card">
|
|
<img class="vs-card-art" style="border-radius:50%;" src="{{if .CoverArtID}}/cover-art/{{.CoverArtID}}?size=300{{else}}/static/img/default-art.svg{{end}}" alt="" loading="lazy">
|
|
<div class="vs-card-title">{{.Name}}</div>
|
|
</a>
|
|
{{end}}
|
|
|
|
{{define "song_rows"}}
|
|
<div class="table-responsive" data-playable-list>
|
|
<table class="vs-table vs-table-hover table mb-0">
|
|
<tbody>
|
|
{{range $i, $s := .}}
|
|
<tr class="vs-playable"
|
|
data-song-id="{{$s.ID}}"
|
|
data-title="{{$s.Title}}"
|
|
data-artist="{{$s.ArtistName}}"
|
|
data-artist-id="{{$s.ArtistID}}"
|
|
data-album="{{$s.AlbumTitle}}"
|
|
data-album-id="{{$s.AlbumID}}"
|
|
data-cover="{{$s.CoverArtID}}"
|
|
data-starred="{{if $s.Starred}}1{{else}}0{{end}}">
|
|
<td class="vs-track-num">{{if $s.TrackNumber}}{{$s.TrackNumber}}{{else}}{{add $i 1}}{{end}}</td>
|
|
<td class="vs-song-art-cell">
|
|
<img class="vs-song-art" src="{{if $s.CoverArtID}}/cover-art/{{$s.CoverArtID}}?size=80{{else}}/static/img/default-art.svg{{end}}" alt="" loading="lazy">
|
|
</td>
|
|
<td>
|
|
<div class="fw-semibold">{{$s.Title}}</div>
|
|
{{if $s.AlbumTitle}}<div class="text-secondary small">{{$s.ArtistName}} — {{$s.AlbumTitle}}</div>{{else}}<div class="text-secondary small">{{$s.ArtistName}}</div>{{end}}
|
|
</td>
|
|
<td class="text-end text-secondary small">
|
|
{{fmtDuration $s.DurationSeconds}}
|
|
{{if $s.IsAdmin}}<a href="/admin/songs/{{$s.ID}}/edit" title="Edit song" class="text-secondary ms-2"><i class="bi bi-pencil"></i></a>{{end}}
|
|
</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{{end}}
|