Move subname to its own row to make space
This commit is contained in:
parent
b9e0d096ba
commit
10396b24f1
2 changed files with 35 additions and 6 deletions
|
@ -2,12 +2,19 @@
|
||||||
<section class="decklist">
|
<section class="decklist">
|
||||||
<article v-for="(card, i) in cards" :key="i">
|
<article v-for="(card, i) in cards" :key="i">
|
||||||
<div class="amt">{{ card.howmany }}</div>
|
<div class="amt">{{ card.howmany }}</div>
|
||||||
<div class="name">{{ fullName(card.data) }}</div>
|
<div class="fullname">
|
||||||
|
<div class="name">{{ card.data.Name }}</div>
|
||||||
|
<div class="subname">
|
||||||
|
{{ card.data.Subname ? card.data.Subname : "" }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@import "@/assets/scss/_variables";
|
||||||
|
|
||||||
.decklist {
|
.decklist {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -15,17 +22,38 @@
|
||||||
article {
|
article {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-content: space-between;
|
align-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid $grey;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 5px 3px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fullname {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
.amt {
|
.amt {
|
||||||
margin: 0 5px;
|
margin: 0 10pt;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
&:after {
|
&:after {
|
||||||
content: "x";
|
content: " x";
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-family: $fantasy;
|
||||||
|
font-size: 10.5pt;
|
||||||
|
line-height: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subname {
|
||||||
|
color: $grey-light;
|
||||||
|
font-size: 10pt;
|
||||||
|
line-height: 1rem;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|
|
@ -101,9 +101,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.decklist {
|
.decklist {
|
||||||
|
padding: 10px;
|
||||||
|
padding-top: 15px;
|
||||||
|
grid-column: 2;
|
||||||
header {
|
header {
|
||||||
padding: 10px;
|
padding-left: 1rem;
|
||||||
padding-top: 15px;
|
|
||||||
color: $primary-text;
|
color: $primary-text;
|
||||||
font-family: $fantasy;
|
font-family: $fantasy;
|
||||||
h1 {
|
h1 {
|
||||||
|
@ -111,7 +113,6 @@
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
grid-column: 2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.colorfilter,
|
.colorfilter,
|
||||||
|
|
Loading…
Reference in a new issue