Handouts search

public/css/style.css

@@ -3349,6 +3349,12 @@ body.forced-masking #mask {
 }
 #handoutSelectComponent .handout .handout-detail {
     position: relative;
+    cursor: pointer;
+    transition: .15s all ease-in-out;
+}
+#handoutSelectComponent .handout .handout-detail:hover {
+    transition: .15s all ease-in-out;
+    box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
 }
 #handoutSelectComponent .handout.selected .handout-detail i.fa-check-circle {
     position: absolute;

resources/views/app/patient/handouts-list.blade.php

@@ -21,12 +21,12 @@
                 <div id="handoutSelectComponent" class="mb-2" v-cloak>
                     <input type="hidden" name="handoutUid" :value="selectedHandoutUid" />
                     <input type="search" class="form-control" placeholder="Search Handout" @keyup="filterHandouts" />
-                    <div class="row mt-2">
+                    <div class="row mt-3">
                         <div v-for="handout in handoutsList" class="col-md-4 mb-2 handout" :class="selectedHandoutUid == handout.uid ? 'selected':''" @click="selectedHandoutUid = handout.uid">
                             <div class="d-flex flex-column h-100 border rounded p-2 handout-detail">
                             <i v-if="selectedHandoutUid == handout.uid" class="fas fa-check-circle"></i>
                                 <img :src="'/api/handout/download-thumbnail/'+handout.uid" :alt="handout.display_name"  onerror="if (this.src != '/img/pdf.png') this.src = '/img/pdf.png';">
-                                <h6 class="mt-2">@{{ handout.display_name }}</h6>
+                                <h6 class="mt-2 mb-0 text-center">@{{ handout.display_name }}</h6>
                             </div>
                         </div>
                     </div>
@@ -132,4 +132,4 @@
             }
         });
         
-</script>
+</script>