feat(cbking): adjust navigation and update project date

Th1nkK1D · Jun 15, 2024 · a7af09a · a7af09a
1 parent d2b26f1
commit a7af09a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 26 deletions.
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -23,7 +23,7 @@
 				description="Explore the top-five 2023/24 European football league teams. How many wins, draws, or lose they get in each minute of the game?"
 				href="/comeback-king-or-a-flopper/"
 				image="/comeback-king-or-a-flopper/og.png"
-				date="10 Jun 2024"
+				date="15 Jun 2024"
 				lang="EN"
 			/>
 			<ProjectCard

diff --git a/src/routes/comeback-king-or-a-flopper/+page.svelte b/src/routes/comeback-king-or-a-flopper/+page.svelte
@@ -102,13 +102,16 @@
 		{#if league}
 			{@const { teams, timeScale } = league}
 			{@const team = teams[teamIndex]}
-			<section
-				class="flex-col items-center gap-2 md:flex-row md:items-end md:justify-between md:gap-4"
-			>
-				<div class="flex w-full flex-col items-center gap-4 overflow-x-clip md:items-start">
-					<div class="flex flex-row items-end gap-3 font-head">
+			<section class="flex flex-col gap-6 !pb-6 {tutorialStep === 0 ? 'invisible' : ''}">
+				<div
+					class="flex flex-col items-center gap-2 md:flex-row md:items-end md:justify-between md:gap-4"
+				>
+					<div class="flex w-full flex-col items-center gap-4 overflow-x-clip md:items-start">
 						<select
-							class="cursor-pointer border-b border-solid border-gray-300 bg-transparent pr-1 md:text-lg"
+							class="cursor-pointer border-b border-solid border-gray-300 bg-transparent pr-1 font-head md:text-lg {tutorialStep !==
+							null
+								? 'invisible'
+								: ''}"
 							bind:value={selectedLeague}
 							on:change={loadSelectedLeagueData}
 						>
@@ -118,21 +121,21 @@
 							<option value="premier-league">🏴󠁧󠁢󠁥󠁮󠁧󠁿 Premier League</option>
 							<option value="serie-a">🇮🇹 Seria A</option>
 						</select>
-						<p class="text-gray-400">2023/24</p>
+						<h2
+							class="bebas-neue w-full whitespace-nowrap text-center text-3xl md:text-left md:text-6xl"
+						>
+							{teamIndex + 1}. {team.name}
+						</h2>
 					</div>
-					<h2
-						class="bebas-neue w-full whitespace-nowrap text-center text-3xl md:text-left md:text-6xl"
-					>
-						{teamIndex + 1}. {team.name}
-					</h2>
+					<StatsCounter
+						class="flex-1"
+						{team}
+						{timeScale}
+						{activeTimeIndex}
+						isShowingStats={tutorialStep !== 0}
+					/>
 				</div>
-				<StatsCounter
-					class="flex-1"
-					{team}
-					{timeScale}
-					{activeTimeIndex}
-					isShowingStats={tutorialStep !== 0}
-				/>
+				<TeamNavigation bind:teamIndex {teams} class={tutorialStep !== null ? 'invisible' : ''} />
 			</section>
 			{#key league.teams[0].name}
 				<ScoreChart
@@ -144,9 +147,6 @@
 					bind:tutorialStep
 				/>
 			{/key}
-			<section class="flex-row">
-				<TeamNavigation bind:teamIndex {teams} />
-			</section>
 		{/if}
 	</div>
 

diff --git a/src/routes/comeback-king-or-a-flopper/_components/team-navigation.svelte b/src/routes/comeback-king-or-a-flopper/_components/team-navigation.svelte
@@ -5,7 +5,7 @@
 	export let teams: TeamStats[];
 </script>
 
-<div class="flex w-full flex-row">
+<div class="flex w-full flex-row {$$restProps.class}">
 	{#if teamIndex > 0}
 		<button on:click={() => teamIndex--}>
 			<svg viewBox="0 0 24 24">
@@ -27,10 +27,10 @@
 
 <style lang="postcss">
 	button {
-		@apply flex flex-row items-center text-gray-500 hover:text-gray-900;
+		@apply flex flex-row items-center gap-1 py-2 text-gray-600 hover:text-black;
 	}
 	svg {
-		@apply size-10;
+		@apply -m-2 size-8;
 	}
 	path {
 		@apply fill-current;