#47 make ui mobilre friendly

api/src/middleware/logger.go

@@ -25,6 +25,6 @@ func Logging(next http.Handler) http.Handler {
 			StatusCode:     http.StatusOK,
 		}
 		next.ServeHTTP(wrapped, r)
-		log.Println(wrapped.StatusCode, r.Method, r.URL.Path, time.Since(start))
+		log.Println(r.RemoteAddr, wrapped.StatusCode, r.Method, r.URL.Path, time.Since(start))
 	})
 }

view/src/routes/+layout.svelte

@@ -40,15 +40,19 @@
 	};
 </script>
 
-<div class="h-lvh flex flex-col">
+<svelte:head>
-	<div class="flex justify-end items-center min-h-10 gap-10 py-1 px-10 border-b border-accent">
+	<title>ME-FIT</title>
+</svelte:head>
+
+<div class="h-screen flex flex-col">
+	<div class="flex justify-end items-center gap-2 py-1 px-2 md:gap-10 md:px-10 md:py-2 shadow">
 		<a href="/" class="flex-1">ME-FIT</a>
 		{#if user}
-			<p>{user?.email}</p>
+			<p class="hidden md:block">{user?.email}</p>
-			<button class="btn" on:click={async () => signOut()}>Sign Out</button>
+			<button class="btn btn-sm" on:click={async () => signOut()}>Sign Out</button>
 		{:else}
-			<a href="/signup" class="btn">Sign Up</a>
+			<a href="/signup" class="btn btn-sm">Sign Up</a>
-			<a href="/signin" class="btn">Sign In</a>
+			<a href="/signin" class="btn btn-sm">Sign In</a>
 		{/if}
 	</div>
 
@@ -56,8 +60,8 @@
 		<slot></slot>
 	</div>
 
-	<!-- This is needed so all class names are inside the bundle -->
+	<!-- This is needed so all class names are inside the bundle The class names are used dynamically, so -->
-	<!-- The class names are used dynamically, so tailwind can't know -->
+	<!-- tailwind can't know -->
 	<div class="hidden">
 		<div class="alert-info text-info-content"></div>
 		<div class="alert-success text-success-content"></div>

view/src/routes/+layout.ts

@@ -1,2 +1,4 @@
+// This is needed for adapter-static
 export const prerender = true;
+// This is needed for nginx to work
 export const trailingSlash = 'always';

view/src/routes/+page.svelte

@@ -1,4 +1,12 @@
-<div class="flex flex-col gap-24 justify-center items-center h-full">
+<div class="hero bg-base-200 h-full">
-	<h1 class="text-9xl text-primary-content">Welcome to ME-FIT</h1>
+	<div class="hero-content text-center">
-	<a href="/app" class="p-5 text-4xl btn btn-primary box-content"> Getting Started </a>
+		<div class="max-w-md">
+			<h1 class="text-5xl font-bold">Next Level Workout Tracker</h1>
+			<p class="py-6">
+				Ever wanted to track your workouts and see your progress over time? ME-FIT is the perfect
+				solution for you.
+			</p>
+			<a href="/app" class="btn btn-primary">Get Started</a>
+		</div>
+	</div>
 </div>

view/src/routes/app/+page.svelte

@@ -55,6 +55,10 @@
 
 			if (response.ok) {
 				workouts = await response.json();
+				workouts = workouts.map((workout: any) => {
+					workout.date = new Date(workout.date).toLocaleDateString();
+					return workout;
+				});
 			} else {
 				addToast('Failed to fetch workouts: ' + (await response.text()), 'error');
 			}
@@ -102,53 +106,55 @@
 	});
 </script>
 
-<form
+<main class="mx-2">
-	class="max-w-xl mx-auto flex flex-col gap-4 justify-center mt-36"
+	<form
-	on:submit|preventDefault={handleSubmit}
+		class="max-w-xl mx-auto flex flex-col gap-4 justify-center mt-10"
->
+		on:submit|preventDefault={handleSubmit}
-	<h2 class="text-4xl mb-16">Track your workout</h2>
+	>
-	<input id="date" type="date" class="input input-bordered" value={new Date()} name="date" />
+		<h2 class="text-4xl mb-8">Track your workout</h2>
+		<input id="date" type="date" class="input input-bordered" value={new Date()} name="date" />
 
-	<select class="select select-bordered w-full" name="type">
+		<select class="select select-bordered w-full" name="type">
-		<option>Push Ups</option>
+			<option>Push Ups</option>
-		<option>Pull Ups</option>
+			<option>Pull Ups</option>
-	</select>
+		</select>
 
-	<input type="number" class="input input-bordered" placeholder="Sets" name="sets" />
+		<input type="number" class="input input-bordered" placeholder="Sets" name="sets" />
-	<input type="number" class="input input-bordered" placeholder="Reps" name="reps" />
+		<input type="number" class="input input-bordered" placeholder="Reps" name="reps" />
 
-	<button class="btn btn-primary self-end">Save</button>
+		<button class="btn btn-primary self-end">Save</button>
-</form>
+	</form>
 
-<div class="overflow-x-auto mx-auto max-w-screen-lg">
+	<div class="overflow-x-auto mx-auto max-w-screen-lg">
-	<h2 class="text-4xl mt-60">Workout history</h2>
+		<h2 class="text-4xl mt-14 mb-8">Workout history</h2>
-	<table class="table">
+		<table class="table table-auto max-w-full">
-		<thead>
+			<thead>
-			<tr>
-				<th>Date</th>
-				<th>Type</th>
-				<th>Sets</th>
-				<th>Reps</th>
-				<th></th>
-			</tr>
-		</thead>
-
-		<tbody>
-			{#each workouts as workout}
 				<tr>
-					<th>{workout.date}</th>
+					<th>Date</th>
-					<th>{workout.type}</th>
+					<th>Type</th>
-					<th>{workout.sets}</th>
+					<th>Sets</th>
-					<th>{workout.reps}</th>
+					<th>Reps</th>
-					<th>
+					<th></th>
-						<div class="tooltip" data-tip="Delete Entry">
-							<button on:click={deleteWorkout(workout.id)}>
-								<MdiDelete class="text-gray-400 text-lg"></MdiDelete>
-							</button>
-						</div>
-					</th>
 				</tr>
-			{/each}
+			</thead>
-		</tbody>
+
-	</table>
+			<tbody>
-</div>
+				{#each workouts as workout}
+					<tr>
+						<th>{workout.date}</th>
+						<th>{workout.type}</th>
+						<th>{workout.sets}</th>
+						<th>{workout.reps}</th>
+						<th>
+							<div class="tooltip" data-tip="Delete Entry">
+								<button on:click={() => deleteWorkout(workout.id)}>
+									<MdiDelete class="text-gray-400 text-lg"></MdiDelete>
+								</button>
+							</div>
+						</th>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
+</main>

view/src/routes/signin/+page.svelte

@@ -23,7 +23,7 @@
 </script>
 
 <form
-	class="max-w-xl mx-auto flex flex-col gap-4 h-full justify-center"
+	class="max-w-xl px-2 mx-auto flex flex-col gap-4 h-full justify-center"
 	on:submit|preventDefault={signIn}
 >
 	<h2 class="text-6xl mb-10">Sign In</h2>
@@ -59,9 +59,8 @@
 		<input type="password" class="grow" placeholder="Password" name="password" />
 	</label>
 
-	<div class="flex justify-end items-center gap-5">
+	<div class="flex justify-end items-center gap-2">
-		<p class="text-gray-500">Don't have an account?</p>
+		<a href="/signup" class="link text-gray-500 text-sm">Don't have an account? Sign Up</a>
-		<a href="/signup" class="link gray-500">Sign Up</a>
 		<button class="btn btn-primary self-end">Sign In</button>
 	</div>
 </form>

view/src/routes/signup/+page.svelte

@@ -24,7 +24,7 @@
 </script>
 
 <form
-	class="max-w-xl mx-auto flex flex-col gap-4 h-full justify-center"
+	class="px-2 max-w-xl mx-auto flex flex-col gap-4 h-full justify-center"
 	on:submit|preventDefault={signUp}
 >
 	<h2 class="text-6xl mb-10">Sign Up</h2>
@@ -60,9 +60,8 @@
 		<input type="password" class="grow" placeholder="Password" name="password" />
 	</label>
 
-	<div class="flex justify-end items-center gap-5">
+	<div class="flex justify-end items-center gap-2">
-		<p class="text-gray-500">Already have an account?</p>
+		<a href="/signin" class="link text-gray-500 text-sm">Already have an account? Sign In</a>
-		<a href="/signin" class="link gray-500">Sign In</a>
 		<button class="btn btn-primary self-end">Sign Up</button>
 	</div>
 </form>