🎨 (account) remove transition :'(

src/components/TagList.vue

@@ -1,29 +1,31 @@
 <template>
-  <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"
-        >
-          <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>
-        </tr>
-      </table>
-    </div>
-    <div class="column">
-      <div class="chart-container">
-        <chart-pie :slices="slices" />
+  <div class="tag-list">
+    <div class="columns">
+      <div class="column legend-container">
+        <table class="table is-fullwidth">
+          <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>
+          </tr>
+        </table>
+      </div>
+      <div class="column">
+        <div class="chart-container">
+          <chart-pie :slices="slices" />
+        </div>
       </div>
     </div>
-    <div class="column is-12">
+    <div>
       <div class="field has-addons has-addons-centered is-narrow">
         <div class="control" v-if="filterCategory">
           <button type="submit" class="button" @click="filterCategory = ''">
@@ -191,6 +193,9 @@ export default class TagList extends Vue {
 }
 .legend-container {
   display: flex;
+  table {
+    max-width: 400px;
+  }
 }
 .legend {
   font-weight: bold;

src/views/accounts/AccountItem.vue

@@ -87,63 +87,53 @@
           </li>
         </ul>
       </div>
-      <transition-group
-        :name="transitionName"
-        tag="div"
-        mode="out-in"
-        v-if="transactions.length"
+      <div
+        key="transaction"
+        class="transaction-panel tab-content is-centered"
+        v-if="activeTab === 'transaction'"
+      >
+        <account-transaction-list
+          :account="account"
+          :transactions="transactions"
+        />
+      </div>
+      <div
+        key="tag"
+        class="tag-panel tab-content is-centered"
+        v-if="activeTab === 'tag'"
+      >
+        <tag-list :transactions="transactionWithoutRefund" :account="account" />
+      </div>
+      <div
+        key="balance"
+        class="balance-panel tab-content is-centered"
+        v-if="activeTab === 'balance'"
+      >
+        <chart-balance
+          :account="account"
+          :stats="userStats"
+          :currency="account.mainCurrency"
+        />
+      </div>
+      <div
+        key="refund"
+        class="refund-panel tab-content is-centered"
+        v-if="activeTab === 'refund'"
       >
         <div
-          key="transaction"
-          class="transaction-panel tab-content is-centered"
-          v-if="activeTab === 'transaction'"
-        >
-          <account-transaction-list
-            :account="account"
-            :transactions="transactions"
-          />
-        </div>
-        <div
-          key="tag"
-          class="tag-panel tab-content is-centered"
-          v-if="activeTab === 'tag'"
-        >
-          <tag-list
-            :transactions="transactionWithoutRefund"
-            :account="account"
-          />
-        </div>
-        <div
-          key="balance"
-          class="balance-panel tab-content is-centered"
-          v-if="activeTab === 'balance'"
-        >
-          <chart-balance
-            :account="account"
-            :stats="userStats"
-            :currency="account.mainCurrency"
-          />
-        </div>
-        <div
-          key="refund"
-          class="refund-panel tab-content is-centered"
-          v-if="activeTab === 'refund'"
+          v-if="userRefunds.length"
+          class="refund-container columns is-centered is-multiline"
         >
           <div
-            v-if="userRefunds.length"
-            class="refund-container columns is-centered is-multiline"
+            class="column is-one-fifth"
+            v-for="(refund, k) in userRefunds"
+            :key="`${refund.from.alias}-${refund.to.alias}`"
           >
-            <div
-              class="column is-one-fifth"
-              v-for="(refund, k) in userRefunds"
-              :key="`${refund.from.alias}-${refund.to.alias}`"
-            >
-              <refund-transaction :refund="userRefunds[k]" :account="account" />
-            </div>
+            <refund-transaction :refund="userRefunds[k]" :account="account" />
           </div>
-          <div v-else class="equilibrium">Le compte est à l'équilibre !</div>
         </div>
-      </transition-group>
+        <div v-else class="equilibrium">Le compte est à l'équilibre&nbsp;!</div>
+      </div>
     </div>
     <fab-button
       v-if="!account.archive"
@@ -197,7 +187,6 @@ export default class AccountItem extends BaseAccount {
   public transactions: ITransaction[] = []
   public activeTab: string = 'transaction'
   public retrievingExchange: boolean = false
-  public transitionName: string = ''
 
   public async getData(docIds?: string[]): Promise<void> {
     if (docIds && !docIds.find((i: string) => i === this.id)) {
@@ -444,13 +433,6 @@ export default class AccountItem extends BaseAccount {
   public get isMultiUser(): boolean {
     return !!this.account && this.account.users.length > 1
   }
-
-  @Watch('activeTab')
-  public onActiveTabChange(newTab: string, oldTab: string): void {
-    const tabs: string[] = ['transaction', 'tag', 'balance', 'refund']
-    this.transitionName =
-      tabs.indexOf(newTab) > tabs.indexOf(oldTab) ? 'slide-left' : 'slide-right'
-  }
 }
 </script>
 
@@ -529,9 +511,7 @@ export default class AccountItem extends BaseAccount {
 .tab-content {
   position: absolute;
   width: 100%;
-  margin: 10px 0.75rem;
-  transition: opacity 0.5s cubic-bezier(0.55, 0, 0.1, 1),
-    transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+  margin: 10px 0;
   &.columns {
     &:last-child {
       margin-bottom: 60px;