redesign outfits#index with thumbnails

app/stylesheets/outfits/_edit.sass

@@ -3,6 +3,7 @@
 
 @import "partials/context_button"
 @import "partials/icon"
+@import "partials/outfit"
 @import star
 
 $object-padding: 6px
@@ -396,11 +397,11 @@ body.outfits-edit
     $outfit-margin: 1px
     $outfit-outer-size: $outfit-inner-size + ($outfit-margin * 2)
     > ul
+      +outfits-list
       +sidebar-view-child
       background: image-url("loading.gif") no-repeat center top
       display: none
       font-family: $main-font
-      list-style: none
       margin: 0 auto 1em
       min-height: 16px
       width: $outfit-outer-size * 3
@@ -409,13 +410,9 @@ body.outfits-edit
         background: transparent
       
       > li
-        +inline-block
-        +outfit-star
         height: $outfit-inner-size
         margin: $outfit-margin
         width: $outfit-inner-size
-        overflow: hidden
-        position: relative
         
         $outfit-header-h-padding: 4px
         $outfit-header-v-padding: 2px
@@ -423,17 +420,9 @@ body.outfits-edit
         $outfit-header-inner-height: 12px
         $outfit-header-outer-height: $outfit-header-inner-height + (2 * $outfit-header-v-padding)
         header, footer, .outfit-delete-confirmation
-          color: white
           font-size: $outfit-header-inner-height
-          left: 0
           padding: $outfit-header-v-padding $outfit-header-h-padding
-          position: absolute
           width: $outfit-header-inner-width
-          z-index: 2
-        
-        header, footer
-          background: black
-          background: rgba(0, 0, 0, 0.75)
         
         header
           +opacity(0.75)
@@ -442,11 +431,10 @@ body.outfits-edit
         
         footer, .outfit-delete-confirmation
           display: none
-          top: 0
         
         .outfit-delete-confirmation
-          background: red
+          +outfit-banner
-          background: rgba(255, 50, 50, 0.75)
+          +outfit-banner-background(rgb(255, 50, 50))
           text-align: center
           top: 0
           
@@ -458,12 +446,9 @@ body.outfits-edit
         $outfit-thumbnail-v-offset: $outfit-thumbnail-h-offset - ($outfit-header-outer-height / 4)
         .outfit-thumbnail
           +opacity(.5)
-          cursor: pointer
           display: none
           left: $outfit-thumbnail-h-offset
-          position: absolute
           top: $outfit-thumbnail-v-offset
-          z-index: 1
         
         .outfit-star
           bottom: 0
@@ -490,9 +475,6 @@ body.outfits-edit
             border: 1px solid white
             width: 6em
         
-        a
-          color: white
-        
         &:hover
           header
             +opacity(1)

app/stylesheets/outfits/_index.sass

@@ -1,27 +1,55 @@
+@import "partials/outfit"
 @import star
 
+$outfit-inner-height: 150px
+$outfit-inner-width: 150px
+$outfit-banner-h-padding: 4px
+$outfit-banner-v-padding: 2px
+$outfit-banner-inner-width: $outfit-inner-width - (2 * $outfit-banner-h-padding)
+
 body.outfits-index
   #outfits
-    list-style: none
+    +outfits-list
     
-    li
+    > li
-      +outfit-star
+      height: $outfit-inner-height
-      clear: left
+      margin: 2px
-      float: left
+      width: $outfit-inner-width
-      margin-bottom: .5em
       
-    h4
+      header, footer
-      float: left
+        padding: $outfit-banner-v-padding $outfit-banner-h-padding
-      width: 12em
+        width: $outfit-banner-inner-width
       
-    .outfit-edit-link, form
+      footer
-      float: left
+        display: none
-      font-size: 85%
-      margin-left: 1em
         
-    .outfit-edit-link
+        .outfit-edit-link
-      +awesome-button
+          float: left
+          text-decoration: none
+        
+        form
+          float: right
+          
+          .outfit-delete-button
+            margin: 0
+            padding: 0
+        
+        .outfit-edit-link, .outfit-delete-button
+          &:hover
+            text-decoration: underline
+      
+      .outfit-star
+        cursor: auto
+      
+      .outfit-name
+        text-decoration: none
+        
+        &:hover
+          text-decoration: underline
+      
+      &:hover
+        footer
+          display: block
     
     .outfit-delete-button
-      margin: 0
+      +reset-awesome-button
-

app/stylesheets/partials/_outfit.sass

@@ -0,0 +1,42 @@
+=outfit
+  +inline-block
+  +outfit-star
+  overflow: hidden
+  position: relative
+  
+  header, footer
+    +outfit-banner
+    +outfit-banner-background(black)
+  
+  header
+    bottom: 0
+  
+  footer
+    top: 0
+  
+  .outfit-thumbnail
+    cursor: pointer
+    position: absolute
+    z-index: 1
+  
+  a
+    color: white
+
+=outfits-list
+  // remove whitespace between inline-block elements
+  font-size: 0
+  list-style: none
+  
+  > li
+    +outfit
+    font-size: 14px
+
+=outfit-banner
+  color: white
+  left: 0
+  position: absolute
+  z-index: 2
+
+=outfit-banner-background($color)
+  background: $color
+  background: rgba($color, 0.75)

app/views/outfits/_outfit.html.haml

@@ -1,6 +1,14 @@
 = outfit_li_for(outfit) do
-  .outfit-star
+  - if outfit.image?
-  %h4= link_to outfit.name, outfit
+    = link_to image_tag(outfit.image.small.url), outfit
-  = link_to_edit_outfit 'Edit', outfit, :class => 'outfit-edit-link'
+  
-  = button_to('Delete', outfit, :method => 'delete', :class => 'outfit-delete-button', :confirm => "Are you sure you want to delete the outfit #{outfit.name}?")
+  %header
+    .outfit-star
+    = link_to outfit.name, outfit, :class => 'outfit-name'
+  
+  %footer
+    = link_to_edit_outfit 'edit', outfit, :class => 'outfit-edit-link'
+    = button_to 'delete', outfit, :method => 'delete', :class => 'outfit-delete-button', :confirm => "Are you sure you want to delete the outfit #{outfit.name}?"
+  
+