reshare dropdown looks nicer. fixed user menu to drop down on click

app/views/shared/_reshare.haml

@@ -2,16 +2,6 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-:javascript
-  $(".reshare_button").toggle(function(e){
-    e.preventDefault();
-    $(this).parent(".reshare_pane").children(".reshare_box").fadeIn(200);
-  }, function(e) {
-    e.preventDefault();
-    $(this).parent(".reshare_pane").children(".reshare_box").fadeOut(200);
-  });
-
-
 - unless current_user.aspects.size == current_user.aspects_with_post(post.id).size
   .reshare_pane
     %span.reshare_button

public/javascripts/stream.js

@@ -29,7 +29,7 @@ $(".show_post_comments").live('click', function(event) {
   $(this).toggleClass( "visible" );
 });
 
-$(".comment_box").live('focus', function(evt){
+$(".comment_box").toggle(function(evt){
   var $this = $(this);
   $this.attr("rows", 2);
   $this.parents("p").parents("form").children("p").children(".comment_submit").fadeIn(200);
@@ -47,3 +47,9 @@ $(".comment_submit").live('click', function(evt){
   $(this).closest("form").children("p .comment_box").attr("rows", 1);
 });
 
+$(".reshare_button").live("click", function(e){
+  e.preventDefault();
+  $(this).parent(".reshare_pane").children(".reshare_box").show();
+  $(this).addClass("active");
+});
+

public/javascripts/view.js

@@ -53,6 +53,21 @@ $(document).ready(function(){
     }
   });
 
+  $("#user_menu").click( function(){
+    $(this).toggleClass("active");
+  });
+
+  $('body').click( function(event){
+    if(!$(event.target).closest('#user_menu').length){
+      $("#user_menu").removeClass("active");
+    };
+    if(!$(event.target).closest('.reshare_box').length){
+      $(".reshare_button").removeClass("active");
+      $(".reshare_box").hide();
+    };
+  });
+
+
 });//end document ready
 
 

public/stylesheets/sass/application.sass

@@ -128,9 +128,9 @@ header
     a
       :text-shadow 0 1px 0 #000
 
+    :width 100px
+
     :z-index 10
-    :font
-      :size 14px
     :padding 5px 10px
       :left 40px
     :margin 0
@@ -152,11 +152,7 @@ header
       a
         :display block
 
-    &:hover
-      li
-        :display block
-
-    &:hover
+    &.active
       :margin
         :top -3px
         :right -6px
@@ -168,6 +164,9 @@ header
       :-webkit-box-shadow 0 1px 2px #333
       :-moz-box-shadow 0 1px 2px #333
 
+      li
+        :display block
+
     .avatar
       :height 20px
       :width 20px
@@ -294,6 +293,16 @@ li.message
       :decoration none
   :cursor default
 
+.right .reshare_pane .reshare_button
+  :padding 5px
+  &.active
+    :background
+      :color #333
+    :border-radius 5px 5px 0 0
+    a
+      :color #fff
+      :text-shadow none
+
 .right .reshare_pane
   :margin
     :left 5px
@@ -301,13 +310,14 @@ li.message
   :display inline
   :position relative
 
+
   ul.reshare_box
     :width 150px
     :display none
     :z-index 10
     :position absolute
     :margin
-      :top 5px
+      :top 0
     :padding 0
 
     :background
@@ -316,9 +326,7 @@ li.message
     :list
       :style none
 
-    :border 5px solid #666
-    :-webkit-box-shadow 0 0 5px #666
-    :-moz-box-shadow 0 0 5px #666
+    :border 5px solid #333
 
     :text-shadow 0 2px #fff
     :color #000