diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 2b310ab869bf3ed23b0a383b684b9bdbd0896513..240805716da44f6c0239216c967d9129e2532505 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -17,7 +17,7 @@
= javascript_include_tag 'fancybox/jquery.fancybox-1.3.1.pack'
- = javascript_include_tag 'view', 'image_picker', 'group_nav'
+ = javascript_include_tag 'view', 'image_picker', 'group_nav', 'stream'
= render 'js/websocket_js'
= csrf_meta_tag
@@ -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 0000000000000000000000000000000000000000..206d588c12e28ed4b8975802bc6a7f4e1dd8c987
--- /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 206d588c12e28ed4b8975802bc6a7f4e1dd8c987..2d959b70befe2614b027c28c46afabc36e515e14 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/javascripts/stream.js b/public/javascripts/stream.js
new file mode 100644
index 0000000000000000000000000000000000000000..2ead970a4a43b8f4ba9b9d0a788309abc6b453d4
--- /dev/null
+++ b/public/javascripts/stream.js
@@ -0,0 +1,49 @@
+$(document).ready(function(){
+ $('.comment_set').each(function(index) {
+ var $this = $(this);
+ if($this.children().length > 1) {
+ $this.parent().show();
+ var show_comments_toggle = $this.parent().prev().children(".show_post_comments");
+ show_comments_toggle.html("hide comments ("+ ($this.children().length - 1) + ")");
+ };
+ });
+});//end document ready
+
+$("#stream li").live('mouseover',function() {
+ $(this).children(".destroy_link").fadeIn(0);
+});
+
+$("#stream li").live('mouseout',function() {
+ $(this).children(".destroy_link").fadeOut(0);
+});
+
+$(".show_post_comments").live('click', function(event) {
+ event.preventDefault();
+ if( $(this).hasClass( "visible")) {
+ $(this).html($(this).html().replace("hide", "show"));
+ $(this).closest("li").children(".content").children(".comments").fadeOut(100);
+ } else {
+ $(this).html($(this).html().replace("show", "hide"));
+ $(this).closest("li").children(".content").children(".comments").fadeIn(100);
+ }
+ $(this).toggleClass( "visible" );
+});
+
+$(".comment_box").live('focus', function(evt){
+ var $this = $(this);
+ $this.attr("rows", 2);
+ $this.parents("p").parents("form").children("p").children(".comment_submit").fadeIn(200);
+});
+
+$(".comment_box").live('blur', function(evt){
+ var $this = $(this);
+ if( $this.val() == '' ) {
+ $this.parents("p").parents("form").children("p").children(".comment_submit").fadeOut(0);
+ $this.attr("rows", 1);
+ }
+});
+
+$(".comment_submit").live('click', function(evt){
+ $this.parents("p").parents("form").children("p").children(".comment_box").attr("rows", 1);
+});
+
diff --git a/public/javascripts/view.js b/public/javascripts/view.js
index 5f70b8f4bb1a73bd08e830371cff631e3ee5762e..62888422a9306077310d57572e40471e65fb42aa 100644
--- a/public/javascripts/view.js
+++ b/public/javascripts/view.js
@@ -1,12 +1,5 @@
$(document).ready(function(){
- $('.comment_set').each(function(index) {
- if($(this).children().length > 1) {
- $(this).parent().show();
- var show_comments_toggle = $(this).parent().prev().children(".show_post_comments");
- show_comments_toggle.html("hide comments ("+ ($(this).children().length - 1) + ")");
- };
- });
$('#debug_info').click(function() {
$('#debug_more').toggle('fast', function() {
@@ -18,26 +11,6 @@ $(document).ready(function(){
$('#flash_notice, #flash_error, #flash_alert').delay(2500).slideUp(130);
- $("#stream li").live('mouseover',function() {
- $(this).children(".destroy_link").fadeIn(0);
- });
-
- $("#stream li").live('mouseout',function() {
- $(this).children(".destroy_link").fadeOut(0);
- });
-
- $(".show_post_comments").live('click', function(event) {
- event.preventDefault();
- if( $(this).hasClass( "visible")) {
- $(this).html($(this).html().replace("hide", "show"));
- $(this).closest("li").children(".content").children(".comments").fadeOut(100);
- } else {
- $(this).html($(this).html().replace("show", "hide"));
- $(this).closest("li").children(".content").children(".comments").fadeIn(100);
- }
- $(this).toggleClass( "visible" );
- });
-
//Called with $(selector).clearForm()
$.fn.clearForm = function() {
return this.each(function() {
@@ -61,27 +34,6 @@ $(document).ready(function(){
speed: 3000
});
-
- //comments/////
-
- $(".comment_box").live('focus', function(evt){
- var $this = $(this);
- $this.attr("rows", 2);
- $this.parents("p").parents("form").children("p").children(".comment_submit").fadeIn(200);
- });
-
- $(".comment_box").live('blur', function(evt){
- var $this = $(this);
- if( $this.val() == '' ) {
- $this.parents("p").parents("form").children("p").children(".comment_submit").fadeOut(0);
- $this.attr("rows", 1);
- }
- });
-
- $(".comment_submit").live('click', function(evt){
- $this.parents("p").parents("form").children("p").children(".comment_box").attr("rows", 1);
- });
-
//buttons//////
@@ -109,9 +61,7 @@ $(document).ready(function(){
$(this).fadeIn("slow");
});
- $(".delete").hover(function(){
- $(this).toggleClass("button");
- });
+
});//end document ready
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index ad56fe4b5fb5d83e3b24bfa22f898aa738081e7f..18c040055e66b02538b6eeaf451e301c0ae10bdc 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 {
@@ -134,6 +138,8 @@ li.message {
li.message .avatar {
float: left;
margin-right: 15px; }
+ li.message .delete:hover {
+ background: #eeeeee; }
li.message .content span.from {
color: black;
font-weight: normal;
@@ -446,27 +452,38 @@ 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:hover a {
+ color: #999999; }
+ #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: black; }
+ #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; }
+ #group_nav ul .selected .âš™ a {
+ color: #333333; }
#add_photo_loader {
position: absolute;
@@ -475,22 +492,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 +500,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 b68e35d792aca511851000810c951d41aca2d674..6c5c0c1178a26fa99230e86163e7bd726cb189ea 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
@@ -157,7 +160,9 @@ li.message
:margin
:right 15px
-
+ .delete:hover
+ :background #eee
+
.content
span.from
:color #000
@@ -568,7 +573,7 @@ h1.big_text
img
:display none
-#group
+#group_nav
:color #000
ul
:margin 0
@@ -582,26 +587,37 @@ h1.big_text
:display inline
:margin
:right 1.5em
+ :padding 0.3em 0.5em
+ :right 0.3em
&:hover
+ :background
+ :color #333
a
- :background
- :color #333
+ :color #999
+
a
:color #999
- :padding 0.3em 0.5em
-
-
- .selected
+ &:hover
+ :background none
+
+ .âš™
+ :margin
+ :left 4px
a
- :background
- :color #fff
:color #000
+
+ .selected
+ :background
+ :color #fff
+ :color #000
&:hover
+ :background
+ :color #eee
+ .âš™
a
- :background
- :color #eee
+ :color #333
#add_photo_loader
@@ -611,29 +627,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 +737,5 @@ h1.big_text
:size 12px
:margin
:top -3px
+
+