change stat lists to look a bit better

4 files changed, 33 insertions, 13 deletions

diff --git a/src/lib/sections/Leaderboards.svelte b/src/lib/sections/Leaderboards.svelte
index 7df6292..72537cc 100644
--- a/src/lib/sections/Leaderboards.svelte
+++ b/src/lib/sections/Leaderboards.svelte
@@ -14,7 +14,7 @@
 		{#each leaderboards as leaderboard}
 			<li class="leaderboard-item">
 				<a href="/leaderboard/{leaderboard.name}" class="leaderboard-item-anchor">
-					{leaderboard.positionIndex}) <b>{cleanId(leaderboard.name)}</b>: {leaderboard.value}
+					{leaderboard.positionIndex}) <b>{cleanId(leaderboard.name)}</b>: {leaderboard.value.toLocaleString()}
 				</a>
 			</li>
 		{/each}
@@ -28,4 +28,8 @@
 	.leaderboard-item {
 		list-style-type: none;
 	}
+	ul {
+		padding-left: 0;
+		margin-top: 0.5em;
+	}
 </style>
diff --git a/src/lib/sections/Slayers.svelte b/src/lib/sections/Slayers.svelte
index 19b9298..40fa67d 100644
--- a/src/lib/sections/Slayers.svelte
+++ b/src/lib/sections/Slayers.svelte
@@ -6,7 +6,7 @@
 </script>
 
 {#if data.member.slayers}
-	<div class="slayer-info-text">
+	<div class="slayer-info-text total-slayer-info-text">
 		<p>Xp: <b>{data.member.slayers.xp}</b></p>
 		<p>Kills: <b>{data.member.slayers.kills}</b></p>
 	</div>
@@ -42,6 +42,10 @@
 		margin: 0;
 	}
 
+	.total-slayer-info-text {
+		margin: 0.5em 0;
+	}
+
 	.slayer-tier-kills {
 		text-align: center;
 	}
diff --git a/src/lib/sections/StatList.svelte b/src/lib/sections/StatList.svelte
index 901d853..38604d7 100644
--- a/src/lib/sections/StatList.svelte
+++ b/src/lib/sections/StatList.svelte
@@ -13,30 +13,36 @@
 <ul>
 	{#each stats.sort((a, b) => b.value - a.value) as stat}
 		<li class:total-stat={stat.categorizedName === 'total'}>
-			<span class="stat-name">{cleanId(stat.categorizedName)}</span>:
-			{#if stat.unit === 'time'}
-				{millisecondsToTime(stat.value)}
-			{:else}
-				{stat.value.toLocaleString()}
-			{/if}
+			<span class="stat-name">{cleanId(stat.categorizedName)}:</span>
+			<span class="stat-value">
+				{#if stat.unit === 'time'}
+					{millisecondsToTime(stat.value)}
+				{:else}
+					{stat.value.toLocaleString()}
+				{/if}
+			</span>
 		</li>
 	{/each}
 </ul>
 
 <style>
 	.total-stat .stat-name {
+		color: var(--theme-darker-text);
+	}
+	.total-stat .stat-value {
 		font-weight: bold;
 	}
 
 	.total-stat {
-		font-size: 1.2em;
 		list-style-type: none;
-		position: relative;
+		padding: 0 0 0.5em 0;
 		right: 1em;
-		bottom: 0.2em;
 	}
-
+	li {
+		position: relative;
+	}
 	ul {
 		margin-top: 0.5em;
+		padding-left: 1em;
 	}
 </style>
diff --git a/src/lib/sections/Zones.svelte b/src/lib/sections/Zones.svelte
index 1ea3f0d..ef96456 100644
--- a/src/lib/sections/Zones.svelte
+++ b/src/lib/sections/Zones.svelte
@@ -9,8 +9,9 @@
 
 {#if data.member.zones}
 	<p class="zones-visited-text">
+		Zones visited:
 		<span class="zones-visited-number">
-			<b>{zonesVisitedCount}</b>/{data.member.zones.length} zones visited
+			<b>{zonesVisitedCount}</b>/{data.member.zones.length}
 		</span>
 	</p>
 	<ul>
@@ -26,6 +27,7 @@
 <style>
 	.zones-visited-text {
 		color: var(--theme-darker-text);
+		margin: 0.5em 0;
 	}
 	.zones-visited-number {
 		color: var(--theme-main-text);
@@ -33,4 +35,8 @@
 	.unvisited-zone {
 		opacity: 0.5;
 	}
+	ul {
+		padding-left: 1em;
+		margin: 0;
+	}
 </style>