ERx UI update - wider input for instructions and related

public/css/style.css

@@ -361,6 +361,9 @@ body>nav.navbar {
 .mcp-theme-1 .min-width-70px {
     min-width: 70px !important;
 }
+.mcp-theme-1 .min-width-80px {
+    min-width: 80px !important;
+}
 .mcp-theme-1 .width-90px {
     width: 90px !important;
 }

resources/views/app/patient/prescriptions/list.blade.php

@@ -208,16 +208,38 @@
                     <a href="#" v-on:click.prevent="setAddMode('')" class="ml-auto">Close</a>
                 </div>
                 <table class="m-0 table table-sm border bg-white table-hover table-bordered">
-                    <tr>
-                        <th class="align-bottom">Medication</th>
-                        <th class="align-bottom">Instructions<br>To Pharmacist</th>
+                    <tr class="bg-light">
+                        <th class="align-bottom text-secondary">Medication</th>
+                        <!--<th class="align-bottom">Instructions<br>To Pharmacist</th>
                         <th class="align-bottom">Dispense</th>
-                        <th class="align-bottom">Refills</th>
+                        <th class="align-bottom">Refills</th>-->
+                        <th class="align-bottom text-secondary">Instructions/Dispense/Refills</th>
                         <th class="align-bottom">&nbsp;</th>
                     </tr>
                     <tr v-for="drug in existingDrugs" v-if="notAlreadyAdded(drug.data.name)">
                         <td class="width-200px">@{{ drug.data.name }}</td>
-                        <td class="bg-white py-0 px-0">
+                        <td>
+                            <div class="d-flex align-items-center mb-1">
+                                <span class="text-sm min-width-80px">Instructions<br>to Pharmacist</span>
+                                <input type="text" class="form-control form-control-sm min-width-unset shadow-none flex-grow-1" v-model="drug.data.instructions">
+                            </div>
+                            <div class="row mb-1">
+                                <div class="col-6 pr-0">
+                                    <div class="d-flex align-items-center">
+                                        <span class="text-sm min-width-80px">Dispense</span>
+                                        <input type="text" class="form-control form-control-sm min-width-unset shadow-none" v-model="drug.data.dispense">
+                                    </div>
+                                </div>
+                                <div class="col-6">
+                                    <div class="d-flex align-items-center">
+                                        <span class="text-sm">Refills</span>
+                                        <input type="text" class="form-control form-control-sm min-width-unset shadow-none ml-2" v-model="drug.data.refills">
+                                    </div>
+                                </div>
+                            </div>
+
+                        </td>
+                        <!--<td class="bg-white py-0 px-0">
                             <input type="text" class="form-control form-control-sm min-width-unset rounded-0 border-0 shadow-none" v-model="drug.data.instructions">
                         </td>
                         <td class="width-70px bg-white py-0 px-0">
@@ -225,7 +247,7 @@
                         </td>
                         <td class="width-70px bg-white py-0 pl-0">
                             <input type="text" class="form-control form-control-sm min-width-unset rounded-0 border-0 shadow-none" v-model="drug.data.refills">
-                        </td>
+                        </td>-->
                         <td class="width-70px text-right">
                             <a href="#" v-on:click.prevent="addExistingDrugToERx(drug.uid)" class="text-nowrap">Add to eRx</a>
                         </td>