From 039294af73ea35d68f0c7ab15b54fb542d8eff7e Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Tue, 1 Oct 2019 22:36:26 +0200
Subject: [PATCH] :art: (Tag List) Add sticky icons

---
 src/components/TagList.vue | 52 ++++++++++++++++++++++++++++----------
 1 file changed, 39 insertions(+), 13 deletions(-)

diff --git a/src/components/TagList.vue b/src/components/TagList.vue
index 16ff9c7..3efb269 100644
--- a/src/components/TagList.vue
+++ b/src/components/TagList.vue
@@ -3,12 +3,19 @@
     <div class="column is-half">
       <h3 class="subtitle is-3">Légende</h3>
       <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>
@@ -30,23 +37,39 @@
           <div class="select is-fullwidth">
             <select v-model="filterCategory">
               <option value>Toutes</option>
-              <option
-                v-for="(category, k) in categories"
-                :key="k"
-                :value="k"
-              >{{ category.tag.label }}</option>
+              <option v-for="(category, k) in categories" :key="k" :value="k">{{
+                category.tag.label
+              }}</option>
             </select>
           </div>
         </div>
       </div>
-      <div class="columns is-multiline" :class="{ 'is-centered': !!filterCategory }">
-        <div v-for="(category, k) in filteredCategories" :key="k" class="column is-half">
+      <div
+        class="columns is-multiline"
+        :class="{ 'is-centered': !!filterCategory }"
+      >
+        <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">
-              <awe-icon :icon="category.tag.icon" />
+              <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>
+            <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"
@@ -161,10 +184,13 @@ export default class TagList extends Vue {
   display: flex;
   text-align: center;
   align-items: center;
-  justify-content: center;
   flex-flow: column;
   font-size: 30pt;
 }
+.icon-container {
+  position: sticky;
+  top: calc(3.25rem + 15px);
+}
 .chart-container {
   padding: 15px;
 }