diff options
| author | Ilion Beyst <ilion.beyst@gmail.com> | 2022-08-20 19:55:21 +0200 |
|---|---|---|
| committer | Ilion Beyst <ilion.beyst@gmail.com> | 2022-08-20 19:55:21 +0200 |
| commit | 71d37e758fbc155a14f13989e7ed05e7719c2159 (patch) | |
| tree | 2780090e1dd784d7a3bfe9e221d87b0df69ef436 /web/pw-server/src | |
| parent | 329fc73b94852697f7a057957a714d961a2e9e3b (diff) | |
| download | planetwars.dev-71d37e758fbc155a14f13989e7ed05e7719c2159.tar.xz planetwars.dev-71d37e758fbc155a14f13989e7ed05e7719c2159.zip | |
implement LinkButton component
Diffstat (limited to 'web/pw-server/src')
| -rw-r--r-- | web/pw-server/src/lib/components/LinkButton.svelte | 7 | ||||
| -rw-r--r-- | web/pw-server/src/routes/bots/[bot_name].svelte | 3 | ||||
| -rw-r--r-- | web/pw-server/src/routes/matches/index.svelte | 5 | ||||
| -rw-r--r-- | web/pw-server/src/styles/buttons.scss | 4 |
4 files changed, 16 insertions, 3 deletions
diff --git a/web/pw-server/src/lib/components/LinkButton.svelte b/web/pw-server/src/lib/components/LinkButton.svelte new file mode 100644 index 0000000..0d0e7d6 --- /dev/null +++ b/web/pw-server/src/lib/components/LinkButton.svelte @@ -0,0 +1,7 @@ +<script lang="ts"> + export let href: string | null; + + $: isDisabled = !href; +</script> + +<a class="btn" class:btn-disabled={isDisabled} {href}><slot /></a> diff --git a/web/pw-server/src/routes/bots/[bot_name].svelte b/web/pw-server/src/routes/bots/[bot_name].svelte index 471e530..5fe4cc7 100644 --- a/web/pw-server/src/routes/bots/[bot_name].svelte +++ b/web/pw-server/src/routes/bots/[bot_name].svelte @@ -35,6 +35,7 @@ import dayjs from "dayjs"; import { currentUser } from "$lib/stores/current_user"; import MatchList from "$lib/components/matches/MatchList.svelte"; + import LinkButton from "$lib/components/LinkButton.svelte"; export let bot: object; export let owner: object; @@ -97,7 +98,7 @@ <MatchList {matches} /> {#if matches.length > 0} <div class="btn-container"> - <a class="btn" href={`/matches?bot=${bot["name"]}`}>All matches</a> + <LinkButton href={`/matches?bot=${bot["name"]}`}>All matches</LinkButton> </div> {/if} </div> diff --git a/web/pw-server/src/routes/matches/index.svelte b/web/pw-server/src/routes/matches/index.svelte index a2e352c..8c106fa 100644 --- a/web/pw-server/src/routes/matches/index.svelte +++ b/web/pw-server/src/routes/matches/index.svelte @@ -49,6 +49,7 @@ </script> <script lang="ts"> + import LinkButton from "$lib/components/LinkButton.svelte"; import MatchList from "$lib/components/matches/MatchList.svelte"; export let matches: object[]; @@ -100,8 +101,8 @@ <MatchList {matches} /> <div class="page-controls"> <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> + <LinkButton href={newerMatchesLink(matches)}>Newer</LinkButton> + <LinkButton href={olderMatchesLink(matches)}>Older</LinkButton> </div> </div> </div> diff --git a/web/pw-server/src/styles/buttons.scss b/web/pw-server/src/styles/buttons.scss index 2aa7535..b485014 100644 --- a/web/pw-server/src/styles/buttons.scss +++ b/web/pw-server/src/styles/buttons.scss @@ -10,6 +10,10 @@ $btn-border-color: rgba(27, 31, 36, 0.25); border-radius: 5px; } +.btn.btn-disabled { + color: $btn-border-color; +} + .btn-group { display: flex; } |