diff --git a/app/views/dashboard/index.html.haml b/app/views/dashboard/index.html.haml index bd615a131eac3519546771b8ff5527ad0f70fd69..d7a02fdb37b3d51b0e4b223f071a5897ae4f40a5 100644 --- a/app/views/dashboard/index.html.haml +++ b/app/views/dashboard/index.html.haml @@ -1,38 +1,29 @@ -%div.big_text#info_top - welcome home, daniel. - %p.description - this is your diaspora dashboard, a place where you can catch a - = link_to "glimpse", "#" - of what all your friends are doing. +/%div.big_text#info_top +/welcome home, daniel. +/%p.description +/this is your diaspora dashboard, a place where you can catch a +/= link_to "glimpse", "#" +/of what all your friends are doing. -.span-6.last - %div{ :style => "padding: 1em" } - %div.big_text - daniel grippi - - %img{:src=>"/images/bp.jpeg", :id => "profile_image"} +.span-16.append-2.last - %div.big_text - requests + %div.big_text + recent activity - %div.big_text - %div.big_number= link_to "30", "#" - new requests - + /%div#publish + /- form_for 'StatusMessage' do |f| + /= f.text_field :thought -.prepend-2.span-16.last - %div{ :style => "padding: 1em" } + %ul#stream + - for post in @posts + = render "status_messages/pane", :post => post - %div.big_text - updates - - /%div#publish - /- form_for 'update' do |f| - /= f.text_field :thought +.span-6.last + %div.big_text + requests - %ul#stream - - for post in @posts - %li - = render "status_messages/pane", :post => post + %div.big_text + %div.big_number= link_to "30", "#" + new requests diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index bc06d3ce0dcf8adf2454776997d2a9a9c101b574..d5d56987dcc43dbccb071e045e8fbb09b1387ddf 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -20,21 +20,22 @@ #huge_star * %a#diaspora_text{:href => root_path} /%img{:src => '/images/diaspora_white.png'} - %ul.nav - %li= link_to "home", root_path - %li= link_to "users", users_path - %li= link_to "status messages", status_messages_path - %li= link_to "friends", friends_path - %li= link_to "bookmarks", bookmarks_path - %li= link_to "blogs", blogs_path #session_action - if user_signed_in? - = link_to "log out", destroy_user_session_path + = link_to User.first.email, destroy_user_session_path - else = link_to "login", new_user_session_path #header_below + .container + %div.big_text#info_top + daniel grippi posted a new update + %p.description + let's take this into overdrive. + %ul.nav + %li= link_to "home", root_path + %li= link_to "friends", friends_path .container - if show_title? diff --git a/app/views/status_messages/_pane.html.haml b/app/views/status_messages/_pane.html.haml index 52d2c6a0b668dc6d33a4363e30755cc707d32583..f98226072fdab3e34df90eeb43883361b978ceee 100644 --- a/app/views/status_messages/_pane.html.haml +++ b/app/views/status_messages/_pane.html.haml @@ -1,4 +1,10 @@ -%sp.message - %sp.from= post.owner - = post.message +%li + .span-2.last + %img{:src => "/images/mocks/user_pic.jpeg", :height => "35px", :class => "avatar"} + .span-13.last + %sp.message + %sp.from= post.owner + = post.message + %br + %sp.time= "#{time_ago_in_words(post.updated_at)} ago" diff --git a/public/images/bp.jpeg b/public/images/bp.jpeg deleted file mode 100644 index 33f75aa044a365d52811406f0a43d8d5068cec30..0000000000000000000000000000000000000000 Binary files a/public/images/bp.jpeg and /dev/null differ diff --git a/public/images/mocks/user_pic.jpeg b/public/images/mocks/user_pic.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..4732d561ed7face2bb5b4b8c3d1699e559c45104 Binary files /dev/null and b/public/images/mocks/user_pic.jpeg differ diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index 9b9f41f9fd81576094ac4dd29a1076d32d1b1db1..5aa1fb1b45647e8675c8d7c5fd372e549b1e0ad4 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -52,46 +52,55 @@ h4 { margin: 0; } #header { - min-height: 35px; + height: 30px; color: white; font-size: 110%; background-color: #1a1a21; - border-bottom: 1px solid white; } + border-bottom: 1px solid white; + padding-top: 5px; } #header #huge_star { position: absolute; - font-size: 80px; - top: -25px; } + font-family: "helvetica neue", "helvetica", "arial", "sans-serif"; + font-size: 60px; + top: -15px; } #header #diaspora_text { border: none; } #header #session_action { - display: none; - float: right; } - #header ul.nav { - padding: 0; - margin: 0; - margin-top: 6px; - display: block; - font-size: 130%; - float: right; } - #header ul.nav li { - display: inline; - margin-right: 1em; } - #header ul.nav li:last-child { - margin: 0; } - #header ul.nav a { - border-bottom: none; - color: #999999; } - #header ul.nav a:hover { - color: #cccccc; } + float: right; + font-size: 110%; + margin-top: 1px; } + #header #session_action a { + color: #cccccc; + border: none; } + #header #session_action a:hover { + color: white; } + +ul.nav { + padding: 0; + margin: 0; + font-size: 130%; + position: absolute; + margin-top: -62px; } + ul.nav li { + display: inline; + margin-right: 1em; + padding: 5px 10px; + background: #f2f8fc; + border: 1px solid white; + border-bottom: none; } + ul.nav li:first-child { + background: white; } + ul.nav li:last-child { + margin: 0; } + ul.nav a { + border-bottom: none; + color: #b1cfe3; } + ul.nav a:hover { + color: #cccccc; } #header_below { background-color: #e6eff7; - min-height: 150px; - line-height: 150px; - border-bottom: 0; - position: relative; - text-align: right; - z-index: -2; } + text-align: right; } #left_pane { background-color: #e6eff7; @@ -105,33 +114,37 @@ ul#stream { ul#stream > li { list-style: none; padding: 2em; - -webkit-box-shadow: 0 4px 5px -5px #999999; } - ul#stream > li:first-child { - padding-top: 0; } + -webkit-box-shadow: 0 4px 5px -5px #999999; + min-height: 40px; } + ul#stream > li img.avatar { + background: white; + padding: 2px; + border: 1px solid #eaeaea; + border-radius: 3px; } sp.message { - font-size: 110%; - letter-spacing: 0.1em; } + font-size: 120%; + color: #999999; + text-shadow: none; } sp.message sp.from { - color: #999999; } + color: black; } + sp.message sp.time { + color: #cccccc; + font-size: 80%; } div.big_text { font-size: 24px; font-weight: bold; - line-height: 36px; - margin-bottom: 2em; } + line-height: 36px; } div.big_text p.description { font-weight: normal; color: #999999; } div.big_text .big_number { - font-size: 300%; } + font-size: 300%; + line-height: 100%; } div.big_text .big_number a { border: none; } -#info_top { - margin-top: -130px; - margin-bottom: 50px; } - #publish input { font-size: 30px; padding: 7px; @@ -139,6 +152,10 @@ div.big_text { width: 90%; } #profile_image { - margin-top: 1em; - width: 240px; + margin-top: 0; + width: 100px; border: 2px solid #eaeaea; } + +.yellow { + background: #fffdb8; + border: 1px solid #e3e08d; } diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index f9e8eeb27806503a697a059a8c7271136d8b956f..592e115c55e1540f94bd5094a059837f6f8483ce 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -58,7 +58,7 @@ h4 :margin 0 #header - :min-height 35px + :height 30px :color #fff :font :size 110% @@ -66,58 +66,72 @@ h4 :color #1A1A21 :border :bottom 1px solid #fff + :padding + :top 5px + #huge_star :position absolute :font - :size 80px + :family 'helvetica neue', 'helvetica', 'arial', 'sans-serif' + :size 60px //:background //:color #ff3378 - :top -25px + :top -15px #diaspora_text :border none #session_action - :display none :float right + :font-size 110% + :margin-top 1px + a + :color #ccc + :border none + &:hover + :color #fff + - ul.nav - :padding 0 +ul.nav + :padding 0 + :margin 0 + :font + :size 130% + :position absolute + :margin-top -62px + + li + :display inline + :margin + :right 1em + :padding 5px 10px + :background #F2F8FC + :border 1px solid #fff + :border-bottom none + + li:first-child + :background #fff + + li:last-child :margin 0 - :margin-top 6px - :display block - :font - :size 130% - :float right + a + :border + :bottom none + :color #B1CFE3 + + &:hover + :color #ccc - li - :display inline - :margin - :right 1em - li:last-child - :margin 0 - a - :border - :bottom none - :color #999 - &:hover - :color #ccc #header_below :background :color #e6eff7 - :min-height 150px - :line-height 150px - :border-bottom 0 - :position relative :text-align right - :z-index -2 - #left_pane :background @@ -134,17 +148,27 @@ ul#stream :list-style none :padding 2em :-webkit-box-shadow 0 4px 5px -5px #999 - > li:first-child - :padding-top 0 + :min-height 40px + + img.avatar + background: #fff + padding: 2px + :border 1px solid #eaeaea + :border-radius 3px sp.message :font - :size 110% - :letter-spacing 0.1em + :size 120% + :color #999 + :text-shadow none sp.from - :color #999 + :color #000 + + sp.time + :color #ccc + :font-size 80% div.big_text @@ -152,7 +176,6 @@ div.big_text :size 24px :weight bold :line-height 36px - :margin-bottom 2em p.description :font @@ -162,13 +185,10 @@ div.big_text .big_number :font :size 300% + :line-height 100% a :border none -#info_top - :margin - :top -130px - :bottom 50px #publish input @@ -181,8 +201,11 @@ div.big_text #profile_image :margin - :top 1em - :width 240px + :top 0 + :width 100px :border 2px solid #eaeaea +.yellow + :background #FFFDB8 + :border 1px solid #E3E08D