projects page finished

app/assets/stylesheets/common.scss

@@ -78,6 +78,10 @@ a:focus {
 .prepend-top-10 {
   margin-top:10px;
 }
+
+.padded { 
+  padding:20px;
+}
 .no-borders { 
   border:none;
 }
@@ -643,22 +647,6 @@ p.time {
   .wll:hover { background:none }
 }
 
-
-.projects_list { 
-  a.project { 
-    h4 { 
-      color:#888;
-    }
-    &.active { 
-      h4 {
-        color:#111;
-        .ico.project { 
-          background-position:-209px -21px;
-        }
-      }
-    }
-  }
-}
 .ico { 
   background: url("images.png") no-repeat -85px -77px;
   width: 19px;
@@ -679,3 +667,36 @@ p.time {
     background-position:-209px -21px;
   }
 }
+
+.leftbar { 
+
+  h5, .title { 
+    padding:5px 10px;
+  }
+
+  h4 { 
+    font-size:14px;
+    padding:2px 10px;
+    color:#888;
+    border-bottom:1px solid #eee;
+    &:last-child { border:none; }
+  }
+
+  a.active { 
+    h4 {
+      color:#111;
+      border-right:4px solid $styled_border_color;
+      .ico.project { 
+        background-position:-209px -21px;
+      }
+    }
+  }
+}
+
+.btn { 
+  &.very_small { 
+    font-size:11px;
+    padding:4px;
+    margin:2px;
+  }
+}

app/views/projects/index.html.haml

@@ -1,21 +1,21 @@
-%h3
-  Projects
-  %small= "( #{current_user.projects.count} )"
-  - if current_user.can_create_project?
-    %span.right
-      = link_to new_project_path, :class => "btn small" do 
-        New Project
-%hr
 - unless @projects.empty?
   .row
-    .span5
-      %div.content_list.projects_list
+    .span4
+      %div.leftbar.ui-box
+        %h5
+          Projects
+          - if current_user.can_create_project?
+            %span.right
+              = link_to new_project_path, :class => "btn very_small info" do 
+                New Project
+        .content_list
           - @projects.each do |project|
             = link_to project_path(project), :remote => true, :class => dom_class(project) do
               %h4
                 %span.ico.project
-              = truncate(project.name, :length => 26)
-    .span11.right.show_holder
+                = truncate(project.name, :length => 22)
+    .span12.right
+      .show_holder.ui-box.padded
         .loading
 
 - else