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

refactor: improve styling a bit

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
static/script.js
View File

@ -1,12 +1,12 @@
const fullAbout = document.querySelector("#about #full_about")
const summary = document.querySelector("#about #summary")
const description = document.querySelector("#description > #full")
const summary = document.querySelector("#description > #summary")
function showAbout() {
function showDescription() {
summary.classList.toggle("hidden")
fullAbout.classList.toggle("hidden")
description.classList.toggle("hidden")
}
fullAbout && [fullAbout, summary].forEach(item => item.onclick = showAbout)
description && [description, summary].forEach(item => item.onclick = showDescription)
window.addEventListener("load", () => {
const geniusURL = "https://genius.com" + document.location.pathname + document.location.search

61
style/artist.css
View File

@ -1,25 +1,68 @@
artist-albumlist #artist-albumlist p {
color: #181d31;
font-weight: 500;
#artist-albumlist {
color: #181d31;
font-weight: 500;
display: grid;
grid-template-columns: repeat(auto-fill, 150px);
gap: 1.5rem;
}
#artwork-preview {
width: 150px;
height: 150px;
border-radius: 5px;
border: 1px solid #ddd;
}
#artist-image {
border-radius: 50%;
border: 2px solid #ddd;
}
#artist-name {
text-align: center;
}
#artist-single-album {
color: #111;
display: flex;
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
.dark #artist-albumlist p {
color: #ddd;
color: #ddd;
}
#artist-albumlist small {
font-size: 1.5rem;
color: #333;
font-size: 1.5rem;
color: #333;
}
.dark #artist-albumlist small {
color: #ccc;
color: #ccc;
}
#metadata p {
color: #171717;
color: #171717;
}
.dark #metadata p {
color: #ddd;
color: #ddd;
}
#artist-section {
display: flex;
flex-direction: column;
gap: 1rem;
}
#artist-sections {
display: flex;
flex-direction: column;
gap: 2rem;
}
#artist-section h2 {
font-size: 2rem;
}

14
style/layout.css
View File

@ -5,15 +5,23 @@
}
#container {
display: grid;
padding: 5rem 0;
grid-template-columns: 24rem calc(1024px - 56rem) 24rem;
width: 1024px;
margin: 0 auto;
gap: 4rem;
display: grid;
flex: 1;
}
.trio-split {
grid-template-columns: 24rem calc(1024px - 56rem) 24rem;
gap: 4rem;
}
.duo-split {
grid-template-columns: 24rem 1fr;
gap: 4rem;
}
.main {
flex-grow: 1;
}

4
style/main.css
View File

@ -57,6 +57,10 @@ a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
body.dark {
background-color: #181d31;
}

9
utils/description.go Normal file
View File

@ -0,0 +1,9 @@
package utils
func TrimText(text string, keep int) string {
if len(text) > keep {
return text[0:keep] + "..."
}
return text
}

6
views/album.templ
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>

40
views/artist.templ
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>

6
views/lyrics.templ
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>
}