💄 (account card) fix account card disposition in account grid

src/components/AccountCard.vue

@@ -5,16 +5,17 @@
     @click="goToAccount(account._id || '')"
   >
     <router-link
+      class="account-name"
       :class="{ 'is-primary': !account.color, 'is-white': account.color }"
       :style="`color: ${findDarkValue(account.color || '')}`"
       :to="{ name: 'account', params: { id: account._id } }"
-      >{{ account.name }}</router-link
-    >
-    <span v-if="account.isPublic"> &nbsp;<awe-icon icon="users" /> </span>
-    <div class="numeric">
-      {{ totalCost | moneypad(account.mainCurrency, false) }}
-    </div>
-    {{ account.users && account.users.map((u) => u.alias).join(', ') }}
+    >{{ account.name }}</router-link>
+    <span v-if="account.isPublic">
+      &nbsp;
+      <awe-icon icon="users" />
+    </span>
+    <div class="numeric">{{ totalCost | moneypad(account.mainCurrency, false) }}</div>
+    <div class="account-users">{{ account.users && account.users.map((u) => u.alias).join(', ') }}</div>
   </div>
 </template>
 
@@ -31,7 +32,7 @@ import transactionService from '../services/TransactionService'
 import TransactionType from '../enums/TransactionType'
 import colors from '../data/colors'
 
-const GRADIENT = true
+const GRADIENT = false
 
 @Component
 export default class AccountCard extends Vue {
@@ -78,19 +79,19 @@ export default class AccountCard extends Vue {
 <style lang="scss" scoped>
 @import '../styles/variables';
 
-.ct-chart {
-  .ct-series-a {
-    .ct-bar {
-      stroke: blue;
-      stroke-width: 10px;
-    }
-  }
+.account-name {
+  font-weight: bold;
 }
 
-.box {
+.box,
+.box:not(:last-child) {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   border-radius: 8px;
   word-wrap: break-word;
   hyphens: auto;
+  margin-bottom: 0;
 
   a {
     font-size: 1.2rem;
@@ -99,5 +100,8 @@ export default class AccountCard extends Vue {
   &:hover {
     cursor: pointer;
   }
+  .account-users {
+    text-overflow: ellipsis;
+  }
 }
 </style>

src/components/AccountList.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="account-list">
     <div class="account-grid" v-if="accounts.length">
-      <div v-for="(account, k) in accounts" :key="k">
-        <account-card :account="account" />
-      </div>
+      <account-card v-for="(account, k) in accounts" :key="k" :account="account" />
     </div>
     <div v-else-if="fetched">
       <awe-icon icon="inbox" />&nbsp;Les comptes créés s'afficheront ici.
@@ -57,8 +55,7 @@ export default class AccountList extends Vue {
   display: grid;
   gap: 1rem;
   margin: 0 1rem;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  grid-auto-rows: 120px;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   justify-content: center;
 }
 

vue.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   pwa: {
     themeColor: '#3f4fa6',
-    msTileColor: '#3f4fa6',,
+    msTileColor: '#3f4fa6',
     workboxOptions: {
       skipWaiting: true,
       clientsClaim: true