ngn/dumb
1
0
Fork 0
Code Issues 1 Pull Requests 3 Actions Packages Activity

feat: improve lyrics page UI

Browse Source
This commit is contained in:
rramiachraf
2024-03-04 17:41:01 +01:00
parent e2d5ef044b
commit a5bc03959e
3 changed files with 51 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
views/lyrics.templ
View File

@ -9,10 +9,11 @@ templ LyricsPage(s data.Song) {
@layout(fmt.Sprintf("%s - %s lyrics", s.Artist, s.Title)) {
<div id="container">
<div id="metadata">
<a href={ templ.URL(s.LinkToAlbum) }><img id="album-artwork" src={ data.ExtractImageURL(s.Image) }/></a>
<h2>{ s.Artist }</h2>
<h1>{ s.Title }</h1>
<a href={ templ.URL(s.LinkToAlbum) }><h2>{ s.Album }</h2></a>
<img id="album-artwork" src={ data.ExtractImageURL(s.Image) }/>
<div id="metadata-info">
<h2>{ s.Artist }</h2>
<h1>{ s.Title }</h1>
</div>
</div>
<div id="lyrics">
@templ.Raw(s.Lyrics)
@ -32,6 +33,14 @@ templ LyricsPage(s data.Song) {
</details>
}
</div>
if s.Album.Name != "" {
<div id="lyrics-album-container">
<h1 id="title">{ s.Album.Name }</h1>
<a href={ templ.URL(s.Album.URL) }>
<img title={ "Album: " + s.Album.Name } id="album-artwork" src={ s.Album.Image }/>
</a>
</div>
}
</div>
</div>
}