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) {
|
private _picked(card: CardSlot) {
|
||||||
if (this.isAvailable(card)) {
|
if (this.isAvailable(card)) {
|
||||||
this.$emit("picked", card);
|
this.$emit("picked", card.data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue