From ac4f02f5977e49509e25853e42667a9311d752fc Mon Sep 17 00:00:00 2001 From: voidarc Date: Sun, 5 Jul 2026 13:15:08 +0100 Subject: [PATCH] lots of styling changes and some random fixes --- src/routes/+page.svelte | 5 +- src/routes/event/[eventId]/+page.svelte | 159 ++++++++---------- src/routes/layout.css | 152 +++++++++++++++-- src/routes/ledger/+page.svelte | 71 ++++---- src/routes/login/+page.svelte | 104 +++--------- src/routes/register/+page.svelte | 102 +++-------- src/routes/settings/+page.svelte | 22 +-- .../stats/player/[playerId]/+page.svelte | 71 +++----- 8 files changed, 340 insertions(+), 346 deletions(-) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index dddbdae..1afc18f 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,5 +1,6 @@ {#await eventDataPromise} -
loading
+
loading
{:then eventData} {@const event = eventData[0]} - {console.log(event)} -
-
-
- {event.name} - {event.division} - {#if event.state == 1}- ONGOING - {:else if event.state == 2}- FINISHED +
+
+
+ {event.name} + {event.division} + {#if event.state == 1} + ONGOING + {:else if event.state == 2} + FINISHED {/if}
- {#each event.registeredPlayers as bracket, bi} - {#if bi > 0} - - {/if} -
-
- {bracket.name} -
-
- {#each bracket.items as player} -
- -
- - {player.firstName} - {player.lastName} - -
- {#if player.placement !== 0} -
{ordinal(player.placement)}
-
- {#each player.playerScores as score} -
- Run {score.resultIndex + 1}: {score.result}{event.resultPresets[0].unit} -
- {/each} -
- {:else} -
- {/if} -
- {/each} -
- {/each} -
-
- {#if data.user} -
- Score This Event -
- {/if} -{/await} - +
+ {#each event.registeredPlayers as bracket, bi} + {#if bi > 0} + + {/if} +
+
+ {bracket.name} +
+
+ {#each bracket.items as player} +
+ +
+ + {player.firstName} + {player.lastName} + +
+ {#if player.placement !== 0} +
{ordinal(player.placement)}
+
+ {#each player.playerScores as score} +
+ Run {score.resultIndex + 1}: {score.result}{event.resultPresets[0].unit} +
+ {/each} +
+ {:else} +
+ {/if} +
+ {/each} +
+ {/each} +
+
+ + {#if data.user} +
+ Score This Event +
+ {/if} +
+{/await} \ No newline at end of file diff --git a/src/routes/layout.css b/src/routes/layout.css index ef5f1f7..19b3639 100644 --- a/src/routes/layout.css +++ b/src/routes/layout.css @@ -17,6 +17,13 @@ flex-direction: column; } +.page-container { + max-width: 1000px; + margin: 0 auto; + width: 100%; + padding: 14px; +} + .page { display: flex; flex-direction: column; @@ -51,7 +58,7 @@ grid-template-columns: 1fr; grid-template-rows: 1fr; text-decoration: none; - transition: filter 0.15s ease; + transition: aspect-ratio 0.3s ease, border-width 0.3s ease, min-height 0.3s ease, filter 0.15s ease; } .score-box:hover { filter: brightness(1.15); @@ -65,10 +72,12 @@ aspect-ratio: 2 / 1; border-width: 3px; min-height: 80px; + transition: aspect-ratio 0.3s ease, border-width 0.3s ease, min-height 0.3s ease; } .runner { aspect-ratio: 4 / 1; min-height: 56px; + transition: aspect-ratio 0.3s ease, min-height 0.3s ease; } /* Ghost SVG fills cell, text sits at bottom */ @@ -90,40 +99,83 @@ z-index: 1; display: flex; align-items: center; - justify-content: space-between; padding: 0 14px; - gap: 8px; + min-width: 0; } .score-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; + overflow: hidden; } .score-rank { - font-size: 10px; - letter-spacing: 1.5px; + font-size: clamp(14px, 2.5vw, 17px); + letter-spacing: 1.2px; text-transform: uppercase; - opacity: 0.5; + opacity: 0.85; line-height: 1; - margin-bottom: 3px; + margin-bottom: 2px; + white-space: nowrap; + text-shadow: 0 0 6px rgb(0 0 0 / 50%); } .score-name { - font-size: clamp(11px, 3vw, 20px); + font-size: clamp(20px, 5.5vw, 40px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + max-width: 100%; } .score-pts { font-size: clamp(20px, 5.5vw, 40px); letter-spacing: 2px; - flex-shrink: 0; + position: absolute; + right: 14px; + top: 50%; + transform: translateY(-50%); + z-index: 2; + text-shadow: 0 0 8px rgb(0 0 0 / 80%), 0 0 4px rgb(0 0 0 / 60%); +} +.winner .score-meta { + flex-direction: column; + align-items: flex-start; +} +.winner .score-rank { + font-size: clamp(16px, 3vw, 20px); + opacity: 0.85; + margin-bottom: 3px; } .winner .score-name { - font-size: clamp(16px, 5vw, 32px); + font-size: clamp(34px, 9vw, 64px); + max-width: 70%; } .winner .score-pts { - font-size: clamp(26px, 7.5vw, 52px); + font-size: clamp(34px, 9vw, 64px); +} + +/* Smallest screens: one-line for runners, bigger text to fill height */ +@media (max-width: 479px) { + .score-meta { + flex-direction: row; + align-items: center; + gap: 10px; + } + .score-rank { + margin-bottom: 0; + } + .score-name { + font-size: clamp(18px, 5vw, 28px); + } + .score-pts { + font-size: clamp(22px, 6vw, 34px); + } + .winner .score-name { + font-size: clamp(26px, 7vw, 42px); + max-width: 60%; + } + .winner .score-pts { + font-size: clamp(28px, 8vw, 48px); + } } /* Responsive runners-up: 1 col <480px, 2 cols 480-699px, 4 cols ≥700px */ @@ -131,6 +183,7 @@ display: grid; gap: 10px; grid-template-columns: 1fr; + transition: gap 0.3s ease; } @media (min-width: 480px) { .runners-grid { @@ -256,17 +309,20 @@ .brackets { display: flex; flex-direction: column; + transition: gap 0.3s ease, align-items 0.3s ease; } .bracket-sep { height: 1px; background: color-mix(in srgb, currentColor 10%, transparent); margin: 0 10px; + transition: height 0.3s ease, width 0.3s ease, margin 0.3s ease; } .bracket-row { display: flex; gap: 6px; padding: 7px 9px; flex-wrap: wrap; + transition: gap 0.3s ease, padding 0.3s ease, min-width 0.3s ease, flex 0.3s ease; } /* Player boxes */ @@ -283,6 +339,7 @@ display: flex; flex-direction: column; min-height: 52px; + transition: max-width 0.3s ease, flex 0.3s ease, min-height 0.3s ease; } /* Mobile: single column layout */ @@ -384,3 +441,76 @@ .player-placement-gap { height: 50px; } + +/* Shared card pattern for auth, settings, etc. */ +.card { + border-radius: 12px; + border: 1px solid color-mix(in srgb, currentColor 18%, transparent); + padding: 1.5rem; + display: flex; + flex-direction: column; + gap: 1rem; +} +.card h1 { + font-size: 1.25rem; + font-weight: 700; + margin: 0; +} +.card label { + display: flex; + flex-direction: column; + gap: 0.25rem; + font-size: 0.85rem; + opacity: 0.8; +} +.card input, +.card select { + padding: 0.5rem; + border: 1px solid color-mix(in srgb, currentColor 18%, transparent); + border-radius: 6px; + background: color-mix(in srgb, currentColor 6%, transparent); + color: inherit; + font-size: 0.9rem; +} +.card input:focus, +.card select:focus { + outline: none; + border-color: currentColor; +} +.card button { + padding: 0.5rem 1rem; + border: 1px solid color-mix(in srgb, currentColor 18%, transparent); + border-radius: 6px; + background: color-mix(in srgb, currentColor 10%, transparent); + color: inherit; + cursor: pointer; + font-size: 0.9rem; + transition: filter 0.15s ease; +} +.card button:hover { + filter: brightness(1.15); +} +.card button:disabled { + opacity: 0.4; + cursor: default; +} +.card .error { + color: var(--ctp-mocha-red, #f38ba8); + font-size: 0.85rem; + margin: 0; +} +.card .switch { + font-size: 0.85rem; + text-align: center; + opacity: 0.7; +} +.card .switch a { + color: inherit; +} +.card .switch a:hover { + text-decoration: underline; +} +.card small { + opacity: 0.6; + font-size: 0.8rem; +} diff --git a/src/routes/ledger/+page.svelte b/src/routes/ledger/+page.svelte index 7ddcbf6..da053d0 100644 --- a/src/routes/ledger/+page.svelte +++ b/src/routes/ledger/+page.svelte @@ -67,36 +67,45 @@ }); -
-

Manual Ledger Entry

-
-
- - -
- {#each teamNames as team} +
+

Manual Ledger Entry

+
+
- - { inputPoints[team] = (e.target as HTMLInputElement).value; }} - class="border rounded px-2 py-1 w-20" - /> + +
- {/each} + {#each teamNames as team} +
+ + { inputPoints[team] = (e.target as HTMLInputElement).value; }} + style="width: 5rem;" + /> +
+ {/each} + +
+
+ +
+ Ledger Entries + {entries.length} entries
@@ -121,14 +130,4 @@ {/snippet}
{formatTime(entry.timestamp)}
- -
- - {entries.length} entries shown -
-
+
\ No newline at end of file diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte index 65fec97..7122ba8 100644 --- a/src/routes/login/+page.svelte +++ b/src/routes/login/+page.svelte @@ -4,87 +4,39 @@ export let form: ActionData; -
- {#if data.user} -
-

Already logged in

-

You're signed in as {data.user.username}

- Go to home -
- -
-
- {:else} -

Log in

+
+
+ {#if data.user} +
+

Already logged in

+

You're signed in as {data.user.username}

+ Go to home +
+ +
+
+ {:else} +

Log in

-
- + + - + - {#if form?.message} -

{form.message}

- {/if} + {#if form?.message} +

{form.message}

+ {/if}
+ +

No account? Sign up

{/if} - -
- - +
\ No newline at end of file diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte index 7a02a20..5570165 100644 --- a/src/routes/register/+page.svelte +++ b/src/routes/register/+page.svelte @@ -4,85 +4,33 @@ export let form: ActionData; -
-

Sign up

+
+
+

Sign up

- {#if data.disabled} -

Registration is currently disabled by an administrator.

- {:else} -
- + {#if data.disabled} +

Registration is currently disabled by an administrator.

+ {:else} + + - + - {#if form?.message} -

{form.message}

- {/if} + {#if form?.message} +

{form.message}

+ {/if} - -
+ + -

Already have an account? Log in

- {/if} -
- - +

Already have an account? Log in

+ {/if} +
+
\ No newline at end of file diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte index 08ab2ed..c74d2de 100644 --- a/src/routes/settings/+page.svelte +++ b/src/routes/settings/+page.svelte @@ -5,21 +5,21 @@ let { data }: { data: PageData } = $props(); -
-

Settings

+
+

Settings

-
+

Disable Registration

Prevents new users from signing up via /register

@@ -27,20 +27,20 @@
-
+

Require Login for Leaderboard

Non-logged-in users will be redirected to /login

-
+
\ No newline at end of file diff --git a/src/routes/stats/player/[playerId]/+page.svelte b/src/routes/stats/player/[playerId]/+page.svelte index f0e32c3..e6ff680 100644 --- a/src/routes/stats/player/[playerId]/+page.svelte +++ b/src/routes/stats/player/[playerId]/+page.svelte @@ -23,53 +23,32 @@ {#await data.playerInfo} -
Loading...
+
Loading...
{:then playerInfo} - {console.log(playerInfo)} -
-
- -
- {playerInfo.firstName} - {playerInfo.lastName} +
+
+
+ +
+ {playerInfo.firstName} + {playerInfo.lastName} +
-{/await} - - +{/await} \ No newline at end of file