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