aboutsummaryrefslogtreecommitdiff
path: root/web/pw-server
diff options
context:
space:
mode:
authorIlion Beyst <ilion.beyst@gmail.com>2022-08-20 19:55:21 +0200
committerIlion Beyst <ilion.beyst@gmail.com>2022-08-20 19:55:21 +0200
commit71d37e758fbc155a14f13989e7ed05e7719c2159 (patch)
tree2780090e1dd784d7a3bfe9e221d87b0df69ef436 /web/pw-server
parent329fc73b94852697f7a057957a714d961a2e9e3b (diff)
downloadplanetwars.dev-71d37e758fbc155a14f13989e7ed05e7719c2159.tar.xz
planetwars.dev-71d37e758fbc155a14f13989e7ed05e7719c2159.zip
implement LinkButton component
Diffstat (limited to 'web/pw-server')
-rw-r--r--web/pw-server/src/lib/components/LinkButton.svelte7
-rw-r--r--web/pw-server/src/routes/bots/[bot_name].svelte3
-rw-r--r--web/pw-server/src/routes/matches/index.svelte5
-rw-r--r--web/pw-server/src/styles/buttons.scss4
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;
}