From 4f24f79931cc9d90969ae3a12a911c211d9d1b31 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sat, 13 Jan 2024 01:22:04 -0800
Subject: feat(user): show banner

---
 src/routes/user/[user]/+page.svelte | 98 +++++++++++++++++++++++--------------
 1 file changed, 61 insertions(+), 37 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index c6423754..06b995e7 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -19,7 +19,7 @@
 
 <HeadTitle route={`${data.username}'s Profile`} path={`/user/${data.username}`} />
 
-<div class="card">
+<div class={userData ? 'card card-small' : 'card'} id="user-panel">
 	{#if userData === null}
 		Could not load user profile for <a
 			href={`https://anilist.co/user/${data.username}`}
@@ -32,56 +32,69 @@
 	{:else if userData === undefined}
 		Loading user ... 50%
 	{:else}
-		<div class="user-grid">
-			<a
-				href={`https://anilist.co/user/${userData.name}`}
-				target="_blank"
-				title={String(userData.id)}
-			>
-				<img src={userData.avatar.large} alt="" width="100vw" id="avatar" />
-			</a>
-
-			<div>
-				<p>
-					<a
-						href={`https://anilist.co/user/${userData.name}`}
-						target="_blank"
-						title={String(userData.id)}>@{userData.name}</a
-					>
-					<span class="click-item">•</span> <a href={`/user/${userData.name}/badges`}>Badge Wall</a>
-				</p>
-
-				{data.username} has watched {(userData.statistics.anime.minutesWatched / 60 / 24).toFixed(
-					1
-				)} days of anime and read
-				{estimatedDayReading(userData.statistics.manga.chaptersRead).toFixed(1)} days of manga.
-
-				<p />
-
-				{data.username} has collected {#await fetch(`/api/badges?id=${userData.id}`)}
-					...
-				{:then badges}
-					{#await badges.json()}
+		<div
+			class="card"
+			id="user-grid"
+			style={`background-image: ${userData ? `url(${userData.bannerImage})` : 'none'}; padding: 0;`}
+		>
+			{#if userData}
+				<img src={userData.bannerImage} alt="" id="cover-image" />
+			{/if}
+
+			<div class="card" id="user-grid-content">
+				<a
+					href={`https://anilist.co/user/${userData.name}`}
+					target="_blank"
+					title={String(userData.id)}
+				>
+					<img src={userData.avatar.large} alt="" width="100vw" id="avatar" />
+				</a>
+
+				<div id="user-grid-content-text">
+					<p>
+						<a
+							href={`https://anilist.co/user/${userData.name}`}
+							target="_blank"
+							title={String(userData.id)}>@{userData.name}</a
+						>
+						<span class="click-item">•</span>
+						<a href={`/user/${userData.name}/badges`}>Badge Wall</a>
+					</p>
+
+					{data.username} has watched {(userData.statistics.anime.minutesWatched / 60 / 24).toFixed(
+						1
+					)} days of anime and read
+					{estimatedDayReading(userData.statistics.manga.chaptersRead).toFixed(1)} days of manga.
+
+					<p />
+
+					{data.username} has collected {#await fetch(`/api/badges?id=${userData.id}`)}
 						...
 					{:then badges}
-						{badges.length}
+						{#await badges.json()}
+							...
+						{:then badges}
+							{badges.length}
+						{:catch}
+							?
+						{/await}
 					{:catch}
 						?
 					{/await}
-				{:catch}
-					?
-				{/await}
-				badges using Badge Wall.
+					badges using Badge Wall.
+				</div>
 			</div>
 		</div>
 	{/if}
 </div>
 
 <style>
-	.user-grid {
+	#user-grid-content {
 		display: flex;
 		flex-wrap: wrap;
 		column-gap: 1.5em;
+		background-color: rgba(0, 0, 0, 0.468);
+		color: #d8d8d8;
 	}
 
 	#avatar {
@@ -92,4 +105,15 @@
 	.click-item {
 		margin: 0 0.625rem;
 	}
+
+	#user-grid {
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+	}
+
+	#cover-image {
+		visibility: hidden;
+		height: 4.5em;
+	}
 </style>
-- 
cgit v1.2.3