Updated UI for healthchecks

css/organizr.css

@@ -1301,7 +1301,7 @@ span.fc-title {
     border-bottom-right-radius: 3px;
 }
 .left-health {
-    width: 15px;
+    width: 5px;
     height: 100%;
     position: absolute;
     left: 0;
@@ -1321,6 +1321,11 @@ span.fc-title {
 .select2-container--default.select2-container--focus .select2-selection--multiple {
     height: 100%;
 }
+.healthPosition {
+    position: absolute;
+    z-index: 10;
+    width: 100%;
+}
 /*
 body,
 html {

js/custom.js

@@ -1916,4 +1916,9 @@ $(document).on("keyup", "#authBackendHostPrefix-input, #authBackendHostSuffix-in
 // homepage healthchecks
 $(document).on('click', ".good-health-checks", function(){
     homepageHealthChecks();
+});
+$(document).on('click', ".showMoreHealth", function(){
+   var id = $(this).attr('data-id');
+    $('.showMoreHealthDiv-'+id).toggleClass('d-none');
+    $(this).find('.card-body').toggleClass('healthPosition');
 });

js/functions.js

@@ -5450,13 +5450,16 @@ function buildHealthChecksItem(array){
         }
         checks += `
             <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12">
-                <div class="card bg-inverse text-white">
+                <div class="card bg-inverse text-white mb-3 showMoreHealth mouse" data-id="`+i+`">
                     <div class="card-body bg-org-alt pt-1 pb-1">
                         <div class="d-flex no-block align-items-center">
                             <div class="left-health bg-`+statusColor+`"></div>
-                            <div class="ml-4 mt-2 w-100">
-                                <i class="`+statusIcon+` font-20 pull-right"></i>
-                                <h3 class="d-flex no-block align-items-center m-0">`+hasIcon+v.name+`</h3><h5>Last: `+lastPing+`</h5><h5>Next: `+nextPing+`</h5>
+                            <div class="ml-1 w-100">
+                                <i class="`+statusIcon+` font-20 pull-right mt-3 mb-2"></i>
+                                <h3 class="d-flex no-block align-items-center mt-2 mb-2">`+hasIcon+v.name+`</h3>
+                                <div class="clearfix"></div>
+                                <div class="d-none showMoreHealthDiv-`+i+`"><h5>Last: `+lastPing+`</h5><h5>Next: `+nextPing+`</h5></div>
+                                <div class="clearfix"></div>
                             </div>
                         </div>
                     </div>