From f2c6e7b820203638363dcdd0be4392a595e70f05 Mon Sep 17 00:00:00 2001 From: Daniel Vincent Grippi Date: Tue, 14 Sep 2010 20:35:30 -0700 Subject: [PATCH] made group manage a little nicer --- app/views/aspects/manage.html.haml | 12 ++++-- public/javascripts/aspect-edit.js | 10 ++--- public/stylesheets/application.css | 51 ++++++++++++++++++------ public/stylesheets/sass/application.sass | 40 ++++++++++++------- 4 files changed, 79 insertions(+), 34 deletions(-) diff --git a/app/views/aspects/manage.html.haml b/app/views/aspects/manage.html.haml index a4a363513..640c545ca 100644 --- a/app/views/aspects/manage.html.haml +++ b/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 diff --git a/public/javascripts/aspect-edit.js b/public/javascripts/aspect-edit.js index 18eafd34b..b21a9dd9f 100644 --- a/public/javascripts/aspect-edit.js +++ b/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()); }); }); }); diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index 2b4494e09..00449e660 100644 --- a/public/stylesheets/application.css +++ b/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, diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index 83c218a40..804c2d3d4 100644 --- a/public/stylesheets/sass/application.sass +++ b/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