Prettier boxes
This commit is contained in:
parent
fb5db28180
commit
3c85c7985d
2 changed files with 24 additions and 2 deletions
|
@ -69,7 +69,7 @@ export default class CardPicker extends Vue {
|
|||
|
||||
private _picked(card: CardSlot) {
|
||||
if (this.isAvailable(card)) {
|
||||
this.$emit("picked", card);
|
||||
this.$emit("picked", card.data);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
v-for="(card, i) in cards"
|
||||
:key="i"
|
||||
>
|
||||
<img :src="imageURL(card.data.ID)" class="cardbg" />
|
||||
<div class="amt">{{ card.howmany }}</div>
|
||||
<div class="fullname">
|
||||
<div class="name">{{ card.data.Name }}</div>
|
||||
|
@ -32,7 +33,22 @@
|
|||
border: 1px solid $grey;
|
||||
border-radius: 10px;
|
||||
padding: 5px 3px;
|
||||
margin: 2px 0;
|
||||
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 {
|
||||
|
@ -43,6 +59,8 @@
|
|||
.amt {
|
||||
margin: 0 10pt;
|
||||
font-weight: bold;
|
||||
font-size: 13pt;
|
||||
padding-bottom: 5px;
|
||||
&:after {
|
||||
content: " x";
|
||||
font-weight: 300;
|
||||
|
@ -64,7 +82,7 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||
import { cardFullName, CardSlot, Card } from "@/mlpccg";
|
||||
import { cardFullName, CardSlot, Card, cardImageURL } from "@/mlpccg";
|
||||
|
||||
@Component({
|
||||
components: {}
|
||||
|
@ -80,5 +98,9 @@ export default class DeckList extends Vue {
|
|||
private _drop(slot: CardSlot) {
|
||||
this.$emit("removed", slot);
|
||||
}
|
||||
|
||||
private imageURL(id: string) {
|
||||
return cardImageURL(id);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
Loading…
Reference in a new issue