diff --git a/app/views/groups/edit.html.haml b/app/views/groups/edit.html.haml index 2f87b23f1..b9a4d0afe 100644 --- a/app/views/groups/edit.html.haml +++ b/app/views/groups/edit.html.haml @@ -9,15 +9,22 @@ = "Editing Groups" %ul#group_list + - for group in @groups - %li{:class => 'group'} - = group.name + + %li.group + %h3= group.name + %ul{:id => group.id} - dummy person for dropping onto - -for person in group.people - %li{:class => '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 + -if group.people.size < 1 + %li.grey Drag to add people + + -else + -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 %p %br = link_to 'Update Groups', '#', :class => 'button', :id => "move_friends_link" diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index d1fd01c13..3cb4beb1e 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -577,3 +577,25 @@ h1.big_text { .editing, .editing:hover { background-color: yellow; border: 1px #666666 solid; } + +.group { + list-style: none; } + .group ul { + min-height: 20px; + margin: 0; + margin-left: 1em; + margin-bottom: 25px; + background-color: #efefef; + border: 1px solid #cccccc; + border-radius: 3px; + list-style: none; + padding: 15px; } + .group ul li { + margin-left: 0; + padding: 5px; + cursor: move; } + .group ul li img { + display: inline-block; } + .group ul .grey { + font-style: italic; + color: #666666; } diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index 955cf815c..f1050fac2 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -748,3 +748,35 @@ h1.big_text :background :color yellow :border 1px #666 solid + + +.group + :list + :style none + ul + :min-height 20px + :margin 0 + :left 1em + :bottom 25px + :background + :color #efefef + :border 1px solid #ccc + :border + :radius 3px + :list + :style none + :padding 15px + + li + :margin + :left 0 + :padding 5px + :cursor move + + img + :display inline-block + + .grey + :font + :style italic + :color #666