improved animations

app/views/aspects/manage.html.haml

@@ -18,7 +18,7 @@
   .requests
     %ul.dropzone
       - if @remote_requests.size < 1
-        %li.grey No new requests
+        %li No new requests
       - else
         - for request in @remote_requests
           %li.person.request{:data=>{:guid=>request.id, :person_id=>request.person.id}}
@@ -27,7 +27,8 @@
   %h3 Remove from Aspect
   .aspect_remove
     %ul.dropzone
-      %li.grey Drag to remove person from aspect
+      .draggable_info
+        Drag to remove person from aspect
 
   = render 'shared/invitations', :invites => @invites
 
@@ -47,18 +48,15 @@
             %li!= remove_link(aspect)
 
         %ul.dropzone{:data=>{:aspect_id=>aspect.id}}
-
-          -if aspect.people.size < 1
-            %li.grey Drag to add people
-
-          -else
-            -for person in aspect.people
-              %li.person{:data=>{:guid=>person.id, :aspect_id=>aspect.id}}
-                .delete
-                  .x
-                    X
-                  .circle
-                = person_image_tag(person)
+          -for person in aspect.people
+            %li.person{:data=>{:guid=>person.id, :aspect_id=>aspect.id}}
+              .delete
+                .x
+                  X
+                .circle
+              = person_image_tag(person)
+          .draggable_info
+            Drag to add people
 
 
 

public/javascripts/aspect-edit.js

@@ -21,8 +21,17 @@ function decrementRequestsCounter() {
 
 // Dragging person between aspects
 $(function() {
-  $("ul .person").draggable({ revert: true });
-  $("ul .requested_person").draggable({ revert: true });
+  $("ul .person").draggable({
+    revert: true,
+    start: function(event,ui){
+      $(this).children("img").animate({'height':80, 'width':80, 'opacity':0.8},200);
+      $(".draggable_info").fadeIn(100);
+    },
+    stop: function(event,ui){
+      $(this).children("img").animate({'height':70, 'width':70, 'opacity':1},200);
+      $(".draggable_info").fadeOut(100);
+    }
+  });
 
   $(".aspect ul.dropzone").droppable({
     hoverClass: 'active',

public/stylesheets/sass/application.sass

@@ -943,12 +943,12 @@ h1.big_text
 .aspect_remove
   :list
     :style none
-  .grey
-    :color #999
-    :cursor default
-    :text-shadow 0 1px #fff
+  :color #999
+  :cursor default
+  :text-shadow 0 1px #fff
 
   ul.dropzone
+    :position relative
     :min-height 20px
     :margin 0
       :bottom 25px
@@ -966,6 +966,16 @@ h1.big_text
       :background
         :color rgba(255,252,127,0.2)
 
+    .draggable_info
+      :position absolute
+      :display none
+      :right 15px 
+      :bottom 10px 
+      :font
+        :style italic
+        :size 14px
+      :color #aaa
+
   .person
     :display inline-block
     :cursor move
@@ -991,7 +1001,6 @@ h1.big_text
       img
         :-webkit-box-shadow 0 1px 3px #000
         :-moz-box-shadow 0 2px 4px #000
-        :opacity 0.9
 
       .delete
         :display none