From d565b4ab6a0e362399500bf2c94b8aae91e4c73a Mon Sep 17 00:00:00 2001
From: Paul Wilde <paul@wilde.cloud>
Date: Fri, 24 Mar 2023 12:55:23 +0000
Subject: [PATCH] some styling

---
 src/components/CustomerComments.vue  | 37 ++++++++++++++++------------
 src/components/RecentOrders.vue      | 17 +++++++------
 src/views/customers/CustomerList.vue |  9 ++++---
 3 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/src/components/CustomerComments.vue b/src/components/CustomerComments.vue
index 026c2d6..503b629 100644
--- a/src/components/CustomerComments.vue
+++ b/src/components/CustomerComments.vue
@@ -1,20 +1,25 @@
 <template>
-    <h3>Comments 
-        <v-btn v-if="customer.id != ''" color="warning" size="smaller" variant="text" icon="mdi-plus" @click="showAddNote"></v-btn>
-        <v-btn v-if="customer.id != ''" color="green" size="smaller" variant="text" icon="mdi-refresh" @click="getCustomerComments" :loading="comments_loading"></v-btn>
-    </h3>
-    <v-progress-linear color="yellow" :active="comments_loading" indeterminate>
-    </v-progress-linear>
-    <v-list>
-        <v-list-item v-for="item in comments" :key="item.id" :class="{ inactive : !item.active }">
-            {{ item.comment }}
-            <template v-slot:append>
-                <v-icon v-if="item.actioned" icon="mdi-tick" color="green" title="Actioned"></v-icon>
-                <v-btn v-if="item.active" :loading="item.active_changing" @click="toggleActiveState(item)" size="small" icon="mdi-play" color="blue" title="Active"></v-btn>
-                <v-btn v-if="!item.active" :loading="item.active_changing" @click="toggleActiveState(item)" size="small" icon="mdi-pause" title="Inactive"></v-btn>
-            </template>
-        </v-list-item>
-    </v-list>
+    <v-card style="min-height:200px">
+        <v-card-title>
+            Comments 
+            <v-btn v-if="customer.id != ''" color="warning" size="smaller" variant="text" icon="mdi-plus" @click="showAddNote"></v-btn>
+            <v-btn v-if="customer.id != ''" color="green" size="smaller" variant="text" icon="mdi-refresh" @click="getCustomerComments" :loading="comments_loading"></v-btn>
+        </v-card-title>
+        <v-card-text>
+            <v-progress-linear color="yellow" :active="comments_loading" indeterminate>
+            </v-progress-linear>
+            <v-list>
+                <v-list-item v-for="item in comments" :key="item.id" :class="{ inactive : !item.active }">
+                    {{ item.comment }}
+                    <template v-slot:append>
+                        <v-icon v-if="item.actioned" icon="mdi-tick" color="green" title="Actioned"></v-icon>
+                        <v-btn v-if="item.active" variant="text" :loading="item.active_changing" @click="toggleActiveState(item)" size="small" icon="mdi-play" color="blue" title="Active"></v-btn>
+                        <v-btn v-if="!item.active" variant="text" :loading="item.active_changing" @click="toggleActiveState(item)" size="small" icon="mdi-pause" title="Inactive"></v-btn>
+                    </template>
+                </v-list-item>
+            </v-list>
+        </v-card-text>
+    </v-card>
     <v-dialog v-model="dialog[0]">
         <AddNote :customer="customer" @return="closeAddNote"></AddNote>
     </v-dialog>
diff --git a/src/components/RecentOrders.vue b/src/components/RecentOrders.vue
index 345b5c9..8c54c57 100644
--- a/src/components/RecentOrders.vue
+++ b/src/components/RecentOrders.vue
@@ -5,11 +5,11 @@
     <v-progress-linear color="blue" :active="orders_loading" indeterminate>
     </v-progress-linear>
     <v-container>
-        <v-row>
+        <v-row dense>
             <v-col cols=12 v-for="item in sortedOrders" :key="item.doc_no">
-                <v-card :class="{ 'bg-green-lighten-5' : item.doc_status == 'Live' }">
-                    <v-row>
-                        <v-col cols=4>
+                <v-card density="compact" :class="{ 'bg-green-lighten-5' : item.doc_status == 'Live' }">
+                        <v-row dense>
+                            <v-col cols=4>
                             <v-card-title>
                                 Order: {{ item.doc_no }}
                             </v-card-title>
@@ -30,8 +30,8 @@
                                     </template>
                                 </template>
                             </v-card-text>
-                        </v-col>
-                        <v-col cols=8>
+                            </v-col>
+                            <v-col>
                             <v-card-text>
                                 <h5>Items :</h5>
                                 <v-caption v-for="(i, index) in item.products" :key="index" style="border-bottom: 1px dotted #000;">
@@ -39,8 +39,9 @@
                                     <span v-if="i.quantity != 0">x {{ i.quantity }}</span><br/>
                                 </v-caption>
                             </v-card-text>
-                        </v-col>
-                    </v-row>
+                            </v-col>
+                        </v-row>
+
                 </v-card>
             </v-col>
         </v-row>
diff --git a/src/views/customers/CustomerList.vue b/src/views/customers/CustomerList.vue
index 70149eb..3deb7a3 100644
--- a/src/views/customers/CustomerList.vue
+++ b/src/views/customers/CustomerList.vue
@@ -29,14 +29,14 @@
                                 </v-card>
                             </template>
                 <template v-slot:append>
-                    <v-btn @click.prevent="goToContracts(item)" color="info">
+                    <v-btn @click.prevent="goToContracts(item)" class="text-none" color="blue-lighten-1" title="View Contracts">
                         Contracts
-                        <v-badge v-if="item.contract_count > 0" :content="item.contract_count">
+                        <v-badge v-if="item.contract_count > 0" color="blue-lighten-4" floating :content="item.contract_count">
                         </v-badge>
                     </v-btn>
-                    <v-btn @click.prevent="goToMedFeeds(item)" color="warning">
+                    <v-btn @click.prevent="goToMedFeeds(item)" class="text-none" color="orange-lighten-1" title="View Med Feeds">
                         Med Feeds
-                        <v-badge v-if="item.medfeed_count > 0" :content="item.medfeed_count">
+                        <v-badge v-if="item.medfeed_count > 0" color="orange-lighten-4" floating :content="item.medfeed_count">
                         </v-badge>
                     </v-btn>
                 </template>
@@ -47,6 +47,7 @@
         </v-col>
         <v-col cols="12" sm=12 lg=6>
             <CustomerComments :customer="selected_cust"></CustomerComments>
+            <br/>
             <RecentOrders :customer="selected_cust" doc_status="2"></RecentOrders>
         </v-col>
     </v-row>