diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss index 32d257b56..f7542f950 100644 --- a/app/assets/stylesheets/_application.scss +++ b/app/assets/stylesheets/_application.scss @@ -22,6 +22,7 @@ @import 'vendor/autoSuggest'; @import 'typeahead'; @import 'colors'; +@import 'card-footer'; /* font overrides */ @import 'typography'; diff --git a/app/assets/stylesheets/card-footer.scss b/app/assets/stylesheets/card-footer.scss new file mode 100644 index 000000000..118c8c92f --- /dev/null +++ b/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; } +} diff --git a/app/assets/stylesheets/color-variables.scss b/app/assets/stylesheets/color-variables.scss index f0ee2876e..a4c9f7e41 100644 --- a/app/assets/stylesheets/color-variables.scss +++ b/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; diff --git a/app/assets/stylesheets/hovercard.scss b/app/assets/stylesheets/hovercard.scss index f7b69b378..1cf9ae620 100644 --- a/app/assets/stylesheets/hovercard.scss +++ b/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 { diff --git a/app/assets/stylesheets/media-box.scss b/app/assets/stylesheets/media-box.scss index 2c11626d9..f35c73e4c 100644 --- a/app/assets/stylesheets/media-box.scss +++ b/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; } - diff --git a/app/assets/templates/hovercard_tpl.jst.hbs b/app/assets/templates/hovercard_tpl.jst.hbs index 32908a080..c95ef3e94 100644 --- a/app/assets/templates/hovercard_tpl.jst.hbs +++ b/app/assets/templates/hovercard_tpl.jst.hbs @@ -7,8 +7,8 @@
- + diff --git a/app/models/photo.rb b/app/models/photo.rb index f38263620..c66187f34 100644 --- a/app/models/photo.rb +++ b/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), - :large => photo.url(:scaled_full) } + { + small: photo.url(:thumb_small), + medium: photo.url(:thumb_medium), + large: photo.url(:scaled_full) + } }, :as => :sizes t.add lambda { |photo| - { :height => photo.height, - :width => photo.width } - }, :as => :dimensions + { + height: photo.height, + 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