aboutsummaryrefslogtreecommitdiff
path: root/web/pw-server
diff options
context:
space:
mode:
authorIlion Beyst <ilion.beyst@gmail.com>2022-08-15 20:46:13 +0200
committerIlion Beyst <ilion.beyst@gmail.com>2022-08-15 20:46:13 +0200
commita1c7866f87872e83e7766f76eae443fd5af59fd7 (patch)
tree1492caafa3857a47899230c3811d9fe99b1ec809 /web/pw-server
parent4dcccb589d74fafd44ed37d266136adc7a352d82 (diff)
downloadplanetwars.dev-a1c7866f87872e83e7766f76eae443fd5af59fd7.tar.xz
planetwars.dev-a1c7866f87872e83e7766f76eae443fd5af59fd7.zip
styling of next/prev buttons
Diffstat (limited to 'web/pw-server')
-rw-r--r--web/pw-server/src/lib/urls.ts0
-rw-r--r--web/pw-server/src/routes/bots/[bot_name].svelte7
-rw-r--r--web/pw-server/src/routes/bots/new.svelte1
-rw-r--r--web/pw-server/src/routes/matches/index.svelte51
-rw-r--r--web/pw-server/src/styles/variables.scss3
5 files changed, 46 insertions, 16 deletions
diff --git a/web/pw-server/src/lib/urls.ts b/web/pw-server/src/lib/urls.ts
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/web/pw-server/src/lib/urls.ts
diff --git a/web/pw-server/src/routes/bots/[bot_name].svelte b/web/pw-server/src/routes/bots/[bot_name].svelte
index 3532e38..cf8c42a 100644
--- a/web/pw-server/src/routes/bots/[bot_name].svelte
+++ b/web/pw-server/src/routes/bots/[bot_name].svelte
@@ -118,6 +118,7 @@
</div>
<style lang="scss">
+ @import "src/styles/variables.scss";
.container {
width: 800px;
max-width: 80%;
@@ -146,18 +147,16 @@
margin-bottom: $header-space-above-line;
}
- $borderColor: rgba(27, 31, 36, 0.25);
-
.btn-container {
padding: 24px;
text-align: center;
}
.btn-view-more {
- color: rgb(9, 105, 218);
+ color: $btn-text-color;
font-size: 14px;
text-decoration: none;
padding: 6px 16px;
- border: 1px solid $borderColor;
+ border: 1px solid $btn-border-color;
border-radius: 5px;
}
diff --git a/web/pw-server/src/routes/bots/new.svelte b/web/pw-server/src/routes/bots/new.svelte
index 7cb7229..c243fe1 100644
--- a/web/pw-server/src/routes/bots/new.svelte
+++ b/web/pw-server/src/routes/bots/new.svelte
@@ -16,6 +16,7 @@
async function createBot() {
saveErrors = [];
+ // TODO: how can we handle this with the new ApiClient?
let response = await fetch("/api/bots", {
method: "POST",
headers: {
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>
diff --git a/web/pw-server/src/styles/variables.scss b/web/pw-server/src/styles/variables.scss
index 257a67e..5ff08b6 100644
--- a/web/pw-server/src/styles/variables.scss
+++ b/web/pw-server/src/styles/variables.scss
@@ -1 +1,4 @@
$bg-color: rgb(41, 41, 41);
+
+$btn-text-color: rgb(9, 105, 218);
+$btn-border-color: rgba(27, 31, 36, 0.25);