made group manage a little nicer

app/views/aspects/manage.html.haml

@@ -22,7 +22,7 @@
   = javascript_include_tag 'aspect-edit.js'
 
 - content_for :left_pane do
-  %h3
+  %h1
     Requests
 
   .requests
@@ -46,7 +46,14 @@
 %ul#aspect_list
   - for aspect in @aspects
     %li.aspect
-      %h1{:contenteditable => true}= aspect.name
+      
+      .aspect_name
+        %h1{:contenteditable => true}= aspect.name
+
+        .tools
+          = link_to "add a new friend", "#add_request_pane_#{aspect.id}", :class => 'add_request_button'
+          |
+          = link_to "show", aspect_path(aspect)
       
       %ul{:id => aspect.id}
       
@@ -60,7 +67,6 @@
               = person_image_tag(person)
               .name
                 = person.real_name
-        = link_to (image_tag('add_friend_button.png', :height => "50px", :width => "50px")), "#add_request_pane_#{aspect.id}", :class => 'add_request_button'
         .yo{:style => 'display:none'}
           %div{:id => "add_request_pane_#{aspect.id}"}
             = render "requests/new_request", :aspect => aspect

public/javascripts/aspect-edit.js

@@ -22,7 +22,7 @@ $('#move_friends_link').live( 'click', function(){
     { 'moves' : $('#aspect_list').data() },
     function(){ $('#aspect_title').html("Groups edited successfully!");});
 
-  $(".person").css('background-color','white');
+  $(".person").css('background-color','none');
   $('#aspect_list').removeData();
   $(".person").attr('from_aspect_id', function(){return $(this).parent().attr('id')})
 
@@ -46,7 +46,7 @@ $(function() {
           url: "/requests/" + ui.draggable[0].getAttribute('request_id') ,
           data: {"accept" : true  , "aspect_id" : $(this)[0].id }
         });
-        alert("Sent the ajax, check it out!")
+
       }else {
         var move = {};
         move[ 'friend_id' ] = ui.draggable[0].id
@@ -54,7 +54,7 @@ $(function() {
         move[ 'from' ] = ui.draggable[0].getAttribute('from_aspect_id');
         if (move['to'] == move['from']){
           $('#aspect_list').data( ui.draggable[0].id, []);
-          ui.draggable.css('background-color','white');
+          ui.draggable.css('background-color','#eee');
         } else {
           $('#aspect_list').data( ui.draggable[0].id, move);
           ui.draggable.css('background-color','orange');
@@ -87,7 +87,7 @@ $(function() {
   });
 });
 
-$(".aspect h3").live( 'click', function() {
+$(".aspect h1").live( 'click', function() {
 
   var $this = $(this);
   var id    = $this.closest("li").children("ul").attr("id");
@@ -107,7 +107,7 @@ $(".aspect h3").live( 'click', function() {
     }
     //update all other aspect links
     $this.keyup(function(e) {
-      $("a[href='"+link+"']").text($this.text());
+      $("#aspect_nav a[href='"+link+"']").text($this.text());
     });
   });
 });

public/stylesheets/application.css

@@ -507,10 +507,25 @@ h1.big_text {
 .requests,
 .remove {
   list-style: none; }
-  .aspect h3,
-  .requests h3,
-  .remove h3 {
+  .aspect h1,
+  .requests h1,
+  .remove h1 {
     display: inline-block; }
+  .aspect .aspect_name,
+  .requests .aspect_name,
+  .remove .aspect_name {
+    position: relative; }
+    .aspect .aspect_name .tools,
+    .requests .aspect_name .tools,
+    .remove .aspect_name .tools {
+      position: absolute;
+      top: 10px;
+      right: 0;
+      display: none; }
+    .aspect .aspect_name:hover .tools,
+    .requests .aspect_name:hover .tools,
+    .remove .aspect_name:hover .tools {
+      display: inline; }
   .aspect ul,
   .requests ul,
   .remove ul {
@@ -530,26 +545,38 @@ h1.big_text {
   .remove .person,
   .remove .requested_person {
     display: inline-block;
-    margin-left: 0;
     padding: 5px;
     cursor: move;
     margin: 5px;
-    background-color: #cccccc;
-    -webkit-border-radius: 3px;
+    z-index: 10;
     text-align: center;
-    width: 75px;
-    height: 75px;
-    padding: 5px;
-    border: 1px solid #999999; }
+    width: 125px;
+    height: 120px; }
     .aspect .person img,
     .aspect .requested_person img,
     .requests .person img,
     .requests .requested_person img,
     .remove .person img,
     .remove .requested_person img {
-      height: 50px;
-      width: 50px;
+      height: 100px;
+      width: 100px;
       display: inline-block; }
+    .aspect .person:active,
+    .aspect .requested_person:active,
+    .requests .person:active,
+    .requests .requested_person:active,
+    .remove .person:active,
+    .remove .requested_person:active {
+      color: #666666; }
+      .aspect .person:active img,
+      .aspect .requested_person:active img,
+      .requests .person:active img,
+      .requests .requested_person:active img,
+      .remove .person:active img,
+      .remove .requested_person:active img {
+        -webkit-box-shadow: 0 1px 3px #333333;
+        -moz-box-shadow: 0 2px 4px #333333;
+        opacity: 0.9; }
     .aspect .person .grey,
     .aspect .requested_person .grey,
     .requests .person .grey,

public/stylesheets/sass/application.sass

@@ -688,9 +688,22 @@ h1.big_text
   :list
     :style none
 
-  h3
+  h1
     :display inline-block
 
+  .aspect_name
+    :position relative
+
+    .tools
+      :position absolute
+      :top 10px
+      :right 0
+      :display none
+
+    &:hover
+      .tools
+        :display inline
+
   ul
     :min-height 20px
     :margin 0
@@ -708,30 +721,29 @@ h1.big_text
   .person,
   .requested_person
     :display inline-block
-    :margin
-      :left 0
     :padding 5px 
     :cursor move
     :margin 5px
-
-    :background
-      :color #ccc
-    :-webkit-border-radius 3px
+    :z-index 10
 
     :text
       :align center
 
-    :width 75px
-    :height 75px
-    :padding 5px
-
-    :border 1px solid #999
+    :width 125px
+    :height 120px
 
     img
-      :height 50px
-      :width 50px
+      :height 100px
+      :width 100px
       :display inline-block
 
+    &:active
+      :color #666
+      img
+        :-webkit-box-shadow 0 1px 3px #333
+        :-moz-box-shadow 0 2px 4px #333
+        :opacity 0.9
+
 
     .grey
       :font