From 43a2a5c336f5c435e6d4326c8dd4a0b2b649e2cf Mon Sep 17 00:00:00 2001
From: arlogn <claudio@bastardi.net>
Date: Sun, 4 Jan 2015 02:33:17 +0100
Subject: [PATCH] profile photos as thumbnails

---
 .../stylesheets/stream_element.css.scss       | 38 +++++++++++++++++--
 app/assets/templates/photo_tpl.jst.hbs        | 13 ++++---
 features/step_definitions/profile_steps.rb    |  2 +-
 3 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/stream_element.css.scss b/app/assets/stylesheets/stream_element.css.scss
index 33a2f031f..b2cdec0fd 100644
--- a/app/assets/stylesheets/stream_element.css.scss
+++ b/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;
diff --git a/app/assets/templates/photo_tpl.jst.hbs b/app/assets/templates/photo_tpl.jst.hbs
index 534b9b998..4898c44be 100644
--- a/app/assets/templates/photo_tpl.jst.hbs
+++ b/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>
\ No newline at end of file
+</div>
diff --git a/features/step_definitions/profile_steps.rb b/features/step_definitions/profile_steps.rb
index 7fdc31ba1..60fd76f6d 100644
--- a/features/step_definitions/profile_steps.rb
+++ b/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