diff --git a/app/views/shared/_stream_element.haml b/app/views/shared/_stream_element.haml index 2a8f059f5..f0cc61278 100644 --- a/app/views/shared/_stream_element.haml +++ b/app/views/shared/_stream_element.haml @@ -19,12 +19,14 @@ - if post.public? %span.arrow ➔ - %span.aspect_badge.public - = t('the_world') + %span.aspect_badges + %span.aspect_badge.public + = t('the_world') - elsif person.owner_id == current_user.id %span.arrow ➔ - = aspect_badges(aspects_with_post(all_aspects, post)) + %span.aspect_badges + = aspect_badges(aspects_with_post(all_aspects, post)) = render 'status_messages/status_message', :post => post, :photos => photos diff --git a/public/javascripts/stream.js b/public/javascripts/stream.js index 47e9e171c..7998bd374 100644 --- a/public/javascripts/stream.js +++ b/public/javascripts/stream.js @@ -51,15 +51,20 @@ var Stream = { // fade in controls $stream.delegate(".stream_element", "mouseenter", function(evt) { - var element = $(this), - controls = element.find('.controls'); + var controls = $(this).find('.controls'), + badges = $(this).find('.aspect_badges'); + controls.fadeIn(100); + controls.fadeIn(100); + badges.fadeTo(100,1); }); $stream.delegate(".stream_element", "mouseleave", function(evt) { - var element = $(this), - controls = element.find('.controls'); + var controls = $(this).find('.controls'), + badges = $(this).find('.aspect_badges'); + controls.show() - .fadeOut(100); + .fadeOut(50); + badges.fadeTo(50,0.5); }); // reshare button action diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index 290386158..aee9958cd 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -2050,6 +2050,14 @@ h3,h4 .avatar :float left .arrow, + + .stream_element + .aspect_badges + :opacity 0.5 + &:hover + .aspect_badges + :opacity 1 + .aspect_badge :position relative :margin