diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 22c9cbe00..1e0f03001 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -48,7 +48,7 @@ module ApplicationHelper image_location = person.profile.image_url image_location ||= "/images/user/default.jpg" - image_tag image_location, :class => "person_picture", :alt => person.real_name, :title => person.real_name + image_tag image_location, :class => "avatar", :alt => person.real_name, :title => person.real_name end def person_image_link(person) diff --git a/app/views/shared/_publisher.haml b/app/views/shared/_publisher.haml index da57beff7..93fc5fe84 100644 --- a/app/views/shared/_publisher.haml +++ b/app/views/shared/_publisher.haml @@ -1,23 +1,16 @@ #publisher - .span-19.last - = form_for StatusMessage.new, :remote => true do |f| - = f.error_messages + = owner_image_tag - .span-15 - .span-2 - .user_image - = owner_image_tag - .span-13.last - %p - %label{:for => "status_message_message"} Message - = f.text_area :message, :rows => 2 + = form_for StatusMessage.new, :remote => true do |f| + = f.error_messages + %p + %label{:for => "status_message_message"} Message + = f.text_area :message, :rows => 2 - .span-3 - %ul.group_selector - going to... - - for group in current_user.groups - %li - = check_box_tag("group_ids[]", group.id, current_group?(group) ) - = group.name - .span-1.last - = f.submit "Post" + %ul.group_selector + going to... + - for group in current_user.groups + %li + = check_box_tag("group_ids[]", group.id, current_group?(group) ) + = group.name + = f.submit "Post" diff --git a/app/views/status_messages/_status_message.html.haml b/app/views/status_messages/_status_message.html.haml index c6099504e..7217d3ec8 100644 --- a/app/views/status_messages/_status_message.html.haml +++ b/app/views/status_messages/_status_message.html.haml @@ -2,15 +2,16 @@ = person_image_link(post.person) - %span.from - = link_to post.person.real_name, post.person - = auto_link sanitize post.message - - %div.time - = link_to(how_long_ago(post), object_path(post)) - \-- - = link_to "show comments (#{post.comments.count})", '#', :class => "show_post_comments" - = render "comments/comments", :post => post + .content + %span.from + = link_to post.person.real_name, post.person + = auto_link sanitize post.message + + %div.info + = link_to(how_long_ago(post), object_path(post)) + \-- + = link_to "show comments (#{post.comments.count})", '#', :class => "show_post_comments" + = render "comments/comments", :post => post - if current_user.owns?(post) .destroy_link diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index 7c113b58a..1b0eb29f1 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -19,6 +19,9 @@ a { background-color: #018790; background-color: #556270; } +.avatar { + width: 50px; } + #flash_notice, #flash_error, #flash_alert { @@ -113,35 +116,29 @@ header { #main { width: 100%; } -ul#stream, ul#friend_stream { +ul#stream { margin: 0; padding: 0; } - ul#stream > li, ul#friend_stream > li { + ul#stream > li { + min-height: 50px; list-style: none; - padding: 15px 0; - margin-bottom: 5px; + padding: 12px 0; border-bottom: 1px solid #eeeeee; } -ul#friend_stream > li { - padding: 0.2em 0; } -ul#friend_stream img { - width: 25px; - max-width: 25px; - position: relative; - float: none; - display: inline; } - li.message { position: relative; line-height: 140%; font-family: "Lucida Grande", sans-serif; color: #999999; } - li.message span.from { + li.message .avatar { + float: left; + margin-right: 15px; } + li.message .content span.from { color: black; font-weight: normal; margin-right: 0.2em; font-size: 110%; } - li.message div.time { + li.message .content div.info { color: #bababa; font-size: 70%; } @@ -304,25 +301,32 @@ label { font-weight: normal; } #publisher { - background-color: rgba(10, 81, 109, 0.05); border-bottom: 2px #999999 solid; color: #999999; position: relative; - height: 69px; } + height: 63px; + margin-bottom: 5px; } + #publisher .avatar { + float: left; + margin-right: 15px; } + #publisher p { + position: absolute; + left: 0; } #publisher form { - margin-top: 10px; } + display: inline; } + #publisher form input[type='submit'] { + float: right; + margin-right: 20px; + margin-top: 28px; } #publisher textarea { width: 485px; height: 40px; margin-top: 0; } - #publisher .user_image img { - height: 50px; - padding-left: 10px; } #publisher ul.group_selector { - float: left; + left: 510px; padding: 0; margin: 0; - width: auto; + width: 110px; z-index: 10; position: absolute; height: auto; @@ -333,7 +337,7 @@ label { font-size: smaller; padding: 2px; display: none; - background-color: white; } + background-color: #eeeeee; } #publisher ul.group_selector > li:active { background-color: yellow; } #publisher ul.group_selector:hover li { @@ -452,9 +456,6 @@ h1.big_text { #group ul .selected:hover a { background-color: #eeeeee; } -#friend_pictures img { - height: 40px; } - #add_photo_loader { position: absolute; display: none; @@ -504,8 +505,8 @@ h1.big_text { color: #999999; } #other_user_menu > li:first-child img { position: absolute; - height: 20px; - top: 5px; + width: 20px; + top: 3px; left: 9px; } #other_user_menu > li:last-child { border-bottom: 2px solid black; } diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index cde309639..a06880406 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -20,6 +20,9 @@ a :color #018790 :color #556270 +.avatar + :width 50px + #flash_notice, #flash_error, #flash_alert @@ -131,28 +134,16 @@ header #main :width 100% -ul#stream, ul#friend_stream +ul#stream :margin 0 :padding 0 > li + :min-height 50px :list-style none - :padding 15px 0 - :margin-bottom 5px + :padding 12px 0 :border :bottom 1px solid #eee -ul#friend_stream - > li - :padding 0.2em 0 - - img - :width 25px - :max-width 25px - :position relative - :float none - :display inline - - li.message :position relative :line-height 140% @@ -160,18 +151,25 @@ li.message :family 'Lucida Grande', sans-serif :color #999 - span.from - :color #000 - :font - :weight normal + .avatar + :float left :margin - :right 0.2em - :font - :size 110% + :right 15px - div.time - :color #bababa - :font-size 70% + + .content + span.from + :color #000 + :font + :weight normal + :margin + :right 0.2em + :font + :size 110% + + div.info + :color #bababa + :font-size 70% h1 :position relative @@ -373,17 +371,31 @@ label :weight normal #publisher - :background - :color rgba(10,81,109,0.05) :border :bottom 2px #999 solid :color #999 :position relative - :height 69px + :height 63px + :margin + :bottom 5px + + .avatar + :float left + :margin + :right 15px + + p + :position absolute + :left 0 form - :margin - :top 10px + :display inline + + input[type='submit'] + :float right + :margin + :right 20px + :top 28px textarea :width 485px @@ -391,17 +403,11 @@ label :margin :top 0 - .user_image - img - :height 50px - :padding - :left 10px - ul.group_selector - :float left + :left 510px :padding 0 :margin 0 - :width auto + :width 110px :z-index 10 :position absolute :height auto @@ -415,7 +421,7 @@ label :padding 2px :display none :background - :color #fff + :color #eee &:active :background @@ -581,10 +587,6 @@ h1.big_text :background :color #eee -#friend_pictures - img - :height 40px - #add_photo_loader :position absolute @@ -651,8 +653,8 @@ h1.big_text img :position absolute - :height 20px - :top 5px + :width 20px + :top 3px :left 9px &:last-child