ui: link-to for list items, active state

ui/index.html

@@ -61,7 +61,7 @@
 
       {{#each service in services}}
         <div class="row">
-          <div class="list-group-item">
+          {{#link-to 'service' controllers.application.getDc service.Name tagName="div" href=false class="list-group-item list-link" }}
             <div {{bind-attr class="service.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
             <h4 class="list-group-item-heading">
               {{#link-to 'service' controllers.application.getDc service.Name class='subtle'}}{{service.Name}}{{/link-to}}
@@ -76,7 +76,7 @@
               {{/each}}
             </ul>
           </div>
-        </div>
+        {{/link-to}}
 
       {{/each}}
 
@@ -127,7 +127,7 @@
 
       {{#each node in nodes}}
         <div class="row">
-          <div {{action 'linkTo' 'node' controllers.application.getDc node.Name}} class="list-group-item list-link">
+          {{#link-to 'node' controllers.application.getDc node.Name tagName="div" href=false class="list-group-item list-link" }}
             <div {{bind-attr class="node.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
             <h4 class="list-group-item-heading">
               {{#link-to 'node' controllers.application.getDc node.Name class='subtle'}}{{node.Name}}{{/link-to}}
@@ -142,7 +142,7 @@
               {{/each}}
             </ul>
           </div>
-        </div>
+        {{/link-to}}
 
       {{/each}}
 
@@ -186,7 +186,7 @@
           {{#each service in model.Services }}
 
           {{#link-to 'service' controllers.application.getDc service.Service }}
-              <div class="panel panel-default panel-link">
+              <div class="panel panel-default panel-link panel-short">
                 <div class="panel-bar"></div>
                 <div class="panel-heading">
                   <h3 class="panel-title">
@@ -208,7 +208,7 @@
     <div class="col-md-8 col-md-offset-2 vertical-center">
       {{#each item in model}}
         <a {{action 'selectDc' item}}>
-            <div class="panel panel-success panel-link">
+            <div class="panel panel-success panel-link panel-short">
               <div class="panel-bar"></div>
               <div class="panel-heading">
                 <h3 class="panel-title">

ui/javascripts/app.js

@@ -5,9 +5,10 @@ window.App = Ember.Application.create({
 });
 
 App.Router.map(function() {
+  this.resource("services", { path: "/:dc/services" }, function(){
+    this.resource("service", { path: "/:name" });
+  });
   this.route("index", { path: "/" });
-  this.route("services", { path: "/:dc/services" });
-  this.route("service", { path: "/:dc/services/:name" });
   this.route("nodes", { path: "/:dc/nodes" });
   this.route("node", { path: "/:dc/nodes/:name" });
   this.route("kv", { path: "/:dc/kv" });

ui/styles/_lists.scss

@@ -1,6 +1,7 @@
 .list-group-item {
     padding: 0;
     border-width: 2px;
+    border-bottom-width: 4px;
     border-radius: 0px;
     margin-bottom: 15px;
     margin-top: 15px;
@@ -31,26 +32,28 @@
     .list-bar {
         width: 100%;
         height: 20px;
-    }
-
-    &:first-child {
-        border-top-right-radius: 0px;
-        border-top-left-radius: 0px;
+        border-top-right-radius: 2px;
+        border-top-left-radius: 2px;
     }
 
     &.list-link:hover {
         cursor: pointer;
         background-color: lighten($gray-background, 8%);
     }
+
+    &.active {
+        background-color: $purple;
+    }
+
 }
 
 ul.list-broken {
     li {
-        border-bottom: 2px $gray-background solid;
+        // border-top: 2px lighten($gray-background, 5%) solid;
     }
 
-    li:last-child {
-        border-width: 0px;
+    &:last-child {
+        // border-bottom: 2px lighten($gray-background, 5%) solid;
     }
 
 }

ui/styles/_panels.scss

@@ -69,6 +69,14 @@
         }
     }
 
+    &.panel-link {
+        border-bottom-width: 4px;
+    }
+
+    &.panel-short {
+        border-bottom-width: 2px;
+    }
+
     &.panel-link:hover {
         cursor: pointer;
         background-color: lighten($gray-background, 8%);