refactor: improve styling a bit

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

style/artist.css

@@ -1,6 +1,33 @@
-artist-albumlist #artist-albumlist p {
+#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 {
@@ -23,3 +50,19 @@ artist-albumlist #artist-albumlist p {
 .dark #metadata p {
 	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;
+}

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

style/main.css

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

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

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>

views/artist.templ

@@ -2,26 +2,48 @@ 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-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="album-image" src={ data.ExtractImageURL(album.Image) } alt="Artist image" />
+									<img
+										id="artwork-preview"
+										src={ data.ExtractImageURL(album.Image) }
+										alt="Artist image"
+									/>
 									<p>{ album.Name }</p>
 								</a>
 							}
 						</div>
 					</div>
 				}
+			</div>
+		</div>
+	}
 }

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