Tickets v1 (wip) - UI tweaks

public/css/style.css

@@ -1015,6 +1015,10 @@ body .node input[type="number"] {
     background-color: #6457f9;
     color: #fff;
     font-size: 10px !important;
+    opacity: 0.85;
+}
+.pro-initials:hover {
+    opacity: 1;
 }
 .ticket-section {
 

resources/views/app/patient/tickets.blade.php

@@ -149,7 +149,7 @@
                     <h3 class="stag-popup-title mb-0 p-3 bg-light">
                         <span class="text-nowrap overflow-hidden text-ellipsis">@{{ erxPopupMode === 'add' ? 'Add ERx Ticket' : erxPopupItem.data.medication + '  •  ' + erxPopupItem.data.strength }}</span>
                         <a href="#" class="ml-auto text-secondary"
-                           onclick="return closeStagPopup()"><i class="fa fa-times-circle"></i></a>
+                           onclick="return closeStagPopup()"><i class="fa fa-chevron-right"></i></a>
                     </h3>
 
                     <!-- common - only applicable for edit -->
@@ -160,11 +160,20 @@
                                 <label class="text-secondary m-0">Assignee Pro</label>
                             </div>
                             <div class="col-9">
-                                <select provider-search
-                                        :data-pro-name="[erxPopupItem.assigned_pro.name_last, erxPopupItem.assigned_pro.name_first].filter(Boolean).join(', ')"
-                                        class="form-control form-control-sm">
-                                    <option value=""> --select--</option>
-                                </select>
+                                <div class="d-flex align-items-center">
+                                    <div class="pro-initials text-uppercase"
+                                         :title="allProsFlat['pro_' + erxPopupItem.assigned_pro_id].displayedName"
+                                         :style="'background-color: ' + allProsFlat['pro_' + erxPopupItem.assigned_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + erxPopupItem.assigned_pro_id].colors.fc + ';'">
+                                        @{{allProsFlat['pro_' + erxPopupItem.assigned_pro_id].displayedInitials}}
+                                    </div>
+                                    <div class="flex-grow-1 ml-2">
+                                        <select provider-search
+                                                :data-pro-name="[erxPopupItem.assigned_pro.name_last, erxPopupItem.assigned_pro.name_first].filter(Boolean).join(', ')"
+                                                class="form-control form-control-sm">
+                                            <option value=""> --select--</option>
+                                        </select>
+                                    </div>
+                                </div>
                             </div>
                         </div>
 
@@ -173,11 +182,20 @@
                                 <label class="text-secondary m-0">Ordering Pro</label>
                             </div>
                             <div class="col-9">
-                                <select provider-search
-                                        :data-pro-name="[erxPopupItem.ordering_pro.name_last, erxPopupItem.ordering_pro.name_first].filter(Boolean).join(', ')"
-                                        class="form-control form-control-sm">
-                                    <option value=""> --select--</option>
-                                </select>
+                                <div class="d-flex align-items-center">
+                                    <div class="pro-initials text-uppercase"
+                                         :title="allProsFlat['pro_' + erxPopupItem.ordering_pro_id].displayedName"
+                                         :style="'background-color: ' + allProsFlat['pro_' + erxPopupItem.ordering_pro_id].colors.bc + '; color: ' + allProsFlat['pro_' + erxPopupItem.ordering_pro_id].colors.fc + ';'">
+                                        @{{allProsFlat['pro_' + erxPopupItem.ordering_pro_id].displayedInitials}}
+                                    </div>
+                                    <div class="flex-grow-1 ml-2">
+                                        <select provider-search
+                                                :data-pro-name="[erxPopupItem.ordering_pro.name_last, erxPopupItem.ordering_pro.name_first].filter(Boolean).join(', ')"
+                                                class="form-control form-control-sm">
+                                            <option value=""> --select--</option>
+                                        </select>
+                                    </div>
+                                </div>
                             </div>
                         </div>