diff --git a/app/views/aspects/manage.html.haml b/app/views/aspects/manage.html.haml index e818657e8..5573fe020 100644 --- a/app/views/aspects/manage.html.haml +++ b/app/views/aspects/manage.html.haml @@ -7,7 +7,7 @@ = javascript_include_tag 'aspect-edit.js' - content_for :left_pane do - %h1=t('.requests') + %h3=t('.requests') .requests %ul.dropzone @@ -19,7 +19,7 @@ = person_image_tag(request.person) .name = request.person.real_name - %h1=t('.ignore_remove') + %h3=t('.ignore_remove') %li.remove %ul.dropzone @@ -34,7 +34,7 @@ .aspect_name %span.edit_name_field - %h1{:contenteditable => true}= aspect.name + %h3{:contenteditable => true}= aspect.name %span.tip click to edit %ul.tools diff --git a/app/views/comments/_comment.html.haml b/app/views/comments/_comment.html.haml index 3e927f723..7e22a3cd2 100644 --- a/app/views/comments/_comment.html.haml +++ b/app/views/comments/_comment.html.haml @@ -4,8 +4,9 @@ %li.comment{:id => post.id} = person_image_tag(post.person) - %span.from - = link_to post.person.real_name, post.person + .content + .from + = link_to post.person.real_name, post.person = post.text - %div.time - = "#{time_ago_in_words(post.updated_at)} #{t('.ago')}" + %div.time + = "#{time_ago_in_words(post.updated_at)} #{t('.ago')}" diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 99dec9e35..b8de1dd24 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -56,7 +56,7 @@ = render "shared/sub_header" .container - .span-5.last + .span-4.append-1.last = yield :left_pane .span-19.last diff --git a/app/views/photos/_photo.haml b/app/views/photos/_photo.haml index 71049ac72..85a2cd80a 100644 --- a/app/views/photos/_photo.haml +++ b/app/views/photos/_photo.haml @@ -7,28 +7,27 @@ = person_image_tag(post.person) .content - %span.from + .from = link_to post.person.real_name, post.person - %b - =t('.posted_a_new_photo_to') - = link_to post.album.name, object_path(post.album) + .aspect + → + - if post.public? + the world + - else + - for aspect in current_user.aspects_with_post( post.id ) + = aspect.name - %br - = render "albums/album", :post => post.album, :current_user => current_user - = link_to (image_tag post.url(:thumb_medium)), object_path(post) + =t('.posted_a_new_photo_to') + = link_to post.album.name, object_path(post.album) + + %br + %br + = render "albums/album", :post => post.album, :current_user => current_user + = link_to (image_tag post.url(:thumb_medium)), object_path(post) .info - = link_to(how_long_ago(post), photo_path(post)) - \-- + %span.time= link_to(how_long_ago(post), photo_path(post)) = link_to "#{t('.show_comments')} (#{post.comments.count})", '#', :class => "show_post_comments" + = render "comments/comments", :post => post - - if post.public? - .public_aspect_tag - public - - else - .aspect_tag - %ul - - for aspect in current_user.aspects_with_post( post.id ) - %li= aspect.name - diff --git a/app/views/shared/_sub_header.haml b/app/views/shared/_sub_header.haml index 227b63d4e..e7dc4e79d 100644 --- a/app/views/shared/_sub_header.haml +++ b/app/views/shared/_sub_header.haml @@ -2,10 +2,10 @@ .container .span-5.last - if @person - %h1 + %h2 = @person.real_name - else - %h1 + %h2 - if @aspect == :all = link_to t('.all_aspects'), root_path - elsif @aspect == :public diff --git a/app/views/status_messages/_status_message.html.haml b/app/views/status_messages/_status_message.html.haml index d8c56ff2f..391251358 100644 --- a/app/views/status_messages/_status_message.html.haml +++ b/app/views/status_messages/_status_message.html.haml @@ -7,28 +7,26 @@ = person_image_link(post.person) .content - %span.from + .from = link_to post.person.real_name, post.person - = post.message + .aspect + → + - if post.public? + the world + - else + - for aspect in current_user.aspects_with_post( post.id ) + = link_to aspect.name, aspect + + - if current_user.owns?(post) + .destroy_link + = render "shared/reshare", :post => post, :current_user => current_user + = link_to t('.delete'), status_message_path(post), :confirm => t('.are_you_sure'), :method => :delete, :remote => true, :class => "delete" + + = post.message .info %span.time= link_to(how_long_ago(post), object_path(post)) - \-- = link_to "#{t('.show_comments')} (#{post.comments.count})", '#', :class => "show_post_comments" = render "comments/comments", :post => post - - if current_user.owns?(post) - .destroy_link - = link_to t('.delete'), status_message_path(post), :confirm => t('.are_you_sure'), :method => :delete, :remote => true, :class => "delete" - = render "shared/reshare", :post => post, :current_user => current_user - - - if post.public? - .public_aspect_tag - public - - else - .aspect_tag - %ul - - for aspect in current_user.aspects_with_post( post.id ) - %li= aspect.name - diff --git a/app/views/users/edit.html.haml b/app/views/users/edit.html.haml index 80d426202..397035a80 100644 --- a/app/views/users/edit.html.haml +++ b/app/views/users/edit.html.haml @@ -14,7 +14,7 @@ - content_for :publish do - %h1="#{t('.editing_profile')}" + %h2="#{t('.editing_profile')}" - content_for :left_pane do %ul#settings_nav diff --git a/public/javascripts/aspect-edit.js b/public/javascripts/aspect-edit.js index 59ba6e331..2d6564e6b 100644 --- a/public/javascripts/aspect-edit.js +++ b/public/javascripts/aspect-edit.js @@ -94,7 +94,7 @@ $(function() { }); - $(".aspect h1").live( 'focus', function() { + $(".aspect h3").live( 'focus', function() { var $this = $(this), id = $this.closest("li").children("ul").attr("id"), diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index 80d0dfe39..fa7be11c8 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -11,23 +11,16 @@ body { margin: 0; } a { - color: #556270; color: #107fc9; - color: #019dbe; text-decoration: none; } a:hover { - color: white; - background-color: #556270; - background-color: #019dbe; } + color: #22aae0; } -h1 { - font-size: 21px; - font-weight: bold; - line-height: 36px; } +h1, h2, h3, h4 { + color: #444444; } h3 { - font-size: 18px; - font-weight: bold; } + font-size: 18px; } .avatar { width: 50px; @@ -125,17 +118,15 @@ header { border-top: 1px solid white; padding: 20px 0; } header #aspect_header h1 { - margin-bottom: 0; - text-shadow: 0 2px 0 white; } + text-shadow: 0 1px 0 white; } header #aspect_header a { - color: #111111; } + color: #444444; } header #aspect_header a:hover { background: none; color: #999999; } header #aspect_header .page_title { text-transform: uppercase; - text-shadow: 0 2px 0 white; - margin-top: -5px; } + text-shadow: 0 1px 0 white; } ul#stream { margin: 0; @@ -146,7 +137,6 @@ ul#stream { padding: 12px 0; border-bottom: 1px solid #eeeeee; } ul#stream > li:hover { - background: -webkit-gradient(linear, 0% 0%, 0% 50%, from(#fafafa), to(#fcfcfc)); background-color: #fafafa; border-bottom: 1px solid #dddddd; } ul#stream > li:hover .destroy_link { @@ -156,26 +146,47 @@ ul#stream { li.message { position: relative; - line-height: 140%; - font-family: "Lucida Grande", sans-serif; - color: #999999; } + line-height: 19px; + font-family: "Arial", "Helvetica", sans-serif; + color: #777777; } li.message .avatar { float: left; margin-right: 15px; } li.message .delete:hover { background: #eeeeee; } li.message .content { + max-width: 610px; + margin-top: -4px; padding-left: 65px; - width: 600px; } - li.message .content span.from { - color: black; - font-weight: normal; - font-size: 110%; } + color: #444444; + font-weight: normal; + font-size: 14px; } + li.message .content .from { + font-family: "Helvetica neue", Arial, Helvetica, sans-serif; + text-shadow: 0 1px white; } + li.message .content .from .aspect { + display: inline; + color: #bbbbbb; + font-size: 12px; } + li.message .content .from .aspect a { + font-weight: normal; + color: #bbbbbb; } + li.message .content .from .aspect a:hover { + text-decoration: underline; } + li.message .content .from a { + font-weight: bold; } li.message .content div.info { - color: #bababa; - font-size: 70%; } - li.message .content div.info .time a { - color: #666666; } + color: #eeeeee; + font-size: 11px; } + li.message .content div.info a { + color: #cccccc; } + li.message .content div.info .time { + font-weight: bold; + margin-right: 5px; } + li.message .content div.info .time a { + color: #bbbbbb; } + li.message:hover div.info a, li.message:hover .time a { + color: #107fc9; } .reshare_pane { margin-left: 5px; @@ -248,8 +259,8 @@ form { #stream div.comments { display: none; } #stream div.comments .avatar { - width: 30px; - height: 30px; + width: 35px; + height: 35px; margin-right: 10px; } input.comment_submit { @@ -261,7 +272,7 @@ ul.comment_set { margin-top: 1em; padding: 0; list-style: none; - width: 495px; } + max-width: 610px; } ul.comment_set textarea { width: 100%; } ul.comment_set li.comment { @@ -269,11 +280,18 @@ ul.comment_set { background-color: rgba(10, 81, 109, 0.05); padding: 0.6em; border-bottom: 1px solid #dddddd; } - ul.comment_set li.comment .from { - font-size: 1em; } - ul.comment_set li.comment div.time { - color: #666666; - font-size: 70%; } + ul.comment_set li.comment .content { + color: #777777; + margin-top: -2px; + padding-left: 45px; + font-size: 12px; + line-height: 18px; } + ul.comment_set li.comment .content .from a { + color: #444444; } + ul.comment_set li.comment .content div.time { + color: #bbbbbb; + font-size: 11px; + font-weight: bold; } ul.comment_set li.comment form { margin-top: -5px; margin-bottom: 0; @@ -304,20 +322,16 @@ ul.comment_set { .pagination a { padding: 3px; } -.destroy_link, .request_button { +li.message .from .destroy_link { + display: none; position: absolute; - right: 2em; - bottom: 15px; } - .destroy_link a, .request_button a { + right: 0; + font-size: 12px; } + li.message .from .destroy_link a { color: #999999; font-weight: normal; } - .destroy_link a:hover, .request_button a:hover { - text-decoration: underline; - background: none; } - -.destroy_link { - display: none; - font-size: smaller; } + li.message .from .destroy_link a:hover { + text-decoration: underline; } .request_buttons { position: absolute; @@ -350,7 +364,7 @@ ul.comment_set { input[type='text'], input[type='password'], textarea { - font-family: "lucida grande", "lucida sans", "sans-serif"; + font-family: "Arial", "Helvetica", sans-serif; font-size: 14px; padding: 0.3em; display: block; @@ -374,11 +388,13 @@ form p { margin: 0; } label { + font-family: "Arial", "Helvetica", sans-serif; + font-weight: normal; color: #999999; position: absolute; top: 3px; left: 0.48em; - font-weight: normal; } + text-shadow: 0 1px 1px #eeeeee; } #publisher { color: #999999; @@ -506,7 +522,8 @@ h1.big_text { #aspect_nav { color: black; margin-top: 8px; - margin-bottom: 1px; } + margin-bottom: 1px; + font-family: "Arial", "Helvetica", sans-serif; } #aspect_nav #aspect_manage_button { display: inline; } #aspect_nav #aspect_manage_button a { @@ -520,12 +537,8 @@ h1.big_text { display: inline; margin-right: 2px; } #aspect_nav ul > li a { - text-shadow: 0 2px 0 #444444; - -webkit-border-radius: 3px 3px 0 0; - -moz-border-radius: 3px 3px 0 0; + text-shadow: 0 1px 0 #444444; line-height: 22px; - background-color: #444444; - border: 1px solid #555555; padding: 3px 8px; padding-bottom: 3px; color: #999999; } @@ -533,9 +546,11 @@ h1.big_text { background-color: #4e4e4e; color: #cccccc; } #aspect_nav ul > li.selected a { + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; -webkit-box-shadow: 0px -4px 6px -2px #777777; -moz-box-shadow: 0px -4px 6px -2px #777777; - text-shadow: 0 2px 0 white; + text-shadow: 0 1px 0 white; padding-top: 4px; padding-bottom: 5px; line-height: 18px; @@ -545,7 +560,7 @@ h1.big_text { background: -moz-linear-gradient(19% 75% 90deg, #f7f7f7, white); border: 1px solid white; border-bottom: 1px solid #f7f7f7; - color: black; } + color: #444444; } #aspect_nav ul > li.selected a:hover { background-color: #efefef; } #aspect_nav ul > li.selected a a { @@ -574,9 +589,9 @@ h1.big_text { .requests, .remove { list-style: none; } - .aspect h1, - .requests h1, - .remove h1 { + .aspect h3, + .requests h3, + .remove h3 { display: inline-block; } .aspect .tip, .requests .tip, @@ -596,7 +611,7 @@ h1.big_text { .requests .aspect_name ul.tools, .remove .aspect_name ul.tools { position: absolute; - top: 10px; + top: 5px; right: 0; display: inline; padding: 0; @@ -616,7 +631,7 @@ h1.big_text { .remove .grey { color: #999999; cursor: default; - text-shadow: 0 2px white; } + text-shadow: 0 1px white; } .aspect ul.dropzone, .requests ul.dropzone, .remove ul.dropzone { @@ -678,10 +693,11 @@ ul#settings_nav { marign: 0; font-size: larger; } ul#settings_nav > li a { + font-size: smaller; display: block; height: 100%; border-bottom: 1px solid #eeeeee; - padding: 5px 0; } + padding: 2px; } .settings_pane { display: none; } @@ -689,53 +705,16 @@ ul#settings_nav { #fancybox-close:hover { background-color: transparent; } -.aspect_tag, -.public_aspect_tag { - position: absolute; - top: 15px; - right: 2em; - border-radius: 5px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - font-size: smaller; - padding: 0 6px; - color: #999999; - text-shadow: 0 1px white; - border-bottom: 1px solid #eeeeee; - cursor: default; } - -.public_aspect_tag { - background: -moz-linear-gradient(19% 75% 90deg, #fffa75, #fff8ba); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff8ba), to(#fffa75)); - background-color: #fffc7f; - border-top: 1px solid #ebe66c; } - -.aspect_tag { - background: -moz-linear-gradient(19% 75% 90deg, #e0e0e0, #f0f0f0); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f0f0f0), to(#e0e0e0)); - background-color: #eeeeee; - color: #999999; - text-shadow: 0 1px white; - border-top: 1px solid #dddddd; } - .aspect_tag ul { - display: inline; - margin: 0; - padding: 0; - list-style: none; } - .aspect_tag ul li { - display: inline-block; - margin-right: 2px; - padding-right: 4px; - border-right: 1px solid #cccccc; } - .aspect_tag ul li:last-child { - margin-right: 0; - padding-right: 0; - border-right: none; } - #friend_pictures { line-height: 1em; } #friend_pictures img { - margin-right: -1px; } + margin-right: -1px; + width: 35px; + height: 35px; } #thumbnails { line-height: 14px; } + +#aspect_list { + margin: 0; + padding: 0; } diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index e50888c9d..a35c9dfd3 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -15,28 +15,18 @@ body :padding 2em :margin 0 a - :color #556270 :color #107FC9 - :color #019DBE :text :decoration none &:hover - :color #fff - :background - :color #556270 - :color #019DBE + :color #22AAE0 -h1 - :font - :size 21px - :weight bold - :line - :height 36px +h1, h2, h3, h4 + :color #444 h3 :font :size 18px - :weight bold .avatar :width 50px @@ -158,12 +148,10 @@ header :padding 20px 0 h1 - :margin - :bottom 0 - :text-shadow 0 2px 0 #fff + :text-shadow 0 1px 0 #fff a - :color #111 + :color #444 &:hover :background none :color #999 @@ -171,9 +159,7 @@ header .page_title :text :transform uppercase - :shadow 0 2px 0 #fff - :margin - :top -5px + :shadow 0 1px 0 #fff ul#stream @@ -187,14 +173,10 @@ ul#stream :bottom 1px solid #eee &:hover - :background -webkit-gradient(linear, 0% 0%, 0% 50%, from(#FAFAFA), to(#FCFCFC)) - :background :color #fafafa - :border :bottom 1px solid #ddd - .destroy_link :display inline @@ -203,10 +185,10 @@ ul#stream li.message :position relative - :line-height 140% + :line-height 19px :font - :family 'Lucida Grande', sans-serif - :color #999 + :family 'Arial', 'Helvetica', sans-serif + :color #777 .avatar :float left @@ -217,24 +199,58 @@ li.message :background #eee .content + :max-width 610px + :margin + :top -4px :padding :left 65px - :width 600px - span.from - :color #000 + .from :font - :weight normal - :font - :size 110% + :family 'Helvetica neue', Arial, Helvetica, sans-serif + :text + :shadow 0 1px #fff + + .aspect + :display inline + :color #bbb + :font + :size 12px + a + :font + :weight normal + :color #bbb + + &:hover + :text + :decoration underline + + a + :font + :weight bold + + :color #444 + :font + :weight normal + :size 14px div.info - :color #bababa - :font-size 70% - + :color #eee + :font-size 11px + a + :color #ccc .time a - :color #666 + :color #bbb + :font + :weight bold + :margin + :right 5px + + &:hover + div.info, .time + a + :color #107FC9 .reshare_pane :margin @@ -338,8 +354,8 @@ form :display none .avatar - :width 30px - :height 30px + :width 35px + :height 35px :margin :right 10px @@ -354,7 +370,7 @@ ul.comment_set :top 1em :padding 0 :list-style none - :width 495px + :max-width 610px textarea :width 100% @@ -368,13 +384,26 @@ ul.comment_set :border :bottom 1px solid #ddd - .from + .content + :color #777 + :margin + :top -2px + :padding + :left 45px + .from + a + :color #444 :font - :size 1em + :size 12px - div.time - :color #666 - :font-size 70% + :line + :height 18px + + div.time + :color #bbb + :font + :size 11px + :weight bold form :margin @@ -416,10 +445,12 @@ ul.comment_set a :padding 3px -.destroy_link, .request_button +li.message .from .destroy_link + :display none :position absolute - :right 2em - :bottom 15px + :right 0 + :font + :size 12px a :color #999 :font @@ -427,11 +458,6 @@ ul.comment_set &:hover :text :decoration underline - :background none - -.destroy_link - :display none - :font-size smaller .request_buttons :position absolute @@ -471,7 +497,7 @@ input[type='text'], input[type='password'], textarea :font - :family 'lucida grande', 'lucida sans', 'sans-serif' + :family 'Arial', 'Helvetica', sans-serif :size 14px :padding 0.3em :display block @@ -499,12 +525,15 @@ form p :margin 0 label + :font + :family 'Arial', 'Helvetica', sans-serif + :weight normal :color #999 :position absolute :top 3px :left 0.48em - :font - :weight normal + :text + :shadow 0 1px 1px #eee #publisher :color #999 @@ -676,6 +705,8 @@ h1.big_text :top 8px :bottom 1px + :font + :family 'Arial', 'Helvetica', sans-serif #aspect_manage_button :display inline @@ -697,15 +728,9 @@ h1.big_text :right 2px a - :text-shadow 0 2px 0 #444 - :-webkit-border-radius 3px 3px 0 0 - :-moz-border-radius 3px 3px 0 0 + :text-shadow 0 1px 0 #444 :line :height 22px - :background - :color #444 - - :border 1px solid #555 :padding 3px 8px :bottom 3px @@ -717,10 +742,13 @@ h1.big_text :color #ccc &.selected a + :-webkit-border-radius 5px 5px 0 0 + :-moz-border-radius 5px 5px 0 0 + :-webkit-box-shadow 0px -4px 6px -2px #777 :-moz-box-shadow 0px -4px 6px -2px #777 - :text-shadow 0 2px 0 #fff + :text-shadow 0 1px 0 #fff :padding :top 4px :bottom 5px @@ -736,7 +764,7 @@ h1.big_text :border 1px solid #fff :bottom 1px solid #F7F7F7 - :color #000 + :color #444 &:hover :background :color #efefef @@ -776,7 +804,7 @@ h1.big_text :list :style none - h1 + h3 :display inline-block .tip @@ -795,7 +823,7 @@ h1.big_text ul.tools :position absolute - :top 10px + :top 5px :right 0 :display inline :padding 0 @@ -814,7 +842,7 @@ h1.big_text .grey :color #999 :cursor default - :text-shadow 0 2px #fff + :text-shadow 0 1px #fff ul.dropzone :min-height 20px @@ -868,13 +896,14 @@ ul#settings_nav :size larger > li - a + :font + :size smaller :display block :height 100% :border :bottom 1px solid #eee - :padding 5px 0 + :padding 2px .settings_pane @@ -885,75 +914,17 @@ ul#settings_nav :background :color transparent -.aspect_tag, -.public_aspect_tag - :position absolute - :top 15px - :right 2em - - :border-radius 5px - :-webkit-border-radius 5px - :-moz-border-radius 5px - - :font - :size smaller - :padding 0 6px - - :color #999 - :text - :shadow 0 1px #fff - - :border - :bottom 1px solid #eee - - :cursor default - -.public_aspect_tag - :background -moz-linear-gradient(19% 75% 90deg,#FFFA75, #FFF8BA) - :background -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF8BA), to(#FFFA75)) - :color #FFFC7F - :border - :top 1px solid #EBE66C - -.aspect_tag - :background -moz-linear-gradient(19% 75% 90deg,#E0E0E0, #F0F0F0) - :background -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F0F0F0), to(#E0E0E0)) - :color #eee - :color #999 - :text - :shadow 0 1px #fff - :border - :top 1px solid #ddd - - ul - :display inline - :margin 0 - :padding 0 - :list - :style none - - li - :display inline-block - :margin - :right 2px - :padding - :right 4px - :border - :right 1px solid #ccc - - &:last-child - :margin - :right 0 - :padding - :right 0 - :border - :right none - #friend_pictures :line-height 1em img :margin-right -1px + :width 35px + :height 35px #thumbnails :line-height 14px + +#aspect_list + :margin 0 + :padding 0