From b18043ec8b2a889964c907071acc161715f16429 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 4 Jan 2024 23:47:57 -0800
Subject: fix(badges): grid spacing

---
 src/routes/user/[user]/badges/+page.svelte | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index aab81fbd..936ff54e 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -7,6 +7,7 @@
 	import { onMount } from 'svelte';
 	import HeadTitle from '$lib/HeadTitle.svelte';
 	import { databaseTimeToDate, dateToDatabaseTime } from '$lib/Utility/time';
+	import Loading from '$lib/Loading.svelte';
 	// import { io } from 'socket.io-client';
 
 	export let data;
@@ -193,10 +194,12 @@
 <HeadTitle route={`${data.username}'s Badge Wall`} path={`/user/${data.username}`} />
 
 {#if loadError}
-	{loadError}
+	<div class="card">
+		{loadError}
+	</div>
 {:else}
 	{#await currentUserIdentity}
-		Loading user identity ... 60%
+		<Loading type="user identity" percent={60} />
 	{:then identity}
 		{@const isOwner = identity && identity.name === data.username}
 
@@ -290,11 +293,11 @@
 		{/if}
 
 		{#await badgesPromise}
-			Loading badges ... 40%
+			<Loading type="badges" percent={40} />
 		{:then badgesResponse}
 			{#if badgesResponse}
 				{#await badgesResponse.json()}
-					Loading badges ... 80%
+					<Loading type="badges" percent={80} />
 				{:then ungroupedBadges}
 					<div id="badges">
 						{#if ungroupedBadges === null}
@@ -346,13 +349,13 @@
 						{/if}
 					</div>
 				{:catch}
-					<p>Could not parse badges</p>
+					<div class="card">Could not parse badges</div>
 				{/await}
 			{:else}
-				Loading badges ... 20%
+				<Loading type="badges" percent={20} />
 			{/if}
 		{:catch}
-			<p>Could not fetch badges</p>
+			<div class="card">Could not fetch badges</div>
 		{/await}
 	{/await}
 {/if}
@@ -373,7 +376,7 @@
 	.badges {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(8%, 1fr));
-		grid-gap: 0.25%;
+		gap: 0.25rem;
 	}
 
 	:global(.invert *) {
-- 
cgit v1.2.3