Merge pull request #5521 from arlogn/profile-photos-as-thumbnails

profile photos as thumbnails

Changelog.md

@@ -95,6 +95,7 @@ diaspora.yml file**. The existing settings from 0.4.x and before will not work a
 * Use sentence case consistently throughout UI [#5588](https://github.com/diaspora/diaspora/pull/5588)
 * Hide sign up button when registrations are disabled [#5612](https://github.com/diaspora/diaspora/pull/5612)
 * Standardize capitalization throughout the UI [#5588](https://github.com/diaspora/diaspora/pull/5588)
+* Display photos on the profile page as thumbnails [#5521](https://github.com/diaspora/diaspora/pull/5521)
 
 ## Bug fixes
 * orca cannot see 'Add Contact' button [#5158](https://github.com/diaspora/diaspora/pull/5158)

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,10 @@
       </div>
     {{/if}}
 
-  <a href="#" class="photo-link">
+    <div class="thumbnail">
-    <img src="{{sizes.large}}" class="photo big_photo" data-small-photo="{{sizes.small}}" data-full-photo="{{sizes.large}}" rel="lightbox">
+      <a href="#" class="photo-link">
-  </a>
+        <img src="{{sizes.large}}" class="photo big_photo" data-small-photo="{{sizes.small}}" data-full-photo="{{sizes.large}}" rel="lightbox">
-
+      </a>
- 
+    </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