Skip to content

Commit 0db9fb3

Browse files
jonaswesterlundjonaswesterlund
authored
Merge pull request #29 from spektrumrf/visual-overhaul
Complete vibecoded visual overhaul
2 parents d526a87 + f660cee commit 0db9fb3

31 files changed

+1187
-657
lines changed

‎package-lock.json‎

Lines changed: 0 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@
3939
"@tailwindcss/typography": "^0.5.19",
4040
"chart.js": "^4.5.1",
4141
"chartjs-adapter-dayjs-4": "^1.0.4",
42-
"daisyui": "^5.5.17",
4342
"date-fns": "^4.1.0",
4443
"dayjs": "^1.11.19",
4544
"dotenv": "^17.2.3",

‎src/app.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<!doctype html>
2-
<html lang="sv" data-theme="cupcake">
2+
<html lang="sv">
33
<head>
44
<meta charset="utf-8" />
55
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
66
<meta name="viewport" content="width=device-width" />
77
%sveltekit.head%
88
</head>
99

10-
<body>
11-
<div>%sveltekit.body%</div>
10+
<body class="min-h-screen bg-stone-50 font-sans text-stone-900 antialiased">
11+
<div class="flex min-h-screen flex-col">%sveltekit.body%</div>
1212
</body>
1313
</html>

‎src/lib/components/AddFeat.svelte‎

Lines changed: 70 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -11,69 +11,82 @@
1111
<div class="flex">
1212
<label
1313
for="addFeat"
14-
class="btn btn-primary border border-black text-xl mb-8 w-full max-w-sm mx-auto"
14+
class="mx-auto mb-8 btn-primary w-full max-w-sm cursor-pointer px-6 py-3 text-center text-lg shadow-md transition-all hover:shadow-lg sm:text-xl"
1515
>Ny prestation</label
1616
>
1717
</div>
18-
<input type="checkbox" id="addFeat" class="modal-toggle" />
19-
<div class="modal modal-bottom sm:modal-middle">
20-
<div class="modal-box flex">
21-
<div class="mx-auto">
22-
<h3 class="font-bold text-xl">Ny prestation</h3>
23-
<form
24-
on:submit={() => (loading = true)}
25-
method="POST"
26-
id="add-form"
27-
enctype="multipart/form-data"
28-
action={formActionPath}
29-
>
30-
<Input
31-
name="points"
32-
type="number"
33-
label="Poäng"
34-
required={true}
35-
min={0}
36-
max={15}
37-
step="0.01"
38-
altLabel="0-15, 0 om osäker"
39-
/>
4018

41-
<div class="form-control w-full max-w-xs">
42-
<label class="label" for="location">
43-
<span class="label-text">Plats</span>
44-
<span class="label-text-alt">Specialkrogar märkta med *</span>
45-
</label>
46-
<select name="location" required bind:value={locationId} class="select select-bordered">
47-
<option disabled selected value="">Välj plats</option>
48-
{#each $locations as location}
49-
<option value={location.id}>{location.name}</option>
50-
{/each}
51-
</select>
52-
</div>
19+
<!-- Add Feat Modal -->
20+
<input type="checkbox" id="addFeat" class="peer hidden" />
21+
<div
22+
class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center bg-stone-900/50 p-4 opacity-0 backdrop-blur-sm transition-opacity duration-200 peer-checked:pointer-events-auto peer-checked:opacity-100"
23+
>
24+
<label for="addFeat" class="absolute inset-0 cursor-default"></label>
25+
<div
26+
class="relative mx-auto max-h-[90vh] w-full max-w-lg scale-95 transform overflow-y-auto rounded-xl bg-white p-6 shadow-xl transition-transform duration-200 peer-checked:scale-100 sm:p-8"
27+
>
28+
<h3 class="mb-6 font-serif text-2xl font-bold text-brand-900">Ny prestation</h3>
29+
<form
30+
on:submit={() => (loading = true)}
31+
method="POST"
32+
id="add-form"
33+
enctype="multipart/form-data"
34+
action={formActionPath}
35+
class="space-y-5"
36+
>
37+
<Input
38+
name="points"
39+
type="number"
40+
label="Poäng"
41+
required={true}
42+
min={0}
43+
max={15}
44+
step="0.01"
45+
altLabel="0-15, 0 om osäker"
46+
/>
5347

54-
<div class="form-control w-full max-w-xs">
55-
<label class="label" for="proofs">
56-
<span class="label-text">Välj bildbevis</span>
57-
</label>
58-
<input
59-
type="file"
60-
name="proofs"
61-
required
62-
multiple
63-
class="file-input file-input-secondary file-input-sm file-input-bordered w-full max-w-xs"
64-
/>
48+
<div class="w-full">
49+
<div class="mb-1 flex items-end justify-between">
50+
<label class="block text-sm font-medium text-stone-700" for="location"> Plats </label>
51+
<span class="text-xs text-stone-500">Specialkrogar märkta med *</span>
6552
</div>
53+
<select name="location" required bind:value={locationId} class="input-field">
54+
<option disabled selected value="">Välj plats</option>
55+
{#each $locations as location}
56+
<option value={location.id}>{location.name}</option>
57+
{/each}
58+
</select>
59+
</div>
6660

67-
<Input name="teamComment" type="text" label="Kommentar" altLabel="" />
68-
<input hidden value={$event?.id} name="event" />
69-
<input hidden value={locationName} name="locationName" />
70-
<div class="flex gap-3 mt-3">
71-
<button class="btn btn-primary">
72-
<Loading {loading}>Spara</Loading>
73-
</button>
74-
<label for="addFeat" class="btn">Stäng</label>
75-
</div>
76-
</form>
77-
</div>
61+
<div class="w-full">
62+
<label class="mb-2 block text-sm font-medium text-stone-700" for="proofs">
63+
Välj bildbevis
64+
</label>
65+
<input
66+
type="file"
67+
name="proofs"
68+
id="proofs"
69+
required
70+
multiple
71+
class="block w-full rounded-md border
72+
border-stone-300 p-1 text-sm
73+
text-stone-500 transition-colors
74+
file:mr-4 file:rounded-md
75+
file:border-0 file:bg-brand-50
76+
file:px-4 file:py-2 file:text-sm file:font-semibold file:text-brand-700 hover:file:bg-brand-100"
77+
/>
78+
</div>
79+
80+
<Input name="teamComment" type="text" label="Kommentar" altLabel="" />
81+
<input hidden value={$event?.id} name="event" />
82+
<input hidden value={locationName} name="locationName" />
83+
84+
<div class="mt-6 flex gap-3 border-t border-stone-100 pt-6">
85+
<button class="btn-primary flex-1">
86+
<Loading {loading}>Spara</Loading>
87+
</button>
88+
<label for="addFeat" class="btn-secondary flex-1 cursor-pointer text-center">Stäng</label>
89+
</div>
90+
</form>
7891
</div>
7992
</div>

‎src/lib/components/AddLocation.svelte‎

Lines changed: 35 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,41 @@
55
let loading = false;
66
</script>
77

8-
<div class="">
9-
<label for="addLocation" class="btn btn-success my-5 max-w-xs">Ny plats</label>
8+
<div class="my-5">
9+
<label
10+
for="addLocation"
11+
class="btn-primary inline-block cursor-pointer bg-green-600 hover:bg-green-700">Ny plats</label
12+
>
1013
</div>
11-
<input type="checkbox" id="addLocation" class="modal-toggle" />
12-
<div class="modal modal-bottom sm:modal-middle">
13-
<div class="modal-box flex">
14-
<div class="mx-auto">
15-
<h3 class="font-bold text-2xl">Ny plats</h3>
16-
<form
17-
method="POST"
18-
enctype="multipart/form-data"
19-
action="?/addLocation"
20-
on:submit={() => (loading = true)}
21-
>
22-
<Input name="name" type="text" label="Platsens namn" />
23-
<input hidden name="event" value={$event?.id} />
24-
<div class="flex gap-3 my-3">
25-
<button class="btn btn-primary">
26-
<Loading {loading}>Spara</Loading>
27-
</button>
28-
<label for="addLocation" class="btn">Stäng</label>
29-
</div>
30-
</form>
31-
</div>
14+
15+
<!-- Add Location Modal -->
16+
<input type="checkbox" id="addLocation" class="peer hidden" />
17+
<div
18+
class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center bg-stone-900/50 opacity-0 backdrop-blur-sm transition-opacity duration-200 peer-checked:pointer-events-auto peer-checked:opacity-100"
19+
>
20+
<label for="addLocation" class="absolute inset-0 cursor-default"></label>
21+
<div
22+
class="relative mx-4 max-h-[90vh] w-full max-w-md scale-95 transform overflow-y-auto rounded-xl bg-white p-6 shadow-xl transition-transform duration-200 peer-checked:scale-100 sm:p-8"
23+
>
24+
<h3 class="mb-6 font-serif text-2xl font-bold text-brand-900">Ny plats</h3>
25+
<form
26+
method="POST"
27+
enctype="multipart/form-data"
28+
action="?/addLocation"
29+
on:submit={() => (loading = true)}
30+
class="space-y-4"
31+
>
32+
<Input name="name" type="text" label="Platsens namn" />
33+
<input hidden name="event" value={$event?.id} />
34+
35+
<div class="mt-6 flex gap-3 border-t border-stone-100 pt-4">
36+
<button class="btn-primary flex-1">
37+
<Loading {loading}>Spara</Loading>
38+
</button>
39+
<label for="addLocation" class="btn-secondary flex-1 cursor-pointer text-center"
40+
>Stäng</label
41+
>
42+
</div>
43+
</form>
3244
</div>
3345
</div>

‎src/lib/components/AddLocationToYear.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,11 @@
1111
enctype="multipart/form-data"
1212
action="?/addLocationToYear"
1313
on:submit={() => (loading = true)}
14+
class="my-5"
1415
>
1516
<input hidden name="locationId" value={selectedLocationToAddToYear?.id} />
1617
<input hidden name="eventId" value={$event?.id} />
17-
<button class="btn btn-primary my-5">
18+
<button class="btn-primary w-full sm:w-auto">
1819
<Loading {loading}>
1920
Koppla plats till år {$event?.year}
2021
</Loading>

‎src/lib/components/Countdown.svelte‎

Lines changed: 58 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -20,45 +20,77 @@
2020
minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
2121
seconds = Math.floor((distance % (1000 * 60)) / 1000);
2222
}
23+
24+
function padZero(num: number) {
25+
return num.toString().padStart(2, '0');
26+
}
2327
</script>
2428

25-
<div class="text-center text-lg alert bg-zinc-200 flex flex-col">
29+
<div
30+
class="flex flex-col items-center card border-brand-200 bg-brand-50 p-6 text-center shadow-md sm:p-8"
31+
>
2632
{#if distance >= 0 && !$event?.finished}
27-
<div class="font-bold text-2xl">Tid till Approbatur i Vasagatan</div>
28-
<div class="grid grid-flow-col text-center auto-cols-max justify-center">
29-
<div class="flex flex-col p-2 rounded-box text-primary">
30-
<span class="countdown font-mono text-3xl">
31-
<span style={`--value:${days};`}></span>
32-
</span>
33-
d
33+
<h2 class="mb-6 font-serif text-2xl font-bold text-brand-900 sm:text-3xl">
34+
Tid till Approbatur i Vasagatan
35+
</h2>
36+
37+
<div class="flex justify-center gap-4 sm:gap-6">
38+
<div class="flex flex-col items-center">
39+
<div
40+
class="min-w-[3rem] rounded-lg border border-brand-100 bg-white px-4 py-3 font-mono text-3xl font-bold text-brand-700 shadow-sm sm:min-w-[4rem] sm:text-4xl"
41+
>
42+
{padZero(days)}
43+
</div>
44+
<span class="mt-2 text-xs font-medium tracking-wider text-brand-600 uppercase sm:text-sm"
45+
>Dagar</span
46+
>
3447
</div>
35-
<div class="flex flex-col p-2 rounded-box text-primary">
36-
<span class="countdown font-mono text-3xl">
37-
<span style={`--value:${hours};`}></span>
38-
</span>
39-
h
48+
49+
<div class="flex flex-col items-center">
50+
<div
51+
class="min-w-[3rem] rounded-lg border border-brand-100 bg-white px-4 py-3 font-mono text-3xl font-bold text-brand-700 shadow-sm sm:min-w-[4rem] sm:text-4xl"
52+
>
53+
{padZero(hours)}
54+
</div>
55+
<span class="mt-2 text-xs font-medium tracking-wider text-brand-600 uppercase sm:text-sm"
56+
>Timmar</span
57+
>
4058
</div>
41-
<div class="flex flex-col p-2 rounded-box text-primary">
42-
<span class="countdown font-mono text-3xl">
43-
<span style={`--value:${minutes};`}></span>
44-
</span>
45-
min
59+
60+
<div class="flex flex-col items-center">
61+
<div
62+
class="min-w-[3rem] rounded-lg border border-brand-100 bg-white px-4 py-3 font-mono text-3xl font-bold text-brand-700 shadow-sm sm:min-w-[4rem] sm:text-4xl"
63+
>
64+
{padZero(minutes)}
65+
</div>
66+
<span class="mt-2 text-xs font-medium tracking-wider text-brand-600 uppercase sm:text-sm"
67+
>Min</span
68+
>
4669
</div>
47-
<div class="flex flex-col p-2 rounded-box text-primary">
48-
<span class="countdown font-mono text-3xl">
49-
<span style={`--value:${seconds};`}></span>
50-
</span>
51-
sec
70+
71+
<div class="flex flex-col items-center">
72+
<div
73+
class="min-w-[3rem] rounded-lg border border-brand-100 bg-white px-4 py-3 font-mono text-3xl font-bold text-brand-700 shadow-sm sm:min-w-[4rem] sm:text-4xl"
74+
>
75+
{padZero(seconds)}
76+
</div>
77+
<span class="mt-2 text-xs font-medium tracking-wider text-brand-600 uppercase sm:text-sm"
78+
>Sek</span
79+
>
5280
</div>
5381
</div>
5482
{:else if distance < 0 && !$event?.finished}
55-
<div class="font-bold text-2xl">Vasagatan {$event?.year} har börjat!</div>
83+
<h2 class="mb-6 font-serif text-2xl font-bold text-brand-900 sm:text-3xl">
84+
Vasagatan {$event?.year} har börjat!
85+
</h2>
5686
{#if $account?.role === Role.TEAM}
57-
<div class="w-full">
87+
<div class="mx-auto w-full max-w-md">
5888
<AddFeat formActionPath={`${$event?.year}/feats?/add`} />
5989
</div>
6090
{/if}
6191
{:else}
62-
<div class="font-bold text-2xl">Vasagatan {$event?.year} är avslutad!</div>
92+
<h2 class="font-serif text-2xl font-bold text-brand-900 sm:text-3xl">
93+
Vasagatan {$event?.year} är avslutad!
94+
</h2>
6395
{/if}
6496
</div>

‎src/lib/components/DrinkTable.svelte‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,15 @@
1818
];
1919
</script>
2020

21-
<div class="overfull-x-auto rounded-lg border-2 border-primary">
22-
<SvelteTable
23-
rows={drinks}
24-
{columns}
25-
classNameThead="bg-primary text-center"
26-
classNameCell="text-center text-base"
27-
classNameTable="table table-sm"
28-
/>
21+
<div class="overflow-hidden rounded-xl border border-stone-200 bg-white shadow-sm">
22+
<div class="overflow-x-auto">
23+
<SvelteTable
24+
rows={drinks}
25+
{columns}
26+
classNameTable="w-full text-center text-sm text-stone-700 border-collapse"
27+
classNameThead="text-xs text-stone-500 uppercase tracking-wider bg-stone-50 border-b border-stone-200 [&_th]:px-4 [&_th]:py-3"
28+
classNameRow="bg-white border-b border-stone-100 hover:bg-stone-50 transition-colors"
29+
classNameCell="px-4 py-3 sm:py-4 text-center font-medium"
30+
/>
31+
</div>
2932
</div>

0 commit comments

Comments
 (0)