Merge pull request #6621 from Fensterbank/6610-improved-gallery

add a card footer in gallery containing meta data and link to single post view

app/assets/stylesheets/_application.scss

@@ -22,6 +22,7 @@
 @import 'vendor/autoSuggest';
 @import 'typeahead';
 @import 'colors';
+@import 'card-footer';
 
 /* font overrides */
 @import 'typography';

app/assets/stylesheets/card-footer.scss

@@ -0,0 +1,29 @@
+.card-footer {
+  background-color: $background-grey;
+  border-top: 1px solid $border-medium-grey;
+  bottom: 0;
+  font-size: $font-size-small;
+  left: 0;
+  line-height: $line-height-computed;
+  margin-left: 0;
+  min-height: $line-height-computed + 1;
+  position: absolute;
+  width: 100%;
+
+  .footer-container {
+    padding: 1px 5px;
+
+    a {
+      color: $text-grey;
+      font-weight: normal;
+      margin-right: 4px;
+    }
+  }
+}
+
+// gallery-picture specific styles for card-footer
+.media {
+  .gallery-picture img { margin-bottom: $line-height-computed + 2; }
+
+  .card-footer .footer-container {  font-size: $font-size-base; }
+}

app/assets/stylesheets/color-variables.scss

@@ -16,6 +16,7 @@ $light-grey: #ddd;
 $border-grey: $light-grey;
 $border-medium-grey: $medium-gray;
 $border-dark-grey: $text-grey;
+$border-medium-grey: #ccc;
 
 $link-grey: #777;
 $link-disabled-grey: $text-grey;

app/assets/stylesheets/hovercard.scss

@@ -26,11 +26,14 @@
 
   $image_width: 80px; /* including margin */
 
-  & > h4, & > div {
+  > h4,
+  > div:not(.card-footer) {
     margin-left: $image_width;
   }
 
-  & > h4, & > div, .hashtags {
+  > h4,
+  > div,
+  .hashtags {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -64,32 +67,6 @@
   }
 
   .btn-group.aspect_membership_dropdown { margin: 0 !important; }
-
-  .hovercard_footer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    background-color: $background-grey;
-    margin-left: 0;
-
-    width: 100%;
-    min-height: 19px;
-
-    font-size: 10px;
-    line-height: 18px;
-
-    border-top: 1px solid #cccccc;
-
-    .footer_container {
-      padding: 1px 5px;
-
-      a {
-        color: $text-grey;
-        margin-right: 4px;
-        font-weight: normal;
-      }
-    }
-  }
 }
 
 #hovercard_container {

app/assets/stylesheets/media-box.scss

@@ -1,4 +1,7 @@
-.media { margin: 10px; }
+.media {
+  margin: 10px;
+  position: relative;
+}
 
 .media,
 .bd {
@@ -10,8 +13,8 @@
 .media .img {
   float: left;
   margin-right: 10px;
+
+  img { display: block; }
 }
 
-.media .img img { display: block }
 .media .imgEt { float: right; margin-left: 10px; }
-

app/assets/templates/hovercard_tpl.jst.hbs

@@ -7,8 +7,8 @@
   </h4>
   <div class="handle"></div>
   <div id="hovercard_dropdown_container"></div>
-  <div class="hovercard_footer">
+  <div class="card-footer">
-    <div class="footer_container">
+    <div class="footer-container">
       <div class="hashtags"></div>
     </div>
   </div>

app/assets/templates/photo_tpl.jst.hbs

@@ -26,4 +26,15 @@
       </a>
     </div>
   </div>
+  <div class="card-footer">
+    <div class="footer-container">
+      {{#if status_message}}
+        <a href="{{urlTo "post" status_message.id}}">
+          <time class="timeago" data-original-title="{{{localTime created_at}}}" datetime="{{created_at}}" />
+        </a>
+      {{else}}
+          <time class="timeago" data-original-title="{{{localTime created_at}}}" datetime="{{created_at}}" />
+      {{/if}}
+    </div>
+  </div>
 </div>

app/models/photo.rb

@@ -15,14 +15,23 @@ class Photo < ActiveRecord::Base
     t.add :created_at
     t.add :author
     t.add lambda { |photo|
-      { :small => photo.url(:thumb_small),
+      {
-        :medium => photo.url(:thumb_medium),
+        small:  photo.url(:thumb_small),
-        :large => photo.url(:scaled_full) }
+        medium: photo.url(:thumb_medium),
+        large:  photo.url(:scaled_full)
+      }
     }, :as => :sizes
     t.add lambda { |photo|
-      { :height => photo.height,
+      {
-        :width => photo.width }
+        height: photo.height,
-    }, :as => :dimensions
+        width:  photo.width
+      }
+    }, as: :dimensions
+    t.add lambda { |photo|
+      {
+        id: photo.status_message.id
+      } if photo.status_message
+    }, as: :status_message
   end
 
   mount_uploader :processed_image, ProcessedImage