From c542c08e388d70cbc1c84017635251334556b636 Mon Sep 17 00:00:00 2001 From: danielvincent Date: Sun, 20 Jun 2010 17:06:10 -0700 Subject: [PATCH] simpler --- app/views/dashboard/index.html.haml | 19 +---- app/views/layouts/application.html.haml | 16 +++- public/stylesheets/application.css | 84 ++++++++----------- public/stylesheets/sass/application.sass | 102 ++++++++++------------- 4 files changed, 95 insertions(+), 126 deletions(-) diff --git a/app/views/dashboard/index.html.haml b/app/views/dashboard/index.html.haml index b92444284..d174c52c4 100644 --- a/app/views/dashboard/index.html.haml +++ b/app/views/dashboard/index.html.haml @@ -1,21 +1,4 @@ -%div.big_text - recent activity - %div.filters - = link_to "displaying all", "#" %ul#stream - for post in @messages = render "status_messages/pane", :post => post - -/.span-7.last -/%div.info_pane -/%div.big_text -/%div.big_number= link_to "30", "#" -/new requests! -/%div.info_pane -/%div.big_text -/your profile -/%img{:src => "/images/mocks/bp.jpeg", :width => '20%', :class => "profile_image"} -/%div.info_pane -/%div.big_text -/your circle -/%p= link_to "see all friends", "#" + = render "status_messages/pane", :post => post diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index f82d29aea..d5e370945 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -13,7 +13,7 @@ = javascript_include_tag 'rails' = csrf_meta_tag = yield(:head) - + %body %header %a#diaspora_text{:href => root_path} @@ -26,6 +26,12 @@ = link_to "login", new_user_session_path #header_below + %h1#user_name + = User.first.email + %span.description= StatusMessage.my_newest.message + + %img{:src => '/images/mocks/bp.jpeg'} + %nav %ul.nav %li= link_to "home", root_path @@ -35,8 +41,12 @@ %li= link_to "blogs", blogs_path %li= link_to "friends", friends_path - - if show_title? - %div.big_text= yield(:title) - flash.each do |name, msg| = content_tag :div, msg, :id => "flash_#{name}" + %br + %br + %br + %br + %br + %br = yield diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index ca4254e10..b5c8c340c 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -7,12 +7,6 @@ a { color: #cc1e14; text-decoration: none; } -h1, -h2, -h3, -h4 { - text-shadow: 1px 1px 1px #eaeaea; } - #flash_notice, #flash_error, #flash_alert { @@ -53,6 +47,9 @@ h4 { margin: 0; } header { + z-index: 10; + position: absolute; + width: 100%; margin-top: -2em; margin-right: -2em; margin-left: -2em; @@ -81,64 +78,57 @@ ul.nav { position: absolute; padding: 0; margin: 0; - font-size: 130%; - bottom: 2px; } + width: 200px; } ul.nav li { - display: inline; - margin-right: 0.5em; + display: block; padding: 5px 10px; background: #f2f8fc; - border: 1px solid white; - border-bottom: none; } - ul.nav li:first-child { - background: white; } - ul.nav li:first-child a { - color: #1a1a21; } - ul.nav li:last-child { - margin: 0; } + border: 1px solid white; } + ul.nav li:hover a { + color: #666666; } ul.nav a { border-bottom: none; color: #b1cfe3; } ul.nav a:hover { - color: #cccccc; } + color: black; } + ul.nav > li:first-child { + border-top-right-radius: 5px; + border-top-left-radius: 5px; } + ul.nav > li:last-child { + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; } #header_below { + z-index: 5; + position: fixed; + height: 40px; + width: 100%; padding: 1em; - position: relative; - background-color: #e6eff7; - margin-left: -2em; - margin-right: -2em; - margin-bottom: 40px; - height: 20px; } - -#left_pane { - background-color: #e6eff7; - border-radius: 5px; } + padding-top: 4em; + padding-bottom: 0; + top: 0; + background-color: rgba(255, 255, 255, 0.8); + margin-left: -2em; } + #header_below img { + width: 200px; + border-radius: 5px; } ul#stream { margin: 0; + margin-left: 210px; padding: 0; text-shadow: 0 1px white; - color: #666666; } + color: #666666; + width: 60%; + min-width: 500px; + max-width: 700px; } ul#stream > li { list-style: none; padding: 1em; border-bottom: 1px solid #f1f1f1; } - ul#stream > li img.avatar { - width: 45px; - background: white; } - ul#stream > li:hover { - background-color: #eeeeee; - border-bottom: 1px solid #cccccc; } - ul#stream > li:hover .message { - color: black; } - ul#stream > li:hover .time { - color: #666666; } li.message { - margin-left: 10px; - margin-top: -2px; - line-height: 17px; + line-height: 110%; font-size: 120%; font-family: "Lucida Grande"; color: #999999; @@ -151,18 +141,18 @@ li.message { color: #bababa; font-size: 70%; } -div.big_text { +h1 { position: relative; font-size: 24px; font-weight: bold; line-height: 36px; } - div.big_text p.description { + h1 p.description, h1 span.description { font-weight: normal; color: #999999; } - div.big_text .big_number { + h1 .big_number { font-size: 300%; line-height: 100%; } - div.big_text .filters { + h1 .filters { position: absolute; right: 0; display: inline; diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index 60587342d..f8336dd96 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -3,20 +3,11 @@ body :family 'helvetica', 'arial', 'sans-serif' :padding 2em :margin 0 - - a :color #CC1E14 :text :decoration none -h1, -h2, -h3, -h4 - :text-shadow 1px 1px 1px #eaeaea - - #flash_notice, #flash_error, #flash_alert @@ -59,6 +50,11 @@ h4 :margin 0 header + :z-index 10 + + :position absolute + :width 100% + :margin :top -2em :right -2em @@ -97,55 +93,63 @@ ul.nav :position absolute :padding 0 :margin 0 - :font - :size 130% - :bottom 2px + :width 200px li - :display inline - :margin - :right 0.5em + :display block :padding 5px 10px :background #F2F8FC :border 1px solid #fff - :border-bottom none - - li:first-child - :background #fff + + li:hover a - :color #1A1A21 + :color #666 - li:last-child - :margin 0 a :border :bottom none :color #B1CFE3 - &:hover - :color #ccc + :color #000 + + > li:first-child + :border-top-right-radius 5px + :border-top-left-radius 5px + + > li:last-child + :border-bottom-right-radius 5px + :border-bottom-left-radius 5px + #header_below + :z-index 5 + :position fixed + :height 40px + :width 100% :padding 1em - :position relative + :top 4em + :bottom 0 + :top 0 + :background - :color #e6eff7 + :color rgba( 255, 255, 255, 0.8) + + //:background + //:color rgba(230, 239, 247, 0.5) :margin :left -2em - :right -2em - :bottom 40px - :height 20px - + + img + :width 200px + :border-radius 5px -#left_pane - :background - :color #E6EFF7 - :border-radius 5px + ul#stream :margin 0 + :margin-left 210px :padding 0 :text-shadow 0 1px #fff :color #666 @@ -154,31 +158,13 @@ ul#stream :padding 1em :border :bottom 1px solid #f1f1f1 - - - img.avatar - :width 45px - background: #fff - - > li:hover - :background - :color #eee - :border - :bottom 1px solid #ccc - > li:hover .message - :color #000 - > li:hover .time - :color #666 - - - + :width 60% + :min-width 500px + :max-width 700px li.message - :margin - :left 10px - :top -2px - :line-height 17px + :line-height 110% :font :size 120% :family 'Lucida Grande' @@ -197,14 +183,14 @@ li.message :font-size 70% -div.big_text +h1 :position relative :font :size 24px :weight bold :line-height 36px - p.description + p.description, span.description :font :weight normal :color #999