From 69ffb5e83ab37b49fe6b43d879b89032a01d2f02 Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Fri, 25 Apr 2014 12:45:55 -0400
Subject: [PATCH] ui: link-to for list items, active state

---
 ui/index.html          | 12 ++++++------
 ui/javascripts/app.js  |  5 +++--
 ui/styles/_lists.scss  | 19 +++++++++++--------
 ui/styles/_panels.scss |  8 ++++++++
 4 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 1d4adee613..6b9cac4344 100644
--- a/ui/index.html
+++ b/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">
diff --git a/ui/javascripts/app.js b/ui/javascripts/app.js
index 9009d59d69..c440e93eae 100755
--- a/ui/javascripts/app.js
+++ b/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" });
diff --git a/ui/styles/_lists.scss b/ui/styles/_lists.scss
index 678ea026e4..14cc0a21fc 100644
--- a/ui/styles/_lists.scss
+++ b/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;
     }
 
 }
diff --git a/ui/styles/_panels.scss b/ui/styles/_panels.scss
index ee5db094fe..c7d4937c64 100644
--- a/ui/styles/_panels.scss
+++ b/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%);