Style story list

bkeepers · Aug 31, 2011 · 10e5641 · 10e5641
1 parent 2fc4e1d
commit 10e5641
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 11 deletions.
diff --git a/app/assets/javascripts/controllers/story_list_controller.js b/app/assets/javascripts/controllers/story_list_controller.js
@@ -38,6 +38,8 @@ var StoryListController = Spine.Controller.create({
   },
 
   show: function(params) {
+    this.stories.find('.active').removeClass('active');
+    this.stories.find('#story-' + params.id).addClass('active');
     StoryController.init({el: $('article'), story: Story.find(params.id)}).render();
   },
 

diff --git a/app/assets/stylesheets/base.scss b/app/assets/stylesheets/base.scss
@@ -119,22 +119,41 @@ body {
     @include header();
   }
   li {
-    height:40px;
     position:relative;
     &.story {
-      border-bottom:1px solid rgb(224,224,224);
-      span.icon {
-        display:none;
-        background:url(bars.png);
-      }
+      color:rgb(52,52,52);
+      border-bottom:1px solid rgb(229,229,229);
       p {
-        color:rgb(52,52,52);
         font-weight:100;
         left:40px;
         position:absolute;
         top:10px;
         width:70%;
       }
+      a {
+        padding:0.8em 0 0.7em 40px;
+        display:block;
+        color:inherit;
+        text-decoration:none;
+
+        &:hover {
+          background-color:rgb(250,250,250);
+        }
+      }
+
+      &.approved {
+        background-color: rgb(238,238,238);
+        color: rgb(150,150,150);
+
+        a:hover {
+          background-color: rgb(235, 235, 235);
+        }
+      }
+
+      &.active, &.active a:hover {
+        background: -webkit-linear-gradient(top, rgb(74, 171, 239) 0%, rgb(1,136,222) 80%);
+        color:#fff;
+      }
     }
     &.milestone {
 

diff --git a/views/templates/story.handlebars b/views/templates/story.handlebars
@@ -1,5 +1,6 @@
-<li id="story-{{id}}" class="story">
-  <span class="icon"></span>
-  <a href="#/stories/{{id}}">{{description}}</a>
-  <span class="status">({{status}})</span>
+<li id="story-{{id}}" class="story {{status}}">
+  <a href="#/stories/{{id}}">
+    {{description}}
+    <span class="status">({{status}})</span>
+  </a>
 </li>