FDB Playground - UI tweaks

resources/views/app/fdb-pg/fdb-contraindications.blade.php

@@ -1,7 +1,11 @@
 @if(!count($contraindications))
     <span class="d-block no-suggest-items">No contraindications!</span>
 @else
-    <table class="table table-sm table-striped table-bordered">
+    <div class="d-flex px-2 py-1 bg-white border-bottom align-items-baseline">
+        <span>Count: <b>{{count($contraindications)}}</b></span>
+        <a href="#" class="text-sm ml-auto" onclick="$(this).parent().next('table').toggle(); return false;">Toggle</a>
+    </div>
+    <table class="table table-sm table-striped table-bordered" style="display: none">
         <thead>
         <tr>
             <th>Severity</th>

resources/views/app/fdb-pg/fdb-geriatric-precautions.blade.php

@@ -1,7 +1,11 @@
 @if(!count($precautions))
     <span class="d-block no-suggest-items">No geriatric precautions!</span>
 @else
-    <table class="table table-sm table-striped table-bordered">
+    <div class="d-flex px-2 py-1 bg-white border-bottom align-items-baseline">
+        <span>Count: <b>{{count($precautions)}}</b></span>
+        <a href="#" class="text-sm ml-auto" onclick="$(this).parent().next('table').toggle(); return false;">Toggle</a>
+    </div>
+    <table class="table table-sm table-striped table-bordered" style="display: none">
         <thead>
         <tr>
             <th>Desc</th>

resources/views/app/fdb-pg/fdb-indications.blade.php

@@ -1,7 +1,11 @@
 @if(!count($indications))
     <span class="d-block no-suggest-items">No indications!</span>
 @else
-    <table class="table table-sm table-striped table-bordered">
+    <div class="d-flex px-2 py-1 bg-white border-bottom align-items-baseline">
+        <span>Count: <b>{{count($indications)}}</b></span>
+        <a href="#" class="text-sm ml-auto" onclick="$(this).parent().next('table').toggle(); return false;">Toggle</a>
+    </div>
+    <table class="table table-sm table-striped table-bordered" style="display: none">
         <thead>
         <tr>
             <th>Indication</th>

resources/views/app/fdb-pg/fdb-rx.blade.php

@@ -12,51 +12,57 @@
     <div class="p-0 mcp-theme-1" id="fdb-pg">
         <div class="px-3 py-2 bg-light border-bottom d-flex align-items-center font-weight-bold font-size-14">FDB Playground</div>
         <div class="p-3">
-            <div class="d-flex align-items-baseline mb-2">
-                <span class="font-size-14 font-weight-bold">Allergies</span>
-                <a href="#" v-on:click.prevent="addAllergy()" class="ml-3">+ Add</a>
-            </div>
-            <table class="table table-sm table-striped table-bordered m-0" style="table-layout: fixed">
-                <thead>
-                <tr>
-                    <th class="border-bottom-0 text-secondary">Allergy</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr v-for="(item, index) in allergies">
-                    <td class="p-0 position-relative">
-                        <input type="text" class="rounded-0 border-0 form-control form-control-sm min-width-unset"
-                               fdb-allergy-suggest-search :fdb-suggest-group="index">
-                    </td>
-                </tr>
-                </tbody>
-            </table>
-            <hr class="m-neg-4 my-4">
-            <div class="d-flex align-items-baseline mb-2">
-                <span class="font-size-14 font-weight-bold">Current Problems</span>
-                <a href="#" v-on:click.prevent="addDx()" class="ml-3">+ Add</a>
+            <div class="row">
+                <div class="col-6">
+                    <div class="d-flex align-items-baseline mb-2">
+                        <span class="font-size-14 font-weight-bold">Allergies</span>
+                        <a href="#" v-on:click.prevent="addAllergy()" class="ml-3">+ Add</a>
+                    </div>
+                    <table class="table table-sm table-striped table-bordered m-0" style="table-layout: fixed">
+                        <thead>
+                        <tr>
+                            <th class="border-bottom-0 text-secondary">Allergy</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr v-for="(item, index) in allergies">
+                            <td class="p-0 position-relative">
+                                <input type="text" class="rounded-0 border-0 form-control form-control-sm min-width-unset"
+                                       fdb-allergy-suggest-search :fdb-suggest-group="index">
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="col-6">
+                    <div class="d-flex align-items-baseline mb-2">
+                        <span class="font-size-14 font-weight-bold">Current Problems</span>
+                        <a href="#" v-on:click.prevent="addDx()" class="ml-3">+ Add</a>
+                    </div>
+                    <table class="table table-sm table-striped table-bordered m-0" style="table-layout: fixed">
+                        <thead>
+                        <tr>
+                            <th class="border-bottom-0 text-secondary">Problem</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr v-for="(item, index) in dx">
+                            <td class="p-0 position-relative">
+                                <input type="text" class="rounded-0 border-0 form-control form-control-sm min-width-unset"
+                                       fdb-dx-suggest-search :fdb-suggest-group="index">
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+
+                </div>
             </div>
-            <table class="table table-sm table-striped table-bordered m-0" style="table-layout: fixed">
-                <thead>
-                <tr>
-                    <th class="border-bottom-0 text-secondary">Problem</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr v-for="(item, index) in dx">
-                    <td class="p-0 position-relative">
-                        <input type="text" class="rounded-0 border-0 form-control form-control-sm min-width-unset"
-                               fdb-dx-suggest-search :fdb-suggest-group="index">
-                    </td>
-                </tr>
-                </tbody>
-            </table>
             <hr class="m-neg-4 my-4">
             <div class="d-flex align-items-baseline mb-2">
                 <span class="font-size-14 font-weight-bold">Medications</span>
                 <a href="#" v-on:click.prevent="addRx()" class="ml-3">+ Add</a>
             </div>
-            <table class="table table-sm table-striped table-bordered m-0" style="table-layout: fixed">
+            <table class="table table-sm table-bordered m-0" style="table-layout: fixed">
                 <thead>
                 <tr>
                     <th class="border-bottom-0 text-secondary">Medication</th>

resources/views/app/fdb-pg/fdb-side-effects.blade.php

@@ -1,7 +1,11 @@
 @if(!count($sides))
     <span class="d-block no-suggest-items">No side effects!</span>
 @else
-    <table class="table table-sm table-striped table-bordered">
+    <div class="d-flex px-2 py-1 bg-white border-bottom align-items-baseline">
+        <span>Count: <b>{{count($sides)}}</b></span>
+        <a href="#" class="text-sm ml-auto" onclick="$(this).parent().next('table').toggle(); return false;">Toggle</a>
+    </div>
+    <table class="table table-sm table-striped table-bordered" style="display: none">
         <thead>
         <tr>
             <th>Side Effect</th>