nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

47
app/views/layouts/application.html.haml
View file

@ -31,23 +31,6 @@
%header %header
.container .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} #diaspora_text{:href => root_path}
= link_to "DIASPORA*", root_path = link_to "DIASPORA*", root_path
%span.sub_text %span.sub_text
@ -56,25 +39,29 @@
%span{:style => "padding-left:30px;"} %span{:style => "padding-left:30px;"}
= link_to "photos", albums_path = 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 #sub_header
.container .container
#group = render "shared/group_nav"
%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"
.container .container
.span-5.last .span-5.last
%h1 Friends %h1 Friends
= render "shared/group_nav" = render "shared/group_friends"
.span-19.last .span-19.last
= yield = yield

10
app/views/shared/_group_friends.haml Normal file
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"

23
app/views/shared/_group_nav.haml
View file

@ -1,10 +1,15 @@
#friend_pictures #group_nav
- for friend in @friends %ul
= person_image_link(friend) %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 %li.new_group= link_to("new", "#add_group_pane", :id => "add_group_button")
= link_to (image_tag('add_friend_button.png', :height => "50px", :width => "50px")), "#add_request_pane", :id => 'add_request_button'
.yo{ :style => "display:none;"}
.yo{:style => 'display:none'} #add_group_pane
#add_request_pane = render "groups/new_group"
= render "requests/new_request"

77
public/stylesheets/application.css
View file

@ -79,12 +79,14 @@ header {
border-bottom: 2px solid #666666; border-bottom: 2px solid #666666;
padding: 0; } padding: 0; }
header #diaspora_text { header #diaspora_text {
padding-top: 5px; position: absolute;
display: inline;
font-family: "BrandonGrotesqueLightRegular"; font-family: "BrandonGrotesqueLightRegular";
font-size: 16px; font-size: 16px;
border: none; border: none;
color: white; color: white;
text-shadow: 0 2px 0 black; } text-shadow: 0 2px 0 black;
top: 3px; }
header #diaspora_text a { header #diaspora_text a {
color: #666666; } color: #666666; }
header #diaspora_text a:hover { header #diaspora_text a:hover {
@ -93,6 +95,8 @@ header {
header #diaspora_text span.sub_text { header #diaspora_text span.sub_text {
text-shadow: none; } text-shadow: none; }
header #session_action { header #session_action {
position: relative;
display: inline;
float: right; float: right;
padding-right: 10px; } padding-right: 10px; }
header #session_action a.new_requests { header #session_action a.new_requests {
@ -446,27 +450,34 @@ h1.big_text {
.image_cycle img { .image_cycle img {
display: none; } display: none; }
#group { #group_nav {
color: black; } color: black; }
#group ul { #group_nav ul {
margin: 0; margin: 0;
margin-bottom: -5px; margin-bottom: -5px;
padding: 0; padding: 0;
list-style: none; list-style: none;
font-size: 14px; } font-size: 14px; }
#group ul > li { #group_nav ul > li {
display: inline; display: inline;
margin-right: 1.5em; } margin-right: 1.5em;
#group ul > li:hover a { padding: 0.3em 0.5em;
padding-right: 0.3em; }
#group_nav ul > li:hover {
background-color: #333333; } background-color: #333333; }
#group ul > li a { #group_nav ul > li a {
color: #999999; color: #999999; }
padding: 0.3em 0.5em; } #group_nav ul > li a:hover {
#group ul .selected a { background: none; }
#group_nav ul .⚙ {
margin-left: 4px; }
#group_nav ul .⚙ a {
color: #333333; }
#group_nav ul .selected {
background-color: white; background-color: white;
color: black; } color: black; }
#group ul .selected:hover a { #group_nav ul .selected:hover {
background-color: #eeeeee; } background-color: #eeeeee; }
#add_photo_loader { #add_photo_loader {
position: absolute; position: absolute;
@ -475,22 +486,6 @@ h1.big_text {
top: 4px; } top: 4px; }
#user_menu { #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; position: absolute;
z-index: 10; z-index: 10;
top: 0; top: 0;
@ -499,51 +494,51 @@ h1.big_text {
padding: 0; padding: 0;
margin: 0; margin: 0;
list-style: none; } list-style: none; }
#other_user_menu > li { #user_menu > li {
display: none; display: none;
background-color: white; background-color: white;
width: 180px; width: 180px;
height: 29px; height: 29px;
border-left: 2px solid black; border-left: 2px solid black;
border-right: 2px solid black; } border-right: 2px solid black; }
#other_user_menu > li:hover { #user_menu > li:hover {
background-color: #eeeeee; } background-color: #eeeeee; }
#other_user_menu > li:first-child { #user_menu > li:first-child {
display: block; display: block;
background: none; background: none;
border-left: 2px solid #333333; border-left: 2px solid #333333;
border-right: 2px solid #333333; } border-right: 2px solid #333333; }
#other_user_menu > li:first-child a { #user_menu > li:first-child a {
color: #999999; } color: #999999; }
#other_user_menu > li:first-child img { #user_menu > li:first-child img {
position: absolute; position: absolute;
width: 20px; width: 20px;
height: 20px; height: 20px;
top: 3px; top: 3px;
left: 9px; } left: 9px; }
#other_user_menu > li:last-child { #user_menu > li:last-child {
border-bottom: 2px solid black; } border-bottom: 2px solid black; }
#other_user_menu > li a { #user_menu > li a {
display: block; display: block;
height: 100%; height: 100%;
padding-left: 40px; padding-left: 40px;
padding-top: 5px; padding-top: 5px;
color: black; } color: black; }
#other_user_menu > li a:hover { #user_menu > li a:hover {
background-color: transparent; } background-color: transparent; }
#other_user_menu .requests { #user_menu .requests {
background-image: url("/images/glyphish-icons/icons/40-inbox.png"); background-image: url("/images/glyphish-icons/icons/40-inbox.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 5px; } background-position: 5px; }
#other_user_menu .settings { #user_menu .settings {
background-image: url("/images/glyphish-icons/icons/20-gear2.png"); background-image: url("/images/glyphish-icons/icons/20-gear2.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 5px; } background-position: 5px; }
#other_user_menu .logout { #user_menu .logout {
background-image: url("/images/glyphish-icons/icons/54-lock.png"); background-image: url("/images/glyphish-icons/icons/54-lock.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 5px; } background-position: 5px; }
#other_user_menu:hover li { #user_menu:hover li {
display: block; } display: block; }
#global_search { #global_search {

65
public/stylesheets/sass/application.sass
View file

@ -87,8 +87,8 @@ header
:padding 0 :padding 0
#diaspora_text #diaspora_text
:padding :position absolute
:top 5px :display inline
:font :font
:family 'BrandonGrotesqueLightRegular' :family 'BrandonGrotesqueLightRegular'
:size 16px :size 16px
@ -96,6 +96,7 @@ header
:color #fff :color #fff
:text :text
:shadow 0 2px 0 #000 :shadow 0 2px 0 #000
:top 3px
a a
:color #666 :color #666
@ -109,6 +110,8 @@ header
:shadow none :shadow none
#session_action #session_action
:position relative
:display inline
:float right :float right
a a
&.new_requests &.new_requests
@ -568,7 +571,7 @@ h1.big_text
img img
:display none :display none
#group #group_nav
:color #000 :color #000
ul ul
:margin 0 :margin 0
@ -582,26 +585,31 @@ h1.big_text
:display inline :display inline
:margin :margin
:right 1.5em :right 1.5em
:padding 0.3em 0.5em
:right 0.3em
&:hover &:hover
a :background
:background :color #333
:color #333
a a
:color #999 :color #999
:padding 0.3em 0.5em &:hover
:background none
.selected .⚙
:margin
:left 4px
a a
:background :color #333
:color #fff
:color #000 .selected
:background
:color #fff
:color #000
&:hover &:hover
a :background
:background :color #eee
:color #eee
#add_photo_loader #add_photo_loader
@ -611,29 +619,6 @@ h1.big_text
:top 4px :top 4px
#user_menu #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 :position absolute
:z-index 10 :z-index 10
:top 0 :top 0
@ -744,3 +729,5 @@ h1.big_text
:size 12px :size 12px
:margin :margin
:top -3px :top -3px