styling changes on contracts and meds

src/assets/css/app.css

@@ -67,7 +67,6 @@ table tr.at_risk:hover {
     color: grey;
 }
 .scroller {
-    border: 1px dotted #333;
 }
 .scroller {
     height: 600px;

src/components/RecentOrders.vue

@@ -1,7 +1,10 @@
 <template>
-    <h3>{{ doc_types[doc_status] }} Orders - {{ customer.acc_no }} {{ customer.name }}
+    <v-card>
+        <v-card-title>
+            {{ doc_types[doc_status] }} Orders - {{ customer.acc_no }} {{ customer.name }}
             <v-btn v-if="customer.id != ''" size="smaller" icon="mdi-refresh" variant="text" color="green" @click="getCustomerRecentOrders" :loading="orders_loading"></v-btn>
-    </h3>
+
+        </v-card-title>
         <v-progress-linear color="blue" :active="orders_loading" indeterminate>
         </v-progress-linear>
         <v-container>
@@ -46,6 +49,7 @@
                 </v-col>
             </v-row>
         </v-container>
+    </v-card>
 </template>
 <script>
 import axios from 'axios'

src/views/contracts/ContractList.vue

@@ -7,27 +7,22 @@
     </v-tabs>
     <v-window v-model="tab" >
         <v-window-item value="list">
-            <v-responsive
+            <v-row>
-                    max-width="500"
+                <v-col cols="8" xs="12" sm="12" md="12" lg="8">
-                    >
                     <v-text-field clearable
                                   label="Search"
                                   variant="outlined"
                                   v-model="searchQuery"
                                   density="compact"
                                   append-inner-icon="mdi-magnify"></v-text-field>
-            </v-responsive>
                     <v-btn  color="warning"
                             v-if="site_info.features.addcontract"
                             @click="showEditContract()"
-                >
+                            prepend-icon="mdi-plus"
-                + Add
+                            variant="text"
-        </v-btn>
+                            >Add</v-btn>
-            <v-dialog v-model="showDialog">
-            </v-dialog>
-            <v-row>
-                <v-col cols="8" xs="12" sm="12" md="12" lg="8">
                         <v-progress-linear indeterminate color="blue" :active="loading"></v-progress-linear>
+                        <v-card variant="outlined">
                             <RecycleScroller class="scroller"
                                              :items="filteredContracts"
                                              :item-size="130"
@@ -115,6 +110,7 @@
                                                  </v-col>
                                              </v-row>
                             </RecycleScroller>
+                        </v-card>
                 </v-col>
             </v-row>
         </v-window-item>
@@ -125,6 +121,8 @@
             <ContractMulti :contract="selected_contract" :total="total" />
         </v-window-item>
     </v-window>
+    <v-dialog v-model="showDialog">
+    </v-dialog>
 </template>
 <script>
 import ContractEdit from './ContractEdit.vue';
@@ -257,7 +255,7 @@ export default {
 </script>
 <style scoped>
 .scroller {
-    height: 600px;
+    height: 70vw;
 }
 
 .item {

src/views/customers/CustomerList.vue

@@ -8,7 +8,10 @@
         append-inner-icon="mdi-magnify"></v-text-field>
     <v-row>
         <v-col cols="12" sm=12 lg=6>
-            <h3>Customer List</h3>
+            <v-card>
+                <v-card-title>
+                    Customer List
+                </v-card-title>
                 <v-progress-linear color="blue" :active="customers_loading" indeterminate>
                 </v-progress-linear>
                 <v-list>
@@ -43,6 +46,8 @@
                             </v-list-item>
                     </RecycleScroller>
                 </v-list>
+            </v-card>
+            <br/>
             <RecentOrders :customer="selected_cust" doc_status="0"></RecentOrders>
         </v-col>
         <v-col cols="12" sm=12 lg=6>

src/views/medfeeds/MedFeedsList.vue

@@ -10,34 +10,36 @@
         <v-window-item value="list">
             <v-row>
                 <v-col>
+                </v-col>
+            </v-row>
+            <v-row>
+                <v-col cols="12" xs="12" sm="12" md="12" lg=8>
                     <v-text-field clearable
                                   label="Search"
                                   variant="outlined"
                                   v-model="searchQuery"
                                   density="compact"
                                   append-inner-icon="mdi-magnify"></v-text-field>
-                </v-col>
+                    <v-btn v-if="site_info.features.addmedfeed" color="warning" @click="editMedFeed()" prepend-icon="mdi-plus" variant="text">Add</v-btn>
-            </v-row>
-            <v-btn v-if="site_info.features.addmedfeed" color="warning" @click="editMedFeed()">+ Add</v-btn>
-            <v-row>
-                <v-col cols="12" xs="12" sm="12" md="12" lg=8>
                     <v-progress-linear indeterminate color="blue" :active="loading"></v-progress-linear>
+                    <v-card variant="outlined">
                         <RecycleScroller class="scroller"
                                          :items="filteredMedFeeds"
-                                     :item-size="108"
+                                         :item-size="100"
                                          v-slot="{ item }" 
                                          key-field="id">
-                    <v-row class="item" :class="{ at_risk : item.customer.at_risk }"> 
+                        <v-row dense class="item" :class="{ at_risk : item.customer.at_risk }">
                             <v-col cols="4">
                                 Medicated Feed : {{ item.id }}<br/>
+                                <span class="text-caption">
                                     {{ item.customer.acc_no }} - {{ item.customer.name }}<br/>
-                            {{ item.vet.practice }}
+                                    Vet: {{ item.vet.practice }}</span>
                             </v-col>
-                        <v-col>
+                            <v-col class="text-caption">
                                 {{ item.medication.name }} {{ item.medication.inclusion_rate }}<br />
                                 {{ item.product.name }}
                             </v-col>
-                        <v-col>
+                            <v-col class="text-caption">
                                 Required : {{ formatDate(item.date_required,"DD/MM/YYYY") }} <br/>
                                 Repeat Prescription? : <v-icon v-if="item.repeat">mdi-refresh</v-icon>
                             </v-col>
@@ -64,6 +66,7 @@
                             </v-col>
                         </v-row>
                         </RecycleScroller>
+                    </v-card>
                 </v-col>
             </v-row>
         </v-window-item>