diff options
-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; } |