Refactored top nav haml, added non-functional gear link next to group

This commit is contained in:
Raphael 2010-08-25 11:35:50 -07:00
parent 8497586547
commit 3121cf57d3
5 changed files with 103 additions and 119 deletions

View file

@ -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

View file

@ -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"

View file

@ -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"

View file

@ -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 {

View file

@ -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