ui: condense and improve UI for check display under services

ui/index.html

@@ -294,7 +294,11 @@
       <div class="border-left hidden-xs hidden-sm">
       </div>
 
-      <div class="col-md-6 col-lg-7 border-left scrollable">
+      <div class="visible-xs visible-sm">
+        <hr>
+      </div>
+
+      <div class="col-md-6 col-lg-7 border-left">
         <div class="row padded-border">
           {{outlet}}
         </div>
@@ -315,8 +319,9 @@
 
       {{#each node in model }}
 
-        {{#link-to 'nodes.show' node.Node.Node tagName="div" href=false class="panel panel-link" }}
-          <div {{ bind-attr class=":panel-bar node.hasFailingChecks:bg-orange:bg-green" }}></div>
+        {{#link-to 'nodes.show' node.Node.Node tagName="div" href=false class="panel panel-link panel-list" }}
+          <div {{bind-attr class="hasFailingChecks:bg-orange:bg-green :panel-bar-horizontal"}}></div>
+
           <div class="panel-heading">
             <h3 class="panel-title">
               {{node.Node.Node}}
@@ -325,15 +330,21 @@
             </h3>
           </div>
 
-          <div class="panel-body">
-            <ul class="list-unstyled list-broken">
-              {{#each check in node.Checks }}
-                <li>
-                  <h4 class="check">{{ check.Name }} <small>{{ check.CheckID }}</small> <span class="pull-right"><small>{{check.Status}}</small></h4>
-                </li>
-              {{/each}}
-            </ul>
-          </div>
+          <ul class="list-unstyled">
+            {{#each check in node.Checks }}
+              <li class="list-group-item list-condensed-link">
+                {{listBar check.Status}}
+                <div class="name">
+                  {{check.Name}}
+                  <small>{{ check.CheckID }}</small>
+                  <small class="pull-right">
+                  {{check.Status}}
+                  </small>
+                </div>
+              </li>
+            {{/each}}
+          </ul>
+
         {{/link-to}}
 
       {{/each}}
@@ -391,7 +402,7 @@
       <div class="border-left hidden-xs hidden-sm">
       </div>
 
-      <div class="col-md-6 col-lg-7 border-left scrollable">
+      <div class="col-md-6 col-lg-7 border-left">
         <div class="row padded-border">
           {{outlet}}
         </div>

ui/javascripts/app/helpers.js

@@ -8,3 +8,14 @@ Ember.Handlebars.helper('panelBar', function(status) {
   }
   return new Handlebars.SafeString('<div class="panel-bar ' + highlightClass + '"></div>');
 });
+
+Ember.Handlebars.helper('listBar', function(status) {
+  var highlightClass;
+
+  if (status == "passing") {
+    highlightClass = "bg-green";
+  } else {
+    highlightClass = "bg-orange";
+  }
+  return new Handlebars.SafeString('<div class="list-bar-horizontal ' + highlightClass + '"></div>');
+});

ui/styles/_lists.scss

@@ -59,7 +59,7 @@
 
             small {
                 padding-right: 8px;
-                padding-top: 1px;
+                padding-top: 2px;
                 font-size: 12px;
                 color: $gray-light;
             }

ui/styles/_panels.scss

@@ -4,6 +4,7 @@
     @include transition(background-color .3s ease-in-out);
 
     .panel-heading {
+        padding: 10px 7px;
         background-color: transparent;
         border-width: 2px;
         border-color: $gray-background;
@@ -57,6 +58,23 @@
         border-bottom-width: 2px;
     }
 
+    &.panel-list {
+        ul {
+            margin: 0;
+            li {
+                margin: 0;
+                border: 0;
+            }
+        }
+    }
+    .panel-bar-horizontal {
+        width: 20px;
+        float: left;
+        height: 50px;
+        margin-right: 10px;
+        display: block;
+    }
+
     &.panel-short {
         border-bottom-width: 0px;
     }