refactor: improve styling a bit

This commit is contained in:
rramiachraf
2024-06-09 21:29:17 +01:00
parent 840d23e931
commit e6e9d5b16d
8 changed files with 118 additions and 32 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>
}