Add navigation
This commit is contained in:
parent
94f4db2c68
commit
b21e00e471
3 changed files with 70 additions and 2 deletions
13
public/images/deckbuilder/navarrow.svg
Normal file
13
public/images/deckbuilder/navarrow.svg
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 50 82" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||||
|
<g id="Artboard1" transform="matrix(1,0,0,1,0,15.7771)">
|
||||||
|
<rect x="0" y="-15.777" width="50" height="81.873" style="fill:none;"/>
|
||||||
|
<g transform="matrix(0.457009,0,0,1.2614,2.95268,-32.3672)">
|
||||||
|
<path d="M48.243,45.605L90.773,73.875L48.243,73.875L5.712,45.605L48.243,17.336L90.773,17.336L48.243,45.605L48.243,45.605Z" style="fill:url(#_Linear1);"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(137.101,65.9713,-182.089,49.6719,-34.1545,12.0871)"><stop offset="0" style="stop-color:rgb(235,235,235);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(163,163,163);stop-opacity:1"/></linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.2 KiB |
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<section class="cardpicker" :style="grid">
|
<section class="cardpicker" :style="grid">
|
||||||
<article class="ccgcard" v-for="(card, i) in cards" :key="i">
|
<article class="ccgcard" v-for="(card, i) in cards" :key="i + card.ID">
|
||||||
<img :src="imageURL(card.ID)" />
|
<img :src="imageURL(card.ID)" />
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -27,7 +27,13 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="cards">
|
<section class="cards">
|
||||||
|
<div @click="prevPage" :class="canGoPrev ? 'prev' : 'prev unavailable'">
|
||||||
|
<img src="/images/deckbuilder/navarrow.svg" />
|
||||||
|
</div>
|
||||||
<CardPicker :columns="columns" :rows="rows" :cards="currentPage" />
|
<CardPicker :columns="columns" :rows="rows" :cards="currentPage" />
|
||||||
|
<div @click="nextPage" :class="canGoNext ? 'next' : 'next unavailable'">
|
||||||
|
<img src="/images/deckbuilder/navarrow.svg" />
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
<section class="decklist">
|
<section class="decklist">
|
||||||
|
@ -63,6 +69,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cards {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 5% 1fr 5%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.decklist {
|
.decklist {
|
||||||
grid-column: 2;
|
grid-column: 2;
|
||||||
|
@ -92,6 +103,24 @@
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.prev,
|
||||||
|
.next {
|
||||||
|
opacity: 0.5;
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
&.unavailable {
|
||||||
|
opacity: 0.1;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.next img {
|
||||||
|
transform: scaleX(-1);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
@ -275,6 +304,7 @@ export default class DeckBuilder extends Vue {
|
||||||
}
|
}
|
||||||
const filtered = await getCards(filters);
|
const filtered = await getCards(filters);
|
||||||
this.filtered = filtered.sort(sortByColor);
|
this.filtered = filtered.sort(sortByColor);
|
||||||
|
this.offset = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
private get itemsPerPage() {
|
private get itemsPerPage() {
|
||||||
|
@ -282,7 +312,7 @@ export default class DeckBuilder extends Vue {
|
||||||
}
|
}
|
||||||
|
|
||||||
private get currentPage() {
|
private get currentPage() {
|
||||||
return this.filtered.slice(this.offset, this.itemsPerPage);
|
return this.filtered.slice(this.offset, this.offset + this.itemsPerPage);
|
||||||
}
|
}
|
||||||
|
|
||||||
private elementIconURL(element: string): string {
|
private elementIconURL(element: string): string {
|
||||||
|
@ -328,5 +358,30 @@ export default class DeckBuilder extends Vue {
|
||||||
private nameChanged() {
|
private nameChanged() {
|
||||||
this.applyFilters();
|
this.applyFilters();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private get canGoPrev(): boolean {
|
||||||
|
return this.offset > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
private get canGoNext(): boolean {
|
||||||
|
return this.offset + this.itemsPerPage < this.filtered.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
private prevPage() {
|
||||||
|
if (!this.canGoPrev) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.offset = Math.max(0, this.offset - this.itemsPerPage);
|
||||||
|
}
|
||||||
|
|
||||||
|
private nextPage() {
|
||||||
|
if (!this.canGoNext) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.offset = Math.min(
|
||||||
|
this.filtered.length - this.itemsPerPage,
|
||||||
|
this.offset + this.itemsPerPage
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in a new issue