diff options
author | Ilion Beyst <ilion.beyst@gmail.com> | 2022-08-15 20:46:13 +0200 |
---|---|---|
committer | Ilion Beyst <ilion.beyst@gmail.com> | 2022-08-15 20:46:13 +0200 |
commit | a1c7866f87872e83e7766f76eae443fd5af59fd7 (patch) | |
tree | 1492caafa3857a47899230c3811d9fe99b1ec809 /web/pw-server/src/routes/matches/index.svelte | |
parent | 4dcccb589d74fafd44ed37d266136adc7a352d82 (diff) | |
download | planetwars.dev-a1c7866f87872e83e7766f76eae443fd5af59fd7.tar.xz planetwars.dev-a1c7866f87872e83e7766f76eae443fd5af59fd7.zip |
styling of next/prev buttons
Diffstat (limited to 'web/pw-server/src/routes/matches/index.svelte')
-rw-r--r-- | web/pw-server/src/routes/matches/index.svelte | 51 |
1 files changed, 39 insertions, 12 deletions
diff --git a/web/pw-server/src/routes/matches/index.svelte b/web/pw-server/src/routes/matches/index.svelte index 393d513..8de375b 100644 --- a/web/pw-server/src/routes/matches/index.svelte +++ b/web/pw-server/src/routes/matches/index.svelte @@ -70,40 +70,67 @@ return `?${params}`; } - async function loadNewer() { + function olderMatchesLink(matches: object[]): string { if (matches.length == 0) { - return; + return null; } - const firstTimestamp = matches[0]["timestamp"]; - goto(pageLink({ after: firstTimestamp })); + const lastTimestamp = matches[matches.length - 1]["timestamp"]; + return pageLink({ before: lastTimestamp }); } - async function loadOlder() { + function newerMatchesLink(matches: object[]): string { if (matches.length == 0) { - return; + return null; } - const lastTimestamp = matches[matches.length - 1]["timestamp"]; - goto(pageLink({ before: lastTimestamp })); + const firstTimestamp = matches[0]["timestamp"]; + return pageLink({ after: firstTimestamp }); } </script> <div class="container"> <MatchList {matches} /> <div class="page-controls"> - <button on:click={loadNewer}>newer</button> - <button on:click={loadOlder}>older</button> + <div class="btn-group"> + <a class="btn btn-page-prev" href={newerMatchesLink(matches)}>newer</a> + <a class="btn btn-page-next" href={olderMatchesLink(matches)}>older</a> + </div> </div> </div> <style lang="scss"> + @import "src/styles/variables.scss"; .container { width: 800px; margin: 0 auto; } + .btn { + color: $btn-text-color; + font-size: 14px; + text-decoration: none; + padding: 6px 16px; + border: 1px solid $btn-border-color; + border-radius: 5px; + } + + .btn-group { + display: flex; + } + + .btn-group .btn:not(:last-child) { + border-right: none; + } + + .btn-group .btn:first-child { + border-radius: 5px 0 0 5px; + } + + .btn-group .btn:last-child { + border-radius: 0 5px 5px 0; + } .page-controls { display: flex; - justify-content: space-between; - margin: 12px; + justify-content: center; + margin: 24px 0; } </style> |