julien/vaquant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(Account Tag List): Add a float left to better manage a category

Browse Source
This commit is contained in:
Julien Calixte
2019-10-13 22:00:24 +02:00
parent f605ef9fe5
commit 8ec7bd0925
1 changed files with 32 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/TagList.vue
View File

@@ -2,19 +2,12 @@
<div class="tag-list columns is-multiline is-centered">
<div class="column legend-container">
<table class="table">
<tr
v-for="(slice, k) in slices"
:key="k"
:style="legendStyle(slice)"
class="legend-item"
>
<tr v-for="(slice, k) in slices" :key="k" :style="legendStyle(slice)" class="legend-item">
<td>
<awe-icon :icon="categories[slice.key].tag.icon" />
</td>
<td class="legend-label">{{ slice.label }}</td>
<td class="percent-label numeric">
{{ Math.round(slice.percent * 100) }}%
</td>
<td class="percent-label numeric">{{ Math.round(slice.percent * 100) }}%</td>
</tr>
</table>
</div>
@@ -34,48 +27,42 @@
<div class="select is-fullwidth">
<select v-model="filterCategory">
<option value>Toutes</option>
<option v-for="(category, k) in categories" :key="k" :value="k">{{
<option v-for="(category, k) in categories" :key="k" :value="k">
{{
category.tag.label
}}</option>
}}
</option>
</select>
</div>
</div>
</div>
<div
class="columns is-multiline"
:class="{ 'is-centered': !!filterCategory }"
v-for="(category, k) in filteredCategories"
:key="k"
class="category-list-container column is-half"
>
<div
v-for="(category, k) in filteredCategories"
:key="k"
class="column is-half"
>
<div class="columns category-list">
<div class="column is-2 tag-element account-color">
<div class="icon-container">
<awe-icon :icon="category.tag.icon" />
</div>
</div>
<div
class="column transaction-list"
v-if="category.transactions.length"
>
<p>
{{
$tc('account.total', category.transactions.length, {
count: category.transactions.length
})
}}
</p>
<account-transaction-list
:filter="false"
:head="false"
:foot="true"
:account="account"
:transactions="category.transactions"
/>
<div class="columns category-list">
<div class="column is-2 tag-element account-color">
<div class="icon-container">
<awe-icon :icon="category.tag.icon" />
</div>
</div>
<div class="column transaction-list" v-if="category.transactions.length">
<p>
{{
$tc('account.total', category.transactions.length, {
count: category.transactions.length
})
}}
</p>
<account-transaction-list
:filter="false"
:head="false"
:foot="true"
:account="account"
:transactions="category.transactions"
/>
</div>
</div>
</div>
</div>
@@ -209,4 +196,7 @@ export default class TagList extends Vue {
.percent-label {
text-align: right;
}
.category-list-container {
float: left;
}
</style>