From e6e9d5b16d31b70402291755e45de68950963e3d Mon Sep 17 00:00:00 2001
From: rramiachraf <51409801+rramiachraf@users.noreply.github.com>
Date: Sun, 9 Jun 2024 21:29:17 +0100
Subject: [PATCH] refactor: improve styling a bit

---
 static/script.js     | 10 ++++----
 style/artist.css     | 61 +++++++++++++++++++++++++++++++++++++-------
 style/layout.css     | 14 +++++++---
 style/main.css       |  4 +++
 utils/description.go |  9 +++++++
 views/album.templ    |  6 ++---
 views/artist.templ   | 40 ++++++++++++++++++++++-------
 views/lyrics.templ   |  6 ++---
 8 files changed, 118 insertions(+), 32 deletions(-)
 create mode 100644 utils/description.go

diff --git a/static/script.js b/static/script.js
index 2109349..1336945 100644
--- a/static/script.js
+++ b/static/script.js
@@ -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
diff --git a/style/artist.css b/style/artist.css
index 2144fd0..9cbec55 100644
--- a/style/artist.css
+++ b/style/artist.css
@@ -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;
 }
diff --git a/style/layout.css b/style/layout.css
index 3fef342..ec126f9 100644
--- a/style/layout.css
+++ b/style/layout.css
@@ -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;
 }
diff --git a/style/main.css b/style/main.css
index 1f15feb..5b94c27 100644
--- a/style/main.css
+++ b/style/main.css
@@ -57,6 +57,10 @@ a {
 	text-decoration: none;
 }
 
+a:hover {
+	text-decoration: underline;
+}
+
 body.dark {
 	background-color: #181d31;
 }
diff --git a/utils/description.go b/utils/description.go
new file mode 100644
index 0000000..4de94dd
--- /dev/null
+++ b/utils/description.go
@@ -0,0 +1,9 @@
+package utils
+
+func TrimText(text string, keep int) string {
+	if len(text) > keep {
+		return text[0:keep] + "..."
+	}
+
+	return text
+}
diff --git a/views/album.templ b/views/album.templ
index 32e002c..bbb68ba 100644
--- a/views/album.templ
+++ b/views/album.templ
@@ -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>
diff --git a/views/artist.templ b/views/artist.templ
index 80903de..7796427 100644
--- a/views/artist.templ
+++ b/views/artist.templ
@@ -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>
diff --git a/views/lyrics.templ b/views/lyrics.templ
index 9eecfb4..5b2fcdb 100644
--- a/views/lyrics.templ
+++ b/views/lyrics.templ
@@ -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>
 				}