diff --git a/frontend/public/style.css b/frontend/public/style.css index 7a1be5003ab67575006e8ca0c7545850cc6cc658..32f18af915cdd65d4c6bd3ad058fa28793445309 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 9e86756005e9cc312a3ac6fa48475a4c0d7d315b..3a159356f37d76fddd073d2d9e7f6a75eceecb65 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 84c48c7b01410aad98027c410b95366c8c4d510b..101e278c63f131015b0fb8a5c4c8448b8f39393b 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 6e53d03e3713e6658ef243d5a1b83551a7c62840..6189e9ec06b6fb399bfe9b042df4c133b0519ec1 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 {