fade in like action for comments

demirkapi · Jul 11, 2011 · 58e844e · 58e844e
1 parent 0e664b2
commit 58e844e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/app/views/comments/_comment.html.haml b/app/views/comments/_comment.html.haml
@@ -19,14 +19,10 @@
     .comment_info
       %time.timeago{:datetime => comment.created_at}
         = comment.created_at ? timeago(comment.created_at) : timeago(Time.now)
-      ·
 
       .likes
         = render "likes/likes_container", :target_id => comment.id, :likes_count => comment.likes_count
 
-      - if comment.likes_count > 0
-        ·
-
       - unless (defined?(@commenting_disabled) && @commenting_disabled)
         %span.like_action
           = like_action(comment, current_user)

diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
@@ -448,7 +448,7 @@ ul.as-selections
           :top -1px
 
   .delete
-    @include opacity(0.6)
+    @include opacity(0.3)
     :padding 5px
 
     &:hover
@@ -459,7 +459,8 @@ ul.as-selections
     :right 12px
 
   .controls
-    :display none
+    @include transition(opacity)
+    @include opacity(0)
     :z-index 6
     :color #999
     a
@@ -469,7 +470,7 @@ ul.as-selections
 
   &:hover, .comment:hover
     > .controls
-      :display inline
+      @include opacity(1)
 
     .from
       a
@@ -668,6 +669,17 @@ form.new_comment
 
 
 .comment
+  .like_action
+    @include transition(opacity)
+    @include opacity(0)
+
+    &:before
+      :content " · "
+
+  &:hover
+    .like_action
+      @include opacity(1)
+
   .likes,
   .likes_container
     :display inline
@@ -685,6 +697,11 @@ form.new_comment
       :width 9px
       :top 1px
 
+  .likes
+    :margin
+      :left 5px
+
+
 .stream.show
   ul.comments
     li