public/images/content_bg.png @@ -82,7 +82,7 @@ class User < ActiveRecord::Base end def name - read_attribute(:name) or login + read_attribute(:name).blank? ? login : read_attribute(:name) end protected app/models/user.rb @@ -1,5 +1,7 @@ #new_status - - form_for @status do |make| - = make.label :message, "What are you working on?" - = make.text_field :message - = make.submit "Update" + %h2 What are you working on? + .content + - form_for @status do |make| + = make.label :message + = make.text_area :message + = make.submit "Update" app/views/statuses/_new.html.haml @@ -1,6 +1,6 @@ -%li +%li.status.content + %strong= status.message - if status.created_at > 1.day.ago %small= status_time_ago_in_words(status.created_at) - %strong= status.message %em.tags= status.tag_list \ No newline at end of file app/views/statuses/_status.html.haml @@ -1,13 +1,17 @@ +%ul#status_list + - if @statuses.empty? + %li#zero There are no statuses. Why don't you be the first to add one? + - else + - @statuses.sort.reverse.each do |date, statuses| + %li + %h2 + %a{:id => date, :title => statuses.first.created_at.pretty_date}= today_tomorow_or_day statuses.first.created_at + %ul#users + - statuses.group_by(&:user).each do |user, statuses| + %li.user{:class => user_class(user, current_user)} + .header + .avatar= gravatar_for user + %h3.title= user.name + %ul#statuses + = render :partial => statuses = render :partial => "statuses/new" -%ul - - @statuses.sort.reverse.each do |date, statuses| - %li - %h2 - %a{:id => date, :title => statuses.first.created_at.pretty_date}= today_tomorow_or_day statuses.first.created_at - %ul#users - - statuses.group_by(&:user).each do |user, statuses| - %li.user{:class => user_class(user, current_user)} - .avatar= gravatar_for user - %h3= user.name - %ul#statuses - = render :partial => statuses app/views/statuses/index.html.haml @@ -28,21 +28,11 @@ html, body { padding: 6px; font-size: 13px; } -#new_status { - background: #edecec; - position: fixed; - top: 30px; - right: 3px; - padding: 20px; - border: 2px solid #ccc; - font-size: 12px; - font-weight: bold; } - #content { padding: 30px; padding-top: 20px; } -h2 { +h2, .title { color: #7A0D00; font-size: 30px; padding: 4px; @@ -53,49 +43,43 @@ h3 { padding-bottom: 8px; } #users { - margin-left: 100px; - margin-right: 100px; - margin-bottom: 20px; } + padding-top: 20px; } + #users li { + margin-top: 5px; } + #users .header { + display: block; } + #users .header .title { + position: relative; + top: 10px; } #statuses { - font-size: 13px; - margin: 5px; - margin-left: 65px; - margin-right: 65px; } - #statuses li { - position: relative; - margin-bottom: 10px; - padding-left: 120px; - font-weight: bold; } - #statuses small { - font-weight: normal; - position: absolute; - top: -3px; - left: 0; - text-align: center; - padding: 3px; - width: 100px; - margin-right: 20px; - background: #cecece; - color: #fff; } - #statuses strong { - display: block; } - #statuses .tags { - display: block; - color: #acacaa; - margin: 1px; - margin-top: 3px; } + clear: both; + padding-top: 10px; + padding-bottom: 5px; + margin-bottom: 20px; } + #statuses .status { + padding: 10px; + background: #fff; } + #statuses .status small { + display: block; + padding-top: 5px; + font-size: 11px; + color: #A6A2A0; } + +.user.content { + margin-top: 10px; } .user { padding: 5px; clear: both; } .user .avatar { float: left; + background: #fff; border: 1px solid #e4e4e4; padding: 2px; margin-right: 10px; } -.highlight { +.highlight h3 { background: #fffee6; } .content { @@ -103,7 +87,10 @@ h3 { margin-top: 20px; padding: 25px; padding-bottom: 45px; - border: 1px solid #E9E8E1; } + border: 1px solid #E9E8E1; + background: url(/images/content_bg.png) repeat-x; } + .content.plain { + background: #fff; } label { display: block; @@ -172,3 +159,21 @@ label + input, label + select, label + textarea { font-size: 13px; } .flash strong { text-transform: uppercase; } + +#status_list { + float: left; + width: 700px; + margin-top: 0; } + #status_list > li { + padding-bottom: 20px; } + +div#new_status { + float: left; + width: 400px; + margin-left: 30px; } + div#new_status label { + display: none; } + div#new_status textarea { + margin-top: 5px; + height: 110px; + padding: 5px; } public/stylesheets/holler.css @@ -32,21 +32,11 @@ html, body padding: 6px font-size: 13px -#new_status - background: #edecec - position: fixed - top: 30px - right: 3px - padding: 20px - border: 2px solid #ccc - font-size: 12px - font-weight: bold - #content padding: 30px padding-top: 20px -h2 +h2, .title color: #7A0D00 font-size: 30px padding: 4px @@ -57,55 +47,51 @@ h3 padding-bottom: 8px #users - margin-left: 100px - margin-right: 100px - margin-bottom: 20px - -#statuses - font-size: 13px - margin: 5px - margin-left: 65px - margin-right: 65px + padding-top: 20px li - position: relative - margin-bottom: 10px - padding-left: 120px - font-weight: bold - - small - font-weight: normal - position: absolute - top: -3px - left: 0 - text-align: center - padding: 3px - width: 100px - margin-right: 20px - background: #cecece - color: #fff - - strong + margin-top: 5px + + .header display: block - .tags - display: block - color: #acacaa - margin: 1px - margin-top: 3px + .title + position: relative + top: 10px + +#statuses + clear: both + padding-top: 10px + padding-bottom: 5px + margin-bottom: 20px + + .status + padding: 10px + background: #fff + + small + display: block + padding-top: 5px + font-size: 11px + color: #A6A2A0 + +.user.content + margin-top: 10px .user padding: 5px clear: both .avatar - float: left + float: left + background: #fff border: 1px solid #e4e4e4 padding: 2px margin-right: 10px .highlight - background: #fffee6 + h3 + background: #fffee6 .content position: relative @@ -113,6 +99,10 @@ h3 padding: 25px padding-bottom: 45px border: 1px solid #E9E8E1 + background: url(/images/content_bg.png) repeat-x + + &.plain + background: #fff label display: block @@ -187,3 +177,24 @@ label + input, label + select, label + textarea strong text-transform: uppercase + +#status_list + float: left + width: 700px + margin-top: 0 + + > li + padding-bottom: 20px + +div#new_status + float: left + width: 400px + margin-left: 30px + + label + display: none + + textarea + margin-top: 5px + height: 110px + padding: 5px public/stylesheets/sass/holler.sass 2b94ea6faabd6ac7a6ba3ddf20ae9534d16d504d Zach Inglis zach@lt3media.com http://github.com/zachinglis/holler/commit/98e4507bae948de5bd0b59983ff29301e023f0c2 98e4507bae948de5bd0b59983ff29301e023f0c2 2009-04-04T17:29:09-07:00 2009-04-04T17:29:09-07:00 Restyled statuses page 78988e3b44c206a7deadb2c8cba0eb5a444117a7 Zach Inglis zach@lt3media.com