From 561c4ef1874898ab8266a5a1a8d415aca4686185 Mon Sep 17 00:00:00 2001
From: carlosjr <carlosjr@verdnatura.es>
Date: Wed, 9 Mar 2022 11:35:24 +0100
Subject: [PATCH] customer list styling

---
 src/views/Customer/List.vue | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/views/Customer/List.vue b/src/views/Customer/List.vue
index a0add370f7..dd81159035 100644
--- a/src/views/Customer/List.vue
+++ b/src/views/Customer/List.vue
@@ -1,10 +1,10 @@
 <template>
     <q-page class="q-pa-md">
-        <div class="column items-center justify-evenly">
+        <div class="column items-center q-gutter-y-md">
             <router-link to="/customer/123"></router-link>
-            <q-card class="card col-6" v-for="customer in customers" :key="customer.id">
-                <q-card-section clickable>
-                    <div class="row items-center no-wrap">
+            <q-card v-for="customer in customers" :key="customer.id" class="card">
+                <q-card-section horizontal clickable>
+                    <div class="col items-center no-wrap">
                         <div class="col">
                             <div class="text-h6">{{ customer.name }}</div>
                             <div class="text-subtitle2">@{{ customer.username }}</div>
@@ -25,16 +25,15 @@
                             </q-btn>
                         </div>
                     </div>
+
+                    <q-separator vertical />
+
+                    <q-card-actions vertical class="justify-around">
+                        <q-btn flat round color="red" icon="favorite" />
+                        <q-btn flat round color="accent" icon="bookmark" />
+                        <q-btn flat round color="primary" icon="share" />
+                    </q-card-actions>
                 </q-card-section>
-
-                <q-card-section> Labels.. </q-card-section>
-
-                <q-separator />
-
-                <q-card-actions>
-                    <q-btn flat>Action 1</q-btn>
-                    <q-btn flat>Action 2</q-btn>
-                </q-card-actions>
             </q-card>
         </div>
     </q-page>