x/web-app-template
Archived
Template
2
0
Fork 0
Code Issues 13 Pull Requests 4 Actions Packages Activity

#47 make ui mobilre friendly
All checks were successful
Build Docker Image / Explore-Gitea-Actions (push) Successful in 1m20s
Details

Browse Source
This commit is contained in:
Tim
2024-07-31 10:54:19 +02:00
parent a7d79a3537
commit ad2f1479a4
7 changed files with 82 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
api/src/middleware/logger.go
View File

@@ -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))
})
}

20
view/src/routes/+layout.svelte
View File

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

2
view/src/routes/+layout.ts
View File

@@ -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';

14
view/src/routes/+page.svelte
View File

@@ -1,4 +1,12 @@
<div class="flex flex-col gap-24 justify-center items-center h-full">
<h1 class="text-9xl text-primary-content">Welcome to ME-FIT</h1>
<a href="/app" class="p-5 text-4xl btn btn-primary box-content"> Getting Started </a>
<div class="hero bg-base-200 h-full">
<div class="hero-content text-center">
<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>

16
view/src/routes/app/+page.svelte
View File

@@ -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,11 +106,12 @@
});
</script>
<main class="mx-2">
<form
class="max-w-xl mx-auto flex flex-col gap-4 justify-center mt-36"
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>
<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">
@@ -121,8 +126,8 @@
</form>
<div class="overflow-x-auto mx-auto max-w-screen-lg">
<h2 class="text-4xl mt-60">Workout history</h2>
<table class="table">
<h2 class="text-4xl mt-14 mb-8">Workout history</h2>
<table class="table table-auto max-w-full">
<thead>
<tr>
<th>Date</th>
@@ -142,7 +147,7 @@
<th>{workout.reps}</th>
<th>
<div class="tooltip" data-tip="Delete Entry">
<button on:click={deleteWorkout(workout.id)}>
<button on:click={() => deleteWorkout(workout.id)}>
<MdiDelete class="text-gray-400 text-lg"></MdiDelete>
</button>
</div>
@@ -152,3 +157,4 @@
</tbody>
</table>
</div>
</main>

7
view/src/routes/signin/+page.svelte
View File

@@ -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">
<p class="text-gray-500">Don't have an account?</p>
<a href="/signup" class="link gray-500">Sign Up</a>
<div class="flex justify-end items-center gap-2">
<a href="/signup" class="link text-gray-500 text-sm">Don't have an account? Sign Up</a>
<button class="btn btn-primary self-end">Sign In</button>
</div>
</form>

7
view/src/routes/signup/+page.svelte
View File

@@ -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">
<p class="text-gray-500">Already have an account?</p>
<a href="/signin" class="link gray-500">Sign In</a>
<div class="flex justify-end items-center gap-2">
<a href="/signin" class="link text-gray-500 text-sm">Already have an account? Sign In</a>
<button class="btn btn-primary self-end">Sign Up</button>
</div>
</form>