refactor: improve styling a bit
This commit is contained in:
@ -7,7 +7,7 @@ import (
|
||||
|
||||
templ AlbumPage(a data.Album) {
|
||||
@layout(fmt.Sprintf("%s - %s", a.Artist, a.Name)) {
|
||||
<div id="container">
|
||||
<div id="container" class="trio-split">
|
||||
<div id="metadata">
|
||||
<img id="album-artwork" src={ data.ExtractImageURL(a.Image) } alt="Album image"/>
|
||||
<div id="metadata-info">
|
||||
@ -25,9 +25,9 @@ templ AlbumPage(a data.Album) {
|
||||
</div>
|
||||
if a.About[0] != "" {
|
||||
<div id="info">
|
||||
<div id="about">
|
||||
<div id="description" dir="auto">
|
||||
<h1 id="title">About</h1>
|
||||
<p class="hidden" id="full_about">{ a.About[0] }</p>
|
||||
<p class="hidden" id="full">{ a.About[0] }</p>
|
||||
<p id="summary">{ a.About[1] }</p>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -2,24 +2,46 @@ package views
|
||||
|
||||
import (
|
||||
"github.com/rramiachraf/dumb/data"
|
||||
"github.com/rramiachraf/dumb/utils"
|
||||
)
|
||||
|
||||
templ ArtistPage(a data.Artist) {
|
||||
@layout(a.Name) {
|
||||
<div id="container">
|
||||
<div id="container" class="duo-split">
|
||||
<div id="metadata">
|
||||
<img id="artist-image" src={ data.ExtractImageURL(a.Image) } alt="Artist image"/>
|
||||
<div id="metadata-info">
|
||||
<h1>{ a.Name }</h1>
|
||||
<p>@templ.Raw(a.Description)</p>
|
||||
<h1 id="artist-name">{ a.Name }</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div id="artist-albumlist">
|
||||
for _, album := range a.Albums {
|
||||
<a href={ templ.URL(album.URL) } id="artist-single-album">
|
||||
<img id="album-image" src={ data.ExtractImageURL(album.Image) } alt="Artist image" />
|
||||
<p>{ album.Name }</p>
|
||||
</a>
|
||||
<div id="artist-sections">
|
||||
if a.Description != "" {
|
||||
<div id="artist-section">
|
||||
<h2>About { a.Name }</h2>
|
||||
<div id="description">
|
||||
<p id="summary">
|
||||
{ utils.TrimText(a.Description, 500) }
|
||||
</p>
|
||||
<p id="full" class="hidden">{ a.Description }</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
if len(a.Albums) > 0 {
|
||||
<div id="artist-section">
|
||||
<h2>Albums</h2>
|
||||
<div id="artist-albumlist">
|
||||
for _, album := range a.Albums {
|
||||
<a href={ templ.URL(album.URL) } id="artist-single-album">
|
||||
<img
|
||||
id="artwork-preview"
|
||||
src={ data.ExtractImageURL(album.Image) }
|
||||
alt="Artist image"
|
||||
/>
|
||||
<p>{ album.Name }</p>
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -7,7 +7,7 @@ import (
|
||||
|
||||
templ LyricsPage(s data.Song) {
|
||||
@layout(fmt.Sprintf("%s - %s lyrics", s.Artist, s.Title)) {
|
||||
<div id="container">
|
||||
<div id="container" class="trio-split">
|
||||
<div id="metadata">
|
||||
<img
|
||||
id="album-artwork"
|
||||
@ -24,9 +24,9 @@ templ LyricsPage(s data.Song) {
|
||||
</div>
|
||||
<div id="info">
|
||||
if s.About[0] != "?" {
|
||||
<div id="about">
|
||||
<div id="description" dir="auto">
|
||||
<h1 id="title">About</h1>
|
||||
<p class="hidden" id="full_about">{ s.About[0] }</p>
|
||||
<p class="hidden" id="full">{ s.About[0] }</p>
|
||||
<p id="summary">{ s.About[1] }</p>
|
||||
</div>
|
||||
}
|
||||
|
Reference in New Issue
Block a user