From 382ef64557345123ef452e24e0dd7e75ae247446 Mon Sep 17 00:00:00 2001 From: ForkBench <robinvandemerghel@protonmail.com> Date: Thu, 11 Jul 2024 00:36:26 +0200 Subject: [PATCH] Improving UI --- frontend/public/style.css | 16 +++++-- frontend/src/App.svelte | 6 ++- frontend/src/components/NavBar.svelte | 12 ----- frontend/src/components/Registrations.svelte | 47 ++++++++++++++++---- 4 files changed, 54 insertions(+), 27 deletions(-) diff --git a/frontend/public/style.css b/frontend/public/style.css index 7a1be50..32f18af 100644 --- a/frontend/public/style.css +++ b/frontend/public/style.css @@ -59,6 +59,18 @@ h1 { line-height: 1.1; } +button { + padding: 10px; + border: none; + border-radius: 5px; + background-color: #003566; + color: white; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} + @media (prefers-color-scheme: light) { :root { color: #213547; @@ -68,10 +80,6 @@ h1 { a:hover { color: #747bff; } - - button { - background-color: #f9f9f9; - } } .input-box .btn:hover { diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index 9e86756..3a15935 100644 --- a/frontend/src/App.svelte +++ b/frontend/src/App.svelte @@ -8,6 +8,8 @@ let competitions: Competition[] = []; + let competitionID = 0; + onMount(async () => { competitions = await Session.GetCompetitions(); }); @@ -15,10 +17,10 @@ <div class="container"> <NavBar /> - {#if competitions.length === 0} + {#if competitions.length <= competitionID} <p>Loading...</p> {:else} - <Registrations competition={competitions[0]} /> + <Registrations competition={competitions[competitionID]} /> {/if} </div> diff --git a/frontend/src/components/NavBar.svelte b/frontend/src/components/NavBar.svelte index 84c48c7..101e278 100644 --- a/frontend/src/components/NavBar.svelte +++ b/frontend/src/components/NavBar.svelte @@ -71,18 +71,6 @@ align-items: center; } - button { - padding: 10px; - border: none; - border-radius: 5px; - background-color: #003566; - color: white; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - } - .competition-el { min-width: 20vw; display: flex; diff --git a/frontend/src/components/Registrations.svelte b/frontend/src/components/Registrations.svelte index 6e53d03..6189e9e 100644 --- a/frontend/src/components/Registrations.svelte +++ b/frontend/src/components/Registrations.svelte @@ -70,7 +70,10 @@ ) || player.PlayerLastname.toLowerCase().includes( searchTerms.toLowerCase() - ) + ) || + player.PlayerClub?.club_name + .toLowerCase() + .includes(searchTerms.toLowerCase()) ); }); </script> @@ -191,7 +194,8 @@ }}>{player.PlayerLastname}</td > <td - >{#if player.PlayerClub}{player.PlayerClub}{/if}</td + >{#if player.PlayerClub}{player.PlayerClub}{:else}Sans + Nom{/if}</td > </tr> {/if} @@ -243,22 +247,47 @@ } table { - width: 90%; - border-collapse: collapse; + font-size: small; + width: 70%; + border-collapse: separate; + border-spacing: 0 20px; } th, td { - padding: 8px; + margin: 3px; + padding-left: 20px; text-align: left; + border-left: dashed rgba(119, 141, 169, 30%) 3px; } - td { - border-bottom: 1px solid #e9ecef; + tr { + border-radius: 20px; + } + + td:first-child, + th:first-child { + border-left: none; + border-top-left-radius: 20px; + border-bottom-left-radius: 20px; + } + + td:last-child, + th:last-child { + border-top-right-radius: 20px; + border-bottom-right-radius: 20px; + } + + tr:nth-child(even) { + background-color: #e9ecef; + } + + tr:nth-child(odd) { + background-color: #dee2e6; } - #add-player-tr td { - border: none; + tr:last-child { + background: none; } th { -- GitLab