From 8ec7bd0925d0b424b5222b1dc13bf66e27fff4b5 Mon Sep 17 00:00:00 2001
From: Julien Calixte <jcalixte@isep.fr>
Date: Sun, 13 Oct 2019 22:00:24 +0200
Subject: [PATCH] style(Account Tag List): Add a float left to better manage a
 category

---
 src/components/TagList.vue | 74 +++++++++++++++++---------------------
 1 file changed, 32 insertions(+), 42 deletions(-)

diff --git a/src/components/TagList.vue b/src/components/TagList.vue
index fc91092..c35c685 100644
--- a/src/components/TagList.vue
+++ b/src/components/TagList.vue
@@ -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>