Prettier boxes
Some checks failed
continuous-integration/drone/pr Build is failing
continuous-integration/drone/push Build is passing

This commit is contained in:
Hamcha 2019-09-11 20:59:35 +02:00
parent fb5db28180
commit 3c85c7985d
Signed by: hamcha
GPG key ID: 41467804B19A3315
2 changed files with 24 additions and 2 deletions

View file

@ -69,7 +69,7 @@ export default class CardPicker extends Vue {
private _picked(card: CardSlot) { private _picked(card: CardSlot) {
if (this.isAvailable(card)) { if (this.isAvailable(card)) {
this.$emit("picked", card); this.$emit("picked", card.data);
} }
} }

View file

@ -6,6 +6,7 @@
v-for="(card, i) in cards" v-for="(card, i) in cards"
:key="i" :key="i"
> >
<img :src="imageURL(card.data.ID)" class="cardbg" />
<div class="amt">{{ card.howmany }}</div> <div class="amt">{{ card.howmany }}</div>
<div class="fullname"> <div class="fullname">
<div class="name">{{ card.data.Name }}</div> <div class="name">{{ card.data.Name }}</div>
@ -32,7 +33,22 @@
border: 1px solid $grey; border: 1px solid $grey;
border-radius: 10px; border-radius: 10px;
padding: 5px 3px; padding: 5px 3px;
margin: 2px 0;
cursor: pointer; cursor: pointer;
position: relative;
overflow: hidden;
div {
z-index: 2;
}
}
.cardbg {
position: absolute;
margin-top: 30%;
max-width: 330px;
left: -20px;
filter: brightness(20%);
z-index: 1;
} }
.fullname { .fullname {
@ -43,6 +59,8 @@
.amt { .amt {
margin: 0 10pt; margin: 0 10pt;
font-weight: bold; font-weight: bold;
font-size: 13pt;
padding-bottom: 5px;
&:after { &:after {
content: " x"; content: " x";
font-weight: 300; font-weight: 300;
@ -64,7 +82,7 @@
<script lang="ts"> <script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator"; import { Component, Vue, Prop } from "vue-property-decorator";
import { cardFullName, CardSlot, Card } from "@/mlpccg"; import { cardFullName, CardSlot, Card, cardImageURL } from "@/mlpccg";
@Component({ @Component({
components: {} components: {}
@ -80,5 +98,9 @@ export default class DeckList extends Vue {
private _drop(slot: CardSlot) { private _drop(slot: CardSlot) {
this.$emit("removed", slot); this.$emit("removed", slot);
} }
private imageURL(id: string) {
return cardImageURL(id);
}
} }
</script> </script>