Merge pull request #14 from florkbr/clean-up-styling

Styling tweaks and UI cleanup
florkbr · Oct 1, 2023 · 6e6cc5a · 6e6cc5a
2 parents f6e06e5 + f7aa4f2
commit 6e6cc5a
Show file tree

Hide file tree

Showing 14 changed files with 348 additions and 126 deletions.
diff --git a/src/components/AddProfile.svelte b/src/components/AddProfile.svelte
@@ -91,6 +91,7 @@
 </script>
 
 <form>
+	<h3>Add profile</h3>
 	<div class="row">
 		<label>
 			Name:
@@ -121,15 +122,41 @@
 			<input bind:value={country} /><br />
 		</label>
 	</div>
-	<div>
+	<div class="controls">
 		<button on:click={handleAdd}>Add</button>
+		<a href="/profile">Cancel</a>
 	</div>
+	<img src="/rocket.png" alt="spaceship" class="spaceship" />
 </form>
 
 <style>
 	form {
 		display: flex;
 		flex-direction: column;
 		gap: 10px;
+		width: max-content;
+		text-align: center;
+	}
+
+	form .row {
+		align-self: flex-end;
+	}
+
+	form .controls {
+		margin-top: 15px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	form .controls *:nth-child(n + 2) {
+		margin-left: 10px;
+	}
+
+	.spaceship {
+		width: 200px;
+		height: 400px;
+		align-self: center;
+		margin-top: 25px;
 	}
 </style>
diff --git a/src/components/ProfileView.svelte b/src/components/ProfileView.svelte
@@ -58,6 +58,11 @@
 </table>
 
 <style>
+	table {
+		background-color: white;
+		box-shadow: 0 6px 10px rgb(0 0 0 / 0.5);
+		padding: 10px;
+	}
 	.profile {
 		width: 500px;
 		align-self: center;

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -27,7 +27,6 @@
 		display: flex;
 		flex-direction: column;
 		padding: 1rem;
-		width: 100%;
 		max-width: 64rem;
 		margin: 0 auto;
 		box-sizing: border-box;

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -6,23 +6,17 @@
 
 <svelte:head>
 	<title>Home</title>
-	<meta name="description" content="Svelte demo app" />
+	<meta name="description" content="Astro Team Builder" />
 </svelte:head>
 
 <section>
+	<h1>Astro Team Builder</h1>
 	<picture>
 		<img class="astro" src={astro101} alt="Astro101" />
 	</picture>
-	<h1>
-		<span class="welcome">
-			<picture>
-				<source srcset={welcome} type="image/webp" />
-				<img src={welcome_fallback} alt="Welcome" />
-			</picture>
-		</span>
-
-		to your new<br />SvelteKit astrology chart!
-	</h1>
+	<h5>
+		<i>Building teams with Astrology since 2023!</i>
+	</h5>
 </section>
 
 <style>
@@ -34,27 +28,6 @@
 		flex: 0.6;
 	}
 
-	h1 {
-		width: 100%;
-		display: none;
-	}
-
-	.welcome {
-		display: block;
-		position: relative;
-		width: 100%;
-		height: 0;
-		padding: 0 0 calc(100% * 495 / 2048) 0;
-	}
-
-	.welcome img {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 0;
-		display: block;
-	}
-
 	.astro {
 		max-width: 100%;
 		height: auto;

diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
@@ -19,18 +19,15 @@
 			<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
 				<a href="/">Home</a>
 			</li>
-			<li aria-current={$page.url.pathname === '/profile' ? 'page' : undefined}>
-				<a href="/profile">Profile</a>
+			<li aria-current={/\/profile\/?.*$/.test($page.url.pathname) ? 'page' : undefined}>
+				<a href="/profile">Profiles</a>
 			</li>
-			<li aria-current={$page.url.pathname === '/teams' ? 'teams' : undefined}>
+			<li aria-current={/\/teams\/?.*$/.test($page.url.pathname) ? 'page' : undefined}>
 				<a href="/teams">Team building</a>
 			</li>
 			<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
 				<a href="/about">About</a>
 			</li>
-			<li aria-current={$page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>
-				<a href="/sverdle">Sverdle</a>
-			</li>
 		</ul>
 		<svg viewBox="0 0 2 3" aria-hidden="true">
 			<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />

diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
@@ -25,10 +25,21 @@
 	});
 </script>
 
+<svelte:head>
+	<title>Profiles</title>
+	<meta name="description" content="Astro Team Builder" />
+</svelte:head>
+<h3>Get started by creating profiles for yourself and your teammates!</h3>
 <a href="/profile/add">Add profile</a>
 <a href="/profile/import">Import profiles</a>
 <a href="/profile/export">Export profiles</a>
+<h4>Loaded Profiles</h4>
+<span>View a profile by clicking the name.</span>
+<span>Delete a profile by clicking the trashcan next to the name.</span>
 <ul>
+	{#if $profiles.length < 1}
+		<i>Such empty... Vast nothing... Wow...</i>
+	{/if}
 	{#each $profiles as profile}
 		<li>
 			<a href="/profile/view/{profile.name}">{profile.name}</a>
@@ -46,4 +57,33 @@
 </ul>
 
 <style>
+	* {
+		align-self: center;
+	}
+	h3 {
+		text-align: center;
+	}
+	h4 {
+		padding-top: 10px;
+	}
+	ul {
+		position: relative;
+		padding: 0;
+		background: white;
+		min-width: 250px;
+		min-height: 250px;
+		box-shadow: 0 6px 10px rgb(0 0 0 / 0.5);
+		list-style-type: none;
+	}
+	ul i {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	ul li {
+		display: flex;
+		padding: 10px;
+	}
 </style>
diff --git a/src/routes/profile/add/+page.svelte b/src/routes/profile/add/+page.svelte
@@ -4,6 +4,11 @@
 	import { profiles } from '../../../stores';
 </script>
 
+<svelte:head>
+	<title>Add Profile</title>
+	<meta name="description" content="Astro Team Builder" />
+</svelte:head>
+
 <AddProfile
 	on:profile={(event) => {
 		const profile = event.detail;

diff --git a/src/routes/profile/export/+page.svelte b/src/routes/profile/export/+page.svelte
@@ -5,21 +5,45 @@
 	let textArea;
 </script>
 
-<a href="/profile">Back to profile</a>
+<svelte:head>
+	<title>Export Profiles</title>
+	<meta name="description" content="Astro Team Builder" />
+</svelte:head>
+
 <div>
-	<span>Export all your information - just pass this data so others can import it.</span>
-	<button on:click={() => textArea.select()}>Select all</button>
+	<h3>Export profiles</h3>
+	<span>Export all currently loaded profiles - share with others so they can import it!</span>
 	<textarea bind:this={textArea} rows="20" bind:value={serialized_profiles} />
+	<div class="controls">
+		<button on:click={() => textArea.select()}>Select all</button>
+		<a href="/profile">Back to profiles</a>
+	</div>
 </div>
 
 <style>
 	div {
 		display: flex;
 		flex-direction: column;
 		gap: 10px;
+		align-items: center;
+		text-align: center;
+	}
+
+	textarea {
+		box-shadow: 0 6px 10px rgb(0 0 0 / 0.5);
+		min-width: 400px;
+		min-height: 250px;
 	}
 
 	button {
 		align-self: flex-start;
 	}
+
+	.controls {
+		margin-top: 15px;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+	}
 </style>
diff --git a/src/routes/profile/import/+page.svelte b/src/routes/profile/import/+page.svelte
@@ -13,24 +13,49 @@
 	};
 </script>
 
-<a href="/profile">Back to profile</a>
+<svelte:head>
+	<title>Import Profiles</title>
+	<meta name="description" content="Astro Team Builder" />
+</svelte:head>
+
 <div>
+	<h3>Import profiles</h3>
 	<span
-		>Import the data - it will add to existing profiles bu will overwrite any existing profile</span
+		>Importing data will add to the loaded profiles but will overwrite any existing profile with the
+		same name</span
 	>
-	<span>Could corrupt your data!</span>
-	<textarea rows="20" bind:value={importedRawData} />
-	<button on:click={handleImport}>Import!</button>
+	<span><i>Be warned - importing incorrect profiles can corrupt your data!</i></span>
+	<textarea rows="20" bind:value={importedRawData} placeholder="Enter some JSON..." />
+	<div class="controls">
+		<button on:click={handleImport}>Import</button>
+		<a href="/profile">Back to profiles</a>
+	</div>
 </div>
 
 <style>
 	div {
 		display: flex;
 		flex-direction: column;
 		gap: 10px;
+		align-items: center;
+		text-align: center;
+	}
+
+	textarea {
+		box-shadow: 0 6px 10px rgb(0 0 0 / 0.5);
+		min-width: 400px;
+		min-height: 250px;
 	}
 
 	button {
 		align-self: flex-start;
 	}
+
+	.controls {
+		margin-top: 15px;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+	}
 </style>
diff --git a/src/routes/profile/view/[name]/+page.svelte b/src/routes/profile/view/[name]/+page.svelte
@@ -12,8 +12,31 @@
 	}
 </script>
 
+<svelte:head>
+	<title>Your Profile</title>
+	<meta name="description" content="Astro Team Builder" />
+</svelte:head>
+
 {#if profile}
-	<a href="/profile">Back to list</a>
-	<a href="/profile/view/{profile.name}/chart">View my chart</a>
-	<ProfileView {profile} />
+	<div>
+		<ProfileView {profile} />
+		<div class="controls">
+			<a href="/profile/view/{profile.name}/chart">View my chart</a>
+			<a href="/profile">Back to profiles</a>
+		</div>
+	</div>
 {/if}
+
+<style>
+	.controls {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		margin-top: 15px;
+	}
+
+	.controls *:nth-child(n) {
+		margin-top: 10px;
+	}
+</style>
diff --git a/src/routes/profile/view/[name]/chart/+page.svelte b/src/routes/profile/view/[name]/chart/+page.svelte
@@ -103,11 +103,14 @@
 </svelte:head>
 
 {#if profile}
-	<a href="/profile/view/{profile.name}">Back to my profile</a>
+	<h1>{profile.name}</h1>
 {/if}
 <section>
 	<div id="chart" class="chart" class:hidden={!planets} />
 </section>
+{#if profile}
+	<a href="/profile/view/{profile.name}">Back to my profile</a>
+{/if}
 
 <style>
 	section {
@@ -127,4 +130,15 @@
 	.chart.hidden {
 		display: none;
 	}
+
+	a {
+		align-self: center;
+		margin-top: 10px;
+	}
+	@media only screen and (max-width: 750px) {
+		.chart {
+			width: 400px;
+			height: 400px;
+		}
+	}
 </style>