DG IZ; groups = relations. now you can rename groups in the manage relation page

app/views/groups/edit.html.haml

@@ -2,15 +2,18 @@
   = javascript_include_tag 'jquery-ui-1.8.4.custom.min.js'
   = javascript_include_tag 'group-edit.js'
 
+- content_for :left_pane do
+  requests
+
 %h1{:class => 'big_text', :id => 'group_title'}
-  = "Editing Groups"
+  = "Managing Relations"
 
 %ul#group_list
 
 - for group in @groups
 
   %li.group
-    %h3= group.name
+    %h3{:contenteditable => true}= group.name
 
     %ul{:id => group.id}
       -if group.people.size < 1
@@ -20,8 +23,9 @@
         -for person in group.people
 
           %li.person{:id => person.id, :from_group_id => group.id}
-            = image_tag(person.profile.image_url(:thumb_small),:size => "30x30") unless person.profile.image_url.nil?
-            = person.real_name
+            = image_tag(person.profile.image_url(:thumb_small)) unless person.profile.image_url.nil?
+            .name
+              = person.real_name
 %p
   %br
   = link_to 'Update Groups', '#', :class => 'button', :id => "move_friends_link"

app/views/layouts/application.html.haml

@@ -60,7 +60,7 @@
           .span-5.last
             - if @group == :all
               %h1
-                = link_to "All Groups", root_path
+                = link_to "All Relations", root_path
             - else
               %h1
                 = link_to @group.name, @group
@@ -73,7 +73,6 @@
 
     .container
       .span-5.last
-
         = yield :left_pane
 
       .span-19.last

app/views/shared/_group_nav.haml

@@ -7,12 +7,12 @@
 
     %li.new_group= link_to("+", "#add_group_pane", :id => "add_group_button")
 
-    #group_edit_button
-      = link_to "edit", edit_group_path(Group.first), :class => "edit_group_button", :title => "Manage your facets."
+    #group_manage_button
+      = link_to "manage", edit_group_path(Group.first), :class => "edit_group_button", :title => "Manage your facets."
 
   %ul{ :style => "position:absolute;right:0;bottom:0;"}
     %li{:class => ("selected" if @group == :all)}
-      = link_to "All Groups", root_url
+      = link_to "All Relations", root_url
 
   .yo{ :style => "display:none;"}
     #add_group_pane

public/javascripts/view.js

@@ -24,8 +24,35 @@ $(document).ready(function(){
   $(".image_cycle img").load( function() {
     $(this).fadeIn("slow");
   });
+
 });//end document ready
 
+$(".group h3").live( 'click', function() {
+
+  var $this = $(this);
+  var id    = $this.closest("li").children("ul").attr("id");
+  var link  = "/groups/"+ id;
+
+  $this.keypress(function(e) {
+    if (e.which == 13) {
+      e.preventDefault();
+      $this.blur();
+
+      //save changes
+      $.ajax({
+        type: "PUT",
+        url: link,
+        data: {"group" : {"name" : $this.text() }}
+      });
+    }
+    //update all other group links
+    $this.keyup(function(e) {
+      $("a[href='"+link+"']").text($this.text());
+    });
+  });
+});
+
+
 function pane_toggler_button( name ) {
   
     $("#add_" + name + "_button").toggle(

public/stylesheets/application.css

@@ -453,11 +453,11 @@ h1.big_text {
 #group_nav {
   position: relative;
   color: black; }
-  #group_nav #group_edit_button {
+  #group_nav #group_manage_button {
     display: inline;
     margin-top: 1px;
     font-size: 12px; }
-    #group_nav #group_edit_button a {
+    #group_nav #group_manage_button a {
       color: #999999; }
   #group_nav ul {
     margin-bottom: 0;
@@ -588,6 +588,8 @@ h1.big_text {
 
 .group {
   list-style: none; }
+  .group h3 {
+    display: inline-block; }
   .group ul {
     min-height: 20px;
     margin: 0;
@@ -598,11 +600,22 @@ h1.big_text {
     border-radius: 3px;
     list-style: none;
     padding: 15px; }
-    .group ul li {
+    .group ul li.person {
+      display: inline-block;
       margin-left: 0;
       padding: 5px;
-      cursor: move; }
-      .group ul li img {
+      cursor: move;
+      margin: 5px;
+      background-color: #cccccc;
+      -webkit-border-radius: 3px;
+      text-align: center;
+      width: 75px;
+      height: 75px;
+      padding: 5px;
+      border: 1px solid #999999; }
+      .group ul li.person img {
+        height: 50px;
+        width: 50px;
         display: inline-block; }
     .group ul .grey {
       font-style: italic;

public/stylesheets/sass/application.sass

@@ -579,7 +579,7 @@ h1.big_text
   :color #000
 
 
-  #group_edit_button
+  #group_manage_button
     :display inline
     :margin
       :top 1px
@@ -770,6 +770,10 @@ h1.big_text
 .group
   :list
     :style none
+
+  h3
+    :display inline-block
+
   ul
     :min-height 20px
     :margin 0
@@ -784,15 +788,33 @@ h1.big_text
       :style none
     :padding 15px
 
-    li
+    li.person
+      :display inline-block
       :margin
         :left 0
       :padding 5px 
       :cursor move
+      :margin 5px
+
+      :background
+        :color #ccc
+      :-webkit-border-radius 3px
+
+      :text
+        :align center
+
+      :width 75px
+      :height 75px
+      :padding 5px
+
+      :border 1px solid #999
 
       img
+        :height 50px
+        :width 50px
         :display inline-block
 
+
     .grey
       :font
         :style italic