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

32
src/components/TagList.vue
View File

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