styling of next/prev buttons
This commit is contained in:
parent
4dcccb589d
commit
a1c7866f87
5 changed files with 49 additions and 19 deletions
0
web/pw-server/src/lib/urls.ts
Normal file
0
web/pw-server/src/lib/urls.ts
Normal file
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -70,40 +70,67 @@
|
|||
return `?${params}`;
|
||||
}
|
||||
|
||||
async function loadNewer() {
|
||||
function olderMatchesLink(matches: object[]): string {
|
||||
if (matches.length == 0) {
|
||||
return;
|
||||
}
|
||||
const firstTimestamp = matches[0]["timestamp"];
|
||||
goto(pageLink({ after: firstTimestamp }));
|
||||
}
|
||||
|
||||
async function loadOlder() {
|
||||
if (matches.length == 0) {
|
||||
return;
|
||||
return null;
|
||||
}
|
||||
const lastTimestamp = matches[matches.length - 1]["timestamp"];
|
||||
goto(pageLink({ before: lastTimestamp }));
|
||||
return pageLink({ before: lastTimestamp });
|
||||
}
|
||||
|
||||
function newerMatchesLink(matches: object[]): string {
|
||||
if (matches.length == 0) {
|
||||
return null;
|
||||
}
|
||||
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>
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue