diff --git a/app/views/groups/edit.html.haml b/app/views/groups/edit.html.haml index 3b69a93fa3b151b6d095b05798f554d7820b7988..c59157f481b379234325baf4c78e9dea0c07b3b7 100644 --- a/app/views/groups/edit.html.haml +++ b/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" diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index dc687861f63e33ba2c071828b5836c63ca23fdf7..d3c7e06fa4ea2dc8c273fcf288d48bacfa2c5f1a 100644 --- a/app/views/layouts/application.html.haml +++ b/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 diff --git a/app/views/shared/_group_nav.haml b/app/views/shared/_group_nav.haml index 730672333f6771b8f00a180497c4f0e504840249..5c07b6e83a24d15cb184cf72600edf6a4d84f55b 100644 --- a/app/views/shared/_group_nav.haml +++ b/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 diff --git a/public/javascripts/view.js b/public/javascripts/view.js index fbe84aac842911e8379ae5107fd6b8b48f169cba..8b4c44134ef5bc6aa5dd0edc368fc2fa99c9d2c6 100644 --- a/public/javascripts/view.js +++ b/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( diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index 1bc9132e6b82172f9a22b0e3d619cb78183c7760..9e2777f40130ca208f1458477653d5cb4f8f53dd 100644 --- a/public/stylesheets/application.css +++ b/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; diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index 4b23cecfc77957a38c63638d09e0a1eb78a8163a..2c6c4be5a6480193a516f1ab62a7aa44341ad503 100644 --- a/public/stylesheets/sass/application.sass +++ b/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