From 3121cf57d3d55ae3751c39b00e5f0e603f15d182 Mon Sep 17 00:00:00 2001 From: Raphael Date: Wed, 25 Aug 2010 11:35:50 -0700 Subject: [PATCH] Refactored top nav haml, added non-functional gear link next to group --- app/views/layouts/application.html.haml | 47 ++++++--------- app/views/shared/_group_friends.haml | 10 +++ app/views/shared/_group_nav.haml | 23 ++++--- public/stylesheets/application.css | 77 +++++++++++------------- public/stylesheets/sass/application.sass | 65 ++++++++------------ 5 files changed, 103 insertions(+), 119 deletions(-) create mode 100644 app/views/shared/_group_friends.haml diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 2b310ab86..9d4fe4b37 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -31,23 +31,6 @@ %header .container - #session_action - %ul#user_menu - %li#global_search - = form_tag(users_path, :method => 'get') do - %label{:for => 'q'} Search - = text_field_tag 'q' - - %li - %ul#other_user_menu - %li - = owner_image_tag - = link_to current_user.real_name, current_user.person - %li.requests= link_to "requests (#{@request_count})", requests_path, :class => new_request(@request_count) - %li.settings= link_to "settings", edit_user_path(current_user) - %li.logout= link_to "logout", destroy_user_session_path - - #diaspora_text{:href => root_path} = link_to "DIASPORA*", root_path %span.sub_text @@ -56,25 +39,29 @@ %span{:style => "padding-left:30px;"} = link_to "photos", albums_path + #session_action + #global_search + = form_tag(users_path, :method => 'get') do + %label{:for => 'q'} Search + = text_field_tag 'q' + + %ul#user_menu + %li + = owner_image_tag + = link_to current_user.real_name, current_user.person + %li.requests= link_to "requests (#{@request_count})", requests_path, :class => new_request(@request_count) + %li.settings= link_to "settings", edit_user_path(current_user) + %li.logout= link_to "logout", destroy_user_session_path + + #sub_header .container - #group - %ul - %li{:class => ("selected" if @group == :all)} - = link_to "All Groups", root_url - - for group in @groups - %li{:class => ("selected" if current_group?(group))} - = link_for_group group - %li.new_group= link_to("new", "#add_group_pane", :id => "add_group_button") - - .yo{ :style => "display:none;"} - #add_group_pane - = render "groups/new_group" + = render "shared/group_nav" .container .span-5.last %h1 Friends - = render "shared/group_nav" + = render "shared/group_friends" .span-19.last = yield diff --git a/app/views/shared/_group_friends.haml b/app/views/shared/_group_friends.haml new file mode 100644 index 000000000..206d588c1 --- /dev/null +++ b/app/views/shared/_group_friends.haml @@ -0,0 +1,10 @@ +#friend_pictures + - for friend in @friends + = person_image_link(friend) + + - unless @group == :all + = link_to (image_tag('add_friend_button.png', :height => "50px", :width => "50px")), "#add_request_pane", :id => 'add_request_button' + + .yo{:style => 'display:none'} + #add_request_pane + = render "requests/new_request" diff --git a/app/views/shared/_group_nav.haml b/app/views/shared/_group_nav.haml index 206d588c1..2d959b70b 100644 --- a/app/views/shared/_group_nav.haml +++ b/app/views/shared/_group_nav.haml @@ -1,10 +1,15 @@ -#friend_pictures - - for friend in @friends - = person_image_link(friend) +#group_nav + %ul + %li{:class => ("selected" if @group == :all)} + = link_to "All Groups", root_url + - for group in @groups + %li{:id => group.id, :class => ("selected" if current_group?(group))} + = link_for_group group + %span{:class => '⚙'} + = link_to "⚙", "#", :class => "edit_group_button" - - unless @group == :all - = link_to (image_tag('add_friend_button.png', :height => "50px", :width => "50px")), "#add_request_pane", :id => 'add_request_button' - - .yo{:style => 'display:none'} - #add_request_pane - = render "requests/new_request" + %li.new_group= link_to("new", "#add_group_pane", :id => "add_group_button") + + .yo{ :style => "display:none;"} + #add_group_pane + = render "groups/new_group" diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index ad56fe4b5..1578b5950 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -79,12 +79,14 @@ header { border-bottom: 2px solid #666666; padding: 0; } header #diaspora_text { - padding-top: 5px; + position: absolute; + display: inline; font-family: "BrandonGrotesqueLightRegular"; font-size: 16px; border: none; color: white; - text-shadow: 0 2px 0 black; } + text-shadow: 0 2px 0 black; + top: 3px; } header #diaspora_text a { color: #666666; } header #diaspora_text a:hover { @@ -93,6 +95,8 @@ header { header #diaspora_text span.sub_text { text-shadow: none; } header #session_action { + position: relative; + display: inline; float: right; padding-right: 10px; } header #session_action a.new_requests { @@ -446,27 +450,34 @@ h1.big_text { .image_cycle img { display: none; } -#group { +#group_nav { color: black; } - #group ul { + #group_nav ul { margin: 0; margin-bottom: -5px; padding: 0; list-style: none; font-size: 14px; } - #group ul > li { + #group_nav ul > li { display: inline; - margin-right: 1.5em; } - #group ul > li:hover a { + margin-right: 1.5em; + padding: 0.3em 0.5em; + padding-right: 0.3em; } + #group_nav ul > li:hover { background-color: #333333; } - #group ul > li a { - color: #999999; - padding: 0.3em 0.5em; } - #group ul .selected a { + #group_nav ul > li a { + color: #999999; } + #group_nav ul > li a:hover { + background: none; } + #group_nav ul .⚙ { + margin-left: 4px; } + #group_nav ul .⚙ a { + color: #333333; } + #group_nav ul .selected { background-color: white; color: black; } - #group ul .selected:hover a { - background-color: #eeeeee; } + #group_nav ul .selected:hover { + background-color: #eeeeee; } #add_photo_loader { position: absolute; @@ -475,22 +486,6 @@ h1.big_text { top: 4px; } #user_menu { - position: relative; - padding: 0 5px; - margin: 0; - list-style: none; - top: 1px; } - #user_menu a { - color: #999999; } - #user_menu > li { - display: inline; - margin-right: 1em; } - #user_menu > li:first-child { - margin-right: 0; } - #user_menu > li:last-child { - margin-right: 0; } - -#other_user_menu { position: absolute; z-index: 10; top: 0; @@ -499,51 +494,51 @@ h1.big_text { padding: 0; margin: 0; list-style: none; } - #other_user_menu > li { + #user_menu > li { display: none; background-color: white; width: 180px; height: 29px; border-left: 2px solid black; border-right: 2px solid black; } - #other_user_menu > li:hover { + #user_menu > li:hover { background-color: #eeeeee; } - #other_user_menu > li:first-child { + #user_menu > li:first-child { display: block; background: none; border-left: 2px solid #333333; border-right: 2px solid #333333; } - #other_user_menu > li:first-child a { + #user_menu > li:first-child a { color: #999999; } - #other_user_menu > li:first-child img { + #user_menu > li:first-child img { position: absolute; width: 20px; height: 20px; top: 3px; left: 9px; } - #other_user_menu > li:last-child { + #user_menu > li:last-child { border-bottom: 2px solid black; } - #other_user_menu > li a { + #user_menu > li a { display: block; height: 100%; padding-left: 40px; padding-top: 5px; color: black; } - #other_user_menu > li a:hover { + #user_menu > li a:hover { background-color: transparent; } - #other_user_menu .requests { + #user_menu .requests { background-image: url("/images/glyphish-icons/icons/40-inbox.png"); background-repeat: no-repeat; background-position: 5px; } - #other_user_menu .settings { + #user_menu .settings { background-image: url("/images/glyphish-icons/icons/20-gear2.png"); background-repeat: no-repeat; background-position: 5px; } - #other_user_menu .logout { + #user_menu .logout { background-image: url("/images/glyphish-icons/icons/54-lock.png"); background-repeat: no-repeat; background-position: 5px; } - #other_user_menu:hover li { + #user_menu:hover li { display: block; } #global_search { diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index b68e35d79..2b6216eba 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -87,8 +87,8 @@ header :padding 0 #diaspora_text - :padding - :top 5px + :position absolute + :display inline :font :family 'BrandonGrotesqueLightRegular' :size 16px @@ -96,6 +96,7 @@ header :color #fff :text :shadow 0 2px 0 #000 + :top 3px a :color #666 @@ -109,6 +110,8 @@ header :shadow none #session_action + :position relative + :display inline :float right a &.new_requests @@ -568,7 +571,7 @@ h1.big_text img :display none -#group +#group_nav :color #000 ul :margin 0 @@ -582,26 +585,31 @@ h1.big_text :display inline :margin :right 1.5em + :padding 0.3em 0.5em + :right 0.3em &:hover - a - :background - :color #333 + :background + :color #333 a :color #999 - :padding 0.3em 0.5em - - - .selected + &:hover + :background none + + .⚙ + :margin + :left 4px a - :background - :color #fff - :color #000 + :color #333 + + .selected + :background + :color #fff + :color #000 &:hover - a - :background - :color #eee + :background + :color #eee #add_photo_loader @@ -611,29 +619,6 @@ h1.big_text :top 4px #user_menu - :position relative - :padding 0 5px - :margin 0 - :list-style none - :top 1px - - a - :color #999 - - > li - :display inline - :margin - :right 1em - - &:first-child - :margin - :right 0 - - &:last-child - :margin - :right 0 - -#other_user_menu :position absolute :z-index 10 :top 0 @@ -744,3 +729,5 @@ h1.big_text :size 12px :margin :top -3px + +