removed ignore bucket. people now have x's to delete them

app/views/aspects/manage.html.haml

@@ -31,11 +31,6 @@
     %ul.dropzone
       %li.grey Drag to remove person from aspect
 
-  %h3=t('.ignore_remove')
-  .remove
-    %ul.dropzone
-      %li.grey Drag to ignore/remove
-
   = render 'shared/invitations', :invites => @invites
 
 .span-19.last
@@ -61,9 +56,11 @@
             -for person in aspect.people
 
               %li.person{:id => person.id, :class => person.id, :from_aspect_id => aspect.id}
+                .delete
+                  .x
+                    X
+                  .circle
                 = person_image_tag(person)
-                .name
-                  = link_to person.real_name, person
 
           .fancybox_content
             %div{:id => "add_request_pane_#{aspect.id}"}

public/javascripts/aspect-edit.js

@@ -47,9 +47,9 @@ $(function() {
         var dropzone = $(this)[0];
 
         if ($(this)[0].id == ui.draggable[0].getAttribute('from_aspect_id')){
-          ui.draggable.css('background-color','#333');
+          ui.draggable.css('background','none');
         } else {
-          ui.draggable.css('background-color','orange');
+          ui.draggable.css('background','none');
           $.ajax({
             url: "/aspects/move_friend/",
             data: {"friend_id" : ui.draggable[0].id,
@@ -57,7 +57,7 @@ $(function() {
                    "to" : { "to" : dropzone.id }},
             success: function(data){
               ui.draggable.attr('from_aspect_id', dropzone.id);
-              ui.draggable.css('background-color','#333');
+              ui.draggable.css('background','none');
             }});
 
         }
@@ -65,35 +65,6 @@ $(function() {
     }
   });
 
-  $(".remove ul").droppable({
-    hoverClass: 'active',
-    drop: function(event, ui) {
-
-      if ($(ui.draggable[0]).hasClass('requested_person')){
-        $.ajax({
-          type: "DELETE",
-          url: "/requests/" + ui.draggable.attr('request_id'),
-          success: function () {
-            decrementRequestsCounter();
-          }
-        });
-
-      } else {
-        $.ajax({
-          type: "DELETE",
-          url: "/people/" + ui.draggable.attr('id'),
-          success: function () {
-            alert("Removed Friend, proably want an undo countdown.")
-          }
-        });
-
-      }
-
-      $(ui.draggable[0]).fadeOut('slow'); 
-      $(ui.draggable[0]).remove();
-    }
-  });
-
   $(".aspect_remove ul").droppable({
     hoverClass: 'active',
     drop: function(event, ui) {
@@ -114,11 +85,7 @@ $(function() {
         }
       $(ui.draggable[0]).fadeOut('slow'); 
       $(ui.draggable[0]).remove();
-
-
       }
-
-
     }
   });
 
@@ -147,5 +114,39 @@ $(function() {
       });
     });
   });
-
 });
+
+
+//deletion
+$(".delete").live("click", function() {
+
+  var person = $(this).closest("li.person");
+      request_id = person.attr("request_id");
+
+  if (request_id){
+    if( confirm("Remove this person from all aspects?") ){
+      $.ajax({
+        type: "DELETE",
+        url: "/requests/" + request_id,
+        success: function () {
+          decrementRequestsCounter();
+        }
+      });
+    }
+
+  } else {
+    if( confirm("Remove this person from all aspects?") ){
+
+      var person_id = $(this).closest("li.person").attr('id');
+
+      $.ajax({
+        type: "DELETE",
+        url: "/people/" + person_id,
+        success: function() {
+          person.fadeOut(200);
+        }
+      });
+    }
+  }
+});
+

public/stylesheets/sass/application.sass

@@ -968,39 +968,71 @@ h1.big_text
   .person,
   .requested_person
     :display inline-block
-    :padding 5px
     :cursor move
-    :margin 5px
     :z-index 10
+    :position relative
+    :padding 0
+    :margin 0
 
-    :width 110px
-
-    :background
-      :color #333
-
-    :border-radius 5px
-    :color #ccc
-  
-    a
-      :color #ccc
+    :color #eee
 
     img
-      :height 40px
-      :width 40px
-      :display inline
+      :height 70px
+      :width 70px
+      :border-radius 5px
 
-    .name
-      :display inline
-      :top 0
-      :margin
-        :left 5px
+    &:hover
+      .delete
+        :display inline
 
     &:active
       :z-index 20
-      :color #666
-      :-webkit-box-shadow 0 1px 3px #000
-      :-moz-box-shadow 0 2px 4px #000
-      :opacity 0.9
+      img
+        :-webkit-box-shadow 0 1px 3px #000
+        :-moz-box-shadow 0 2px 4px #000
+        :opacity 0.9
+
+      .delete
+        :display none
+
+    .delete
+      :display none
+
+      :position absolute
+      :top -8px
+      :left -8px
+
+      .circle
+        :z-index 1
+        :position absolute
+        :background
+          :color #333
+
+        :width 20px
+        :max-width 20px
+        :height 20px
+        :max-height 20px
+
+        :border 1px solid #fff
+
+        :-webkit-border-radius 20px
+        :-moz-border-radius 20px
+        :border-radius 20px
+
+        :-webkit-box-shadow 0 1px 3px #000
+
+      .x
+        :z-index 2
+        :position absolute
+        :top 2px
+        :left 7px
+
+      &:hover
+        :cursor default
+        .circle
+          :background
+            :color rgba(208,49,43,1)
+
 
 ul#settings_nav
   :display inline