From aee5f7f04fb7e829b7f1246bf419bcc5d0bb9627 Mon Sep 17 00:00:00 2001 From: danielvincent Date: Sun, 20 Jun 2010 11:49:05 -0700 Subject: [PATCH] took out filler elements --- app/controllers/dashboard_controller.rb | 3 +- app/views/bookmarks/_pane.html.haml | 8 +++ app/views/bookmarks/index.html.haml | 19 ++---- app/views/dashboard/index.html.haml | 60 ++++++----------- app/views/devise/sessions/new.html.haml | 3 - app/views/layouts/application.html.haml | 36 +++++----- app/views/status_messages/_pane.html.haml | 14 ++-- app/views/status_messages/index.html.haml | 36 ++-------- public/stylesheets/application.css | 80 +++++++++++++---------- public/stylesheets/sass/application.sass | 80 ++++++++++++++--------- 10 files changed, 159 insertions(+), 180 deletions(-) create mode 100644 app/views/bookmarks/_pane.html.haml diff --git a/app/controllers/dashboard_controller.rb b/app/controllers/dashboard_controller.rb index 8736ea949..ed96cf866 100644 --- a/app/controllers/dashboard_controller.rb +++ b/app/controllers/dashboard_controller.rb @@ -4,7 +4,8 @@ class DashboardController < ApplicationController include ApplicationHelper def index - @posts = StatusMessage.all + @bookmarks = Bookmark.all + @messages = StatusMessage.all end diff --git a/app/views/bookmarks/_pane.html.haml b/app/views/bookmarks/_pane.html.haml new file mode 100644 index 000000000..1d9bbde35 --- /dev/null +++ b/app/views/bookmarks/_pane.html.haml @@ -0,0 +1,8 @@ +%li.message + %span.from= link_to post.owner, "#" + %b shared a link + %br + = post.title + = link_to post.link, "#" + %div.time= "#{time_ago_in_words(post.updated_at)} ago" + diff --git a/app/views/bookmarks/index.html.haml b/app/views/bookmarks/index.html.haml index c4ac79f65..59e5da9f8 100644 --- a/app/views/bookmarks/index.html.haml +++ b/app/views/bookmarks/index.html.haml @@ -1,17 +1,8 @@ - title "Bookmarks" -%table - %tr - %th Title - %th Link - %th Owner - - for bookmark in @bookmarks - %tr - %td= bookmark.title - %td= link_to bookmark.link, bookmark.link - %td= bookmark.owner - %td= link_to 'Show', bookmark - %td= link_to 'Edit', edit_bookmark_path(bookmark) - %td= link_to 'Destroy', bookmark, :confirm => 'Are you sure?', :method => :delete +%div.big_text + %p.description= link_to "New Bookmark", new_bookmark_path -%p= link_to "New Bookmark", new_bookmark_path +%ul#stream + - for bookmark in @bookmarks + = render "pane", :post => bookmark diff --git a/app/views/dashboard/index.html.haml b/app/views/dashboard/index.html.haml index 917e173d7..b92444284 100644 --- a/app/views/dashboard/index.html.haml +++ b/app/views/dashboard/index.html.haml @@ -1,41 +1,21 @@ +%div.big_text + recent activity + %div.filters + = link_to "displaying all", "#" +%ul#stream + - for post in @messages + = render "status_messages/pane", :post => post -/%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-15.append-2.last - - %div.small_text - what's crackalackin', daniel? - %div#publish - - form_for 'StatusMessage' do |f| - = f.text_field :thought - - %div.big_text - recent activity - %div.filters - = link_to "displaying all", "#" - - - %ul#stream - - for post in @posts - = render "status_messages/pane", :post => post - -.span-7.last - - %div.info_pane - %img{:src => "/images/mocks/bp.jpeg", :width => '100%', :class => "profile_image"} - %div.big_text - daniel grippi - - %div.info_pane - %div.big_text - requests - - %div.big_text - %div.big_number= link_to "30", "#" - new requests - +/.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", "#" diff --git a/app/views/devise/sessions/new.html.haml b/app/views/devise/sessions/new.html.haml index 7855cf39b..f560b84b6 100644 --- a/app/views/devise/sessions/new.html.haml +++ b/app/views/devise/sessions/new.html.haml @@ -1,6 +1,4 @@ %div.centered - %div.big_text - sign in = form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| = f.text_field :email @@ -10,6 +8,5 @@ - if devise_mapping.rememberable? = f.check_box :remember_me = f.label :remember_me - %br = f.submit "Sign in" = render :partial => "devise/shared/links" diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 0afd02c64..f82d29aea 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -15,28 +15,28 @@ = yield(:head) %body - #header - .container - #huge_star * - %a#diaspora_text{:href => root_path} - %img{:src => '/images/diaspora_white.png'} + %header + %a#diaspora_text{:href => root_path} + %img{:src => '/images/diaspora_white.png'} - #session_action - - if user_signed_in? - = link_to User.first.email, destroy_user_session_path - - else - = link_to "login", new_user_session_path - + #session_action + - if user_signed_in? + = link_to User.first.email, destroy_user_session_path + - else + = link_to "login", new_user_session_path + #header_below - .container + %nav %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 "bookmarks", bookmarks_path + %li= link_to "blogs", blogs_path %li= link_to "friends", friends_path - .container - - if show_title? - %h2= yield(:title) - - flash.each do |name, msg| - = content_tag :div, msg, :id => "flash_#{name}" - = yield + - if show_title? + %div.big_text= yield(:title) + - flash.each do |name, msg| + = content_tag :div, msg, :id => "flash_#{name}" + = yield diff --git a/app/views/status_messages/_pane.html.haml b/app/views/status_messages/_pane.html.haml index f09dcb9b2..3b7048936 100644 --- a/app/views/status_messages/_pane.html.haml +++ b/app/views/status_messages/_pane.html.haml @@ -1,9 +1,7 @@ -%li - %img{:src => "/images/mocks/user_pic.jpeg", :class => "avatar"} - %sp.message - %sp.from= link_to post.owner, "#" - /%sp.from Daniel Grippi - = post.message - %br - %sp.time= "#{time_ago_in_words(post.updated_at)} ago" +%li.message + %span.from + = link_to post.owner, "#" + = post.message + %div.time + = "#{time_ago_in_words(post.updated_at)} ago" diff --git a/app/views/status_messages/index.html.haml b/app/views/status_messages/index.html.haml index 9653e463d..b7951b787 100644 --- a/app/views/status_messages/index.html.haml +++ b/app/views/status_messages/index.html.haml @@ -1,34 +1,10 @@ -- title "Home" +- title "status messages" -%h3 Your latest message -%h2= my_latest_message +%div.big_text + %p.description= my_latest_message + %p.description= link_to "New Status Message", new_status_message_path -%br -%br -%br - -%h3 Messages -%ul +%ul#stream - for status_message in @status_messages - %li - = "#{status_message.message} by #{status_message.owner} #{time_ago_in_words(status_message.created_at)} ago" - = link_to 'Show', status_message - | - =link_to 'Destroy', status_message, :confirm => 'Are you sure?', :method => :delete + = render "pane", :post => status_message - -%h2 Friends -%table - %tr - %th username - %th url - - for friend in @friends - %tr - %td= friend.username - %td= friend.url - %td= link_to 'Show', friend - %td= link_to 'Destroy', friend, :confirm => 'Are you sure?', :method => :delete - - - -%p= link_to "New Status Message", new_status_message_path diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index a22a52242..e4599c8ec 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -1,5 +1,7 @@ body { - font-family: "helvetica", "arial", "sans-serif"; } + font-family: "helvetica", "arial", "sans-serif"; + padding: 2em; + margin: 0; } a { color: #cc1e14; @@ -50,31 +52,29 @@ h4 { .error_messages ul { margin: 0; } -#header { +header { + margin-top: -2em; + margin-right: -2em; + margin-left: -2em; height: 30px; color: white; - font-size: 110%; background-color: #1a1a21; border-bottom: 2px solid white; padding-top: 5px; } - #header #huge_star { - display: none; - position: absolute; - font-family: "helvetica neue", "helvetica", "arial", "sans-serif"; - font-size: 60px; - top: -15px; } - #header #diaspora_text { + header #diaspora_text { position: absolute; border: none; - top: 8px; } - #header #session_action { - float: right; - font-size: 110%; - margin-top: 1px; } - #header #session_action a { + top: 8px; + left: 1em; } + header #session_action { + position: absolute; + right: 1em; + font-size: 120%; + margin-top: 2px; } + header #session_action a { color: #cccccc; border: none; } - #header #session_action a:hover { + header #session_action a:hover { color: white; } ul.nav { @@ -103,11 +103,13 @@ ul.nav { color: #cccccc; } #header_below { + padding: 1em; position: relative; background-color: #e6eff7; - text-align: right; - height: 70px; - margin-bottom: 40px; } + margin-left: -2em; + margin-right: -2em; + margin-bottom: 40px; + height: 20px; } #left_pane { background-color: #e6eff7; @@ -121,26 +123,32 @@ ul#stream { ul#stream > li { list-style: none; padding: 1em; - border-bottom: 1px solid #f1f1f1; } + border-bottom: 1px solid #f1f1f1; + border-radius: 2px; } ul#stream > li img.avatar { width: 45px; background: white; } + ul#stream > li:hover { + background-color: #f1f1f1; + border-bottom: 1px solid #cccccc; } + ul#stream > li:hover .message { + color: black; } + ul#stream > li:hover .time { + color: #666666; } -sp.message { - position: absolute; - float: left; +li.message { margin-left: 10px; margin-top: -2px; line-height: 17px; font-size: 120%; font-family: "Lucida Grande"; - color: #666666; - text-shadow: none; - width: 480px; } - sp.message sp.from { + color: #999999; + text-shadow: none; } + li.message span.from { color: black; - font-weight: bold; } - sp.message sp.time { + font-weight: bold; + margin-right: 0.2em; } + li.message div.time { color: #bababa; font-size: 70%; } @@ -167,7 +175,7 @@ div.small_text { font-size: 18px; font-weight: bold; } -#publish input { +#publish input#thought { font-size: 30px; padding: 7px; border-radius: 5px; @@ -181,10 +189,13 @@ div.small_text { border: 2px solid #eaeaea; } form { - font-size: 130%; } + font-size: 430%; + margin: 1em; + margin-left: 0em; } form input { font-size: 150%; - padding: 0.2em; } + padding: 0.2em; + max-width: 100%; } .centered { text-align: center; } @@ -193,4 +204,5 @@ form { padding: 1em; background-color: #1a1a21; color: #f5fafd; - margin-bottom: 1em; } + margin-bottom: 1em; + border-radius: 2px; } diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index 61e34bfbd..ccdc65d36 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -1,6 +1,9 @@ body :font :family 'helvetica', 'arial', 'sans-serif' + :padding 2em + :margin 0 + a :color #CC1E14 @@ -55,11 +58,14 @@ h4 ul :margin 0 -#header +header + :margin + :top -2em + :right -2em + :left -2em + :height 30px :color #fff - :font - :size 110% :background :color #1A1A21 :border @@ -67,27 +73,19 @@ h4 :padding :top 5px - - #huge_star - :display none - :position absolute - :font - :family 'helvetica neue', 'helvetica', 'arial', 'sans-serif' - :size 60px - //:background - //:color #ff3378 - :top -15px - #diaspora_text :position absolute :border none :top 8px - + :left 1em #session_action - :float right - :font-size 110% - :margin-top 1px + :position absolute + :right 1em + :font + :size 120% + :margin + :top 2px a :color #ccc :border none @@ -129,13 +127,15 @@ ul.nav #header_below + :padding 1em :position relative :background :color #e6eff7 - :text-align right - :height 70px :margin + :left -2em + :right -2em :bottom 40px + :height 20px #left_pane @@ -152,18 +152,30 @@ ul#stream > li :list-style none :padding 1em - //:-webkit-box-shadow 0 4px 5px -5px #999 :border :bottom 1px solid #f1f1f1 + img.avatar :width 45px background: #fff + :border-radius 2px + + > li:hover + :background + :color #f1f1f1 + :border + :bottom 1px solid #ccc + > li:hover .message + :color #000 + > li:hover .time + :color #666 + + -sp.message - :position absolute - :float left + +li.message :margin :left 10px :top -2px @@ -171,16 +183,17 @@ sp.message :font :size 120% :family 'Lucida Grande' - :color #666 + :color #999 :text-shadow none - :width 480px - sp.from + span.from :color #000 :font :weight bold + :margin + :right 0.2em - sp.time + div.time :color #bababa :font-size 70% @@ -216,10 +229,8 @@ div.small_text :size 18px :weight bold - - #publish - input + input#thought :font :size 30px :padding 7px @@ -239,12 +250,16 @@ div.small_text form :font - :size 130% + :size 430% + :margin 1em + :margin-left 0em input :font :size 150% :padding 0.2em + :max-width 100% + .centered :text-align center @@ -256,3 +271,4 @@ form :color #f5fafd :margin :bottom 1em + :border-radius 2px