profile photos as thumbnails

app/assets/stylesheets/stream_element.css.scss

@@ -1,8 +1,5 @@
 #main_stream .stream_element,
 #main_stream > div > .photo {
-  border-bottom: 1px solid $border-grey;
-  padding: 10px;
-
   & > .media {
     margin: 0px;
   }
@@ -12,7 +9,42 @@
   }
 }
 
+#main_stream > div > .photo {
+  & > .media {
+    overflow: visible;
+    > .bd {
+      position: relative;
+      overflow: inherit;
+      > .controls {
+        position: absolute;
+        right: 6px;
+        top: 1px;
+        width: 15px;
+        height: 15px;
+        text-align: center;
+        line-height: 15px;
+      }
+    }
+    &:hover > .bd > .controls { background: #fff; }
+  }
+  .thumbnail {
+    height: 200px;
+    padding: 10px;
+    margin: 0 5px 10px;
+    text-align: center;
+    line-height: 200px;
+    border: 1px solid $border-grey;
+    background: #fefefe;
+    box-shadow: 3px 3px 2px #eee;
+    img { 
+      &.big_photo { max-height: 200px; } 
+    }
+  }
+}
+
 #main_stream .stream_element {
+  border-bottom: 1px solid $border-grey;
+  padding: 10px;
   & > .media {
     & > .img > .avatar.small {
       height: 50px;

app/assets/templates/photo_tpl.jst.hbs

@@ -1,4 +1,4 @@
-<div class="media">
+<div class="media span4">
   <div class="bd">
     {{#if loggedIn}}
       <div class="controls">
@@ -20,10 +20,11 @@
       </div>
     {{/if}}
   
-  <a href="#" class="photo-link">
-    <img src="{{sizes.large}}" class="photo big_photo" data-small-photo="{{sizes.small}}" data-full-photo="{{sizes.large}}" rel="lightbox">
-  </a>
-
+    <div class="thumbnail">
+      <a href="#" class="photo-link">
+        <img src="{{sizes.large}}" class="photo big_photo" data-small-photo="{{sizes.small}}" data-full-photo="{{sizes.large}}" rel="lightbox">
+      </a>
+    </div>
  
 
-</div>
+</div>

features/step_definitions/profile_steps.rb

@@ -7,7 +7,7 @@ And /^I mark myself as safe for work$/ do
 end
 
 When(/^I delete a photo$/) do
-  find('.photo.loaded').hover
+  find('.photo.loaded .thumbnail', :match => :first).hover
   find('.delete', :match => :first).click
 end