feat(user): show banner

2 files changed, 63 insertions, 38 deletions

diff --git a/src/lib/AniList/user.ts b/src/lib/AniList/user.ts
index acfb2913..c6b8189a 100644
--- a/src/lib/AniList/user.ts
+++ b/src/lib/AniList/user.ts
@@ -18,6 +18,7 @@ export interface User {
 	avatar: {
 		large: string;
 	};
+	bannerImage: string;
 }
 
 export interface FullUser {
@@ -54,7 +55,7 @@ export const user = async (username: string): Promise<User> =>
 				},
 				body: JSON.stringify({
 					query: `{ User(name: "${username}") {
-						name id avatar { large } statistics {
+						name id bannerImage avatar { large } statistics {
 							anime {
 								count meanScore minutesWatched episodesWatched
 							}
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>