From 394ec6d8b1bd86c61925175b46a2107fa62acdef Mon Sep 17 00:00:00 2001 From: AurelioAHeckert Date: Sat, 12 Jan 2008 23:38:16 +0000 Subject: [PATCH] ActionItem152: top bar rework 90% done --- app/helpers/application_helper.rb | 9 ++++----- app/views/layouts/application.rhtml | 57 ++++++++++++++++++++++++++++----------------------------- app/views/shared/categories_menu.rhtml | 7 +++---- public/images/bolota.gif | Bin 0 -> 70 bytes public/stylesheets/common.css | 78 +++++++++++++++++++++++++++++++++++++++++++++--------------------------------- public/stylesheets/help.css | 1 + public/stylesheets/menu.css | 359 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- public/stylesheets/search.css | 1 + 8 files changed, 194 insertions(+), 318 deletions(-) create mode 100644 public/images/bolota.gif diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 3cebafc..3781224 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -112,15 +112,14 @@ module ApplicationHelper def shortcut_header_links if logged_in? [ - ( link_to_myprofile( content_tag('span', _('My profile')), {}, nil, { :id => 'icon_go_home'} ) ), - # MUDAR, O ID acima deve ser no Link 'link_go_home'} ) ), # O ID icon_accessibility tambem tem que aparcer e testei o link nao ta funcionado. - ( link_to content_tag('span', _('Admin')), { :controller => 'admin_panel' }, :id => 'icon_admin' if current_user.person.is_admin?), - ( link_to content_tag('span', _('Logout')), { :controller => 'account', :action => 'logout'}, :id => 'icon_logout', :method => 'post'), + ( link_to content_tag('span', _('Admin')), { :controller => 'admin_panel' }, :id => 'link_admin_panel' if current_user.person.is_admin?), + ( link_to content_tag('span', _('Logout')), { :controller => 'account', :action => 'logout'}, :id => 'link_logout'), ] else [ - ( link_to content_tag('span', _('Login')), { :controller => 'account', :action => 'login' }, :id => 'icon_login' ), + ( link_to content_tag('span', _('Login')), { :controller => 'account', :action => 'login' }, :id => 'link_login' ), ] end.join(" ") end diff --git a/app/views/layouts/application.rhtml b/app/views/layouts/application.rhtml index 799062d..cc6f2c0 100644 --- a/app/views/layouts/application.rhtml +++ b/app/views/layouts/application.rhtml @@ -1,12 +1,12 @@ - - <% if @category %> - Noosfero → <%= @category.full_name %> - <% else %> + <title> + <%- if @category -%> + Noosfero → <%= @category.full_name -%> + <%- else -%> Noosfero - <% end %> + <%- end -%> @@ -26,45 +26,44 @@ <% unless flash[:notice].nil? %> -
+
<%= flash[:notice] %> <%= javascript_tag(visual_effect(:fade, "notice", :duration => 15)) %>
<% end %> + + +
+ <% if @category -%> + <%= @category.full_name(" → ") %> + <% end -%> + <%= javascript_tag(visual_effect(:fade, "path_category", :duration => 10)) %> +
+
-
- -
- <% if @category %> - <%= @category.full_name %> - <% end %> - <%= javascript_tag(visual_effect(:fade, "path_category", :duration => 10)) %> -
-
- - + + + +
+ <%= shortcut_header_links %> + Search +
+
diff --git a/app/views/shared/categories_menu.rhtml b/app/views/shared/categories_menu.rhtml index 3dc236e..c15560d 100644 --- a/app/views/shared/categories_menu.rhtml +++ b/app/views/shared/categories_menu.rhtml @@ -1,8 +1,7 @@ -<%= image_tag 'noosfero.png', :style => 'float: left;' %> -
    -
  • Noosfero
    • <%= shortcut_header_links %>
    • +
      + <%= _("Go Home") %> <% @environment.display_categories.each do |item| %> -
    • > +
    • > <%= item.name %>
        <% item.children.each do |child| %> diff --git a/public/images/bolota.gif b/public/images/bolota.gif new file mode 100644 index 0000000..2001476 Binary files /dev/null and b/public/images/bolota.gif differ diff --git a/public/stylesheets/common.css b/public/stylesheets/common.css index e4b7cce..5fe0a0e 100644 --- a/public/stylesheets/common.css +++ b/public/stylesheets/common.css @@ -1,14 +1,26 @@ body { -margin: 0px; -padding: 0px; + margin: 0px; + padding: 0px; } #notice { -cursor: pointer; -} + cursor: pointer; +} #wrap { -margin:0px; + border: 3px solid #2A5896; +} +body.category1 #wrap { + border-color: #E26B00; +} +body.category2 #wrap { + border-color: #61B60E; +} +body.category3 #wrap { + border-color: #694371; +} +body.category4 #wrap { + border-color: #B80000; } a img { @@ -19,17 +31,17 @@ a:hover img { } #environment_identification { -position: absolute !important; -background: url("../images/bg_blue_logo.png") 5px no-repeat !important; -vertical-align: bottom !important ; -width: 230px !important ; -height: 34px !important ; -line-height: 34px !important ; -padding-left: 60px !important ; + position: absolute !important; + background: url("../images/bg_blue_logo.png") 5px no-repeat !important; + vertical-align: bottom !important ; + width: 230px !important ; + height: 34px !important ; + line-height: 34px !important ; + padding-left: 60px !important ; } #environment_identification:hover { -color: #dfdfdf !important ; + color: #DFDFDF !important ; } div.fieldWithErrors { @@ -59,38 +71,38 @@ div#errorExplanation h2 { } div#footer { -background: #ffffff url("../images/bg_footer.png") repeat-x !important; -background-position: 0px 0px; -font-family: Verdana, Arial, Serif-sans; -margin: 0px !important; -padding: 5px !important; -text-align: center !important; -clear: both !important; -font-size: 10px !important; -color: #545454 !important; + background: #ffffff url("../images/bg_footer.png") repeat-x !important; + background-position: 0px 0px; + font-family: Verdana, Arial, Serif-sans; + margin: 0px !important; + padding: 5px !important; + text-align: center !important; + clear: both !important; + font-size: 10px !important; + color: #545454 !important; } div#footer a { -color: #545454; -text-decoration: none; -border-bottom: 1px dotted #545454; + color: #545454; + text-decoration: none; + border-bottom: 1px dotted #545454; } div#footer a:hover { -color: #000000; -border: 0px; + color: #000000; + border: 0px; } div#footer ul { -margin: 0px; -padding: 0px; + margin: 0px; + padding: 0px; } div#footer li { -display: block; -float: right; -margin-right: 20px; -height: 20px; + display: block; + float: right; + margin-right: 20px; + height: 20px; } /* file manager (big) style */ diff --git a/public/stylesheets/help.css b/public/stylesheets/help.css index 8396607..85ff776 100644 --- a/public/stylesheets/help.css +++ b/public/stylesheets/help.css @@ -1,3 +1,4 @@ + div.help_message { z-index: 10000; width: 600; diff --git a/public/stylesheets/menu.css b/public/stylesheets/menu.css index 084b8d7..27f2855 100644 --- a/public/stylesheets/menu.css +++ b/public/stylesheets/menu.css @@ -1,280 +1,145 @@ -/* Geral Bar */ -#noosfero_bar { - width: 100%; - height: 40px; - padding: 0px; - margin-left: -3px; - _margin-left: -0px; - margin-top: -3px; - font-family: Sans, Verdana, Arial; - z-index: 9999; -} - -/* Accessibility Bar */ - -#accessibility_bar { -position: absolute; -top: 35px; -margin-left: 15px; -height: 20px; -line-height: 20px; -font-size: 12px !important ; -font-family: Sans, Verdana, Arial !important ; -vertical-align: middle !important ; -text-align: left; -} - -#accessibility_bar a { -text-decoration: none; -color: #dfdfdf; -padding-left: 9px; -background: url("../images/ico_enterlink.gif") no-repeat; -background-position: 0px 6px; -padding-right: 4px; -} - -#accessibility_bar a:hover { -color: #ffffff; -text-decoration: underline; +#accessibility_menu { + position: absolute; + font-size: 1px; } #path_category { -font-weight: bold; -color: #545454; -z-index: 2000; -padding-top: 4px; + position: absolute; + top: 45px; + left: 50px; + font-weight: bold; } -/* Menu Itens Accessibility */ - -#accessibility_menu { - float: right; - text-align: right; - margin-right: 10px; - font-family: Verdana, Arial, Serif-sans; - font-size: 9px; - color: #545454; - font-weight: normal; +#noosfero_bar { + position: absolute; + left: 3px; + right: 3px; + height: 22px; + z-index: 9999; + background-color: #3465A4; } -#accessibility_menu a#icon_go_home { -background: url("../images/ico_enterlink.gif") no-repeat; -} - -#accessibility_menu a { - color: black; +#link_to_home { + position: absolute; + top: 0px; + left: 0px; + display: block; + width: 30px; + height: 100%; + background: url(/images/noosfero.png) 0px 50% no-repeat; + text-align: center; + color: transparent; + font-size: 0px; +} + +body.category #noosfero_bar { background-color: #2A5896 } + +body.category1 #noosfero_bar { background-color: #E26B00 } +#category1 .linkSubMenu, +#category1 ul { background-color: #F57900 } +#category1:hover .linkSubMenu, +#category1:hover ul { background-color: #CE5C00 } + +body.category2 #noosfero_bar { background-color: #58A80A } +#category2 .linkSubMenu, +#category2 ul { background-color: #61B60E } +#category2:hover .linkSubMenu, +#category2:hover ul { background-color: #4E9A06 } + +body.category3 #noosfero_bar { background-color: #694371 } +#category3 .linkSubMenu, +#category3 ul { background-color: #75507B } +#category3:hover .linkSubMenu, +#category3:hover ul { background-color: #5C3566 } + +body.category4 #noosfero_bar { background-color: #B80000 } +#category4 .linkSubMenu, +#category4 ul { background-color: #CC0000 } +#category4:hover .linkSubMenu, +#category4:hover ul { background-color: #A40000 } + +#user_box { + position: absolute; + top: 0px; + right: 0px; +} + +#user_box a:link, +#user_box a:visited { + font-size: 11px; + font-weight: bold; + text-decoration: none; + line-height: 22px; + color: #FFF; + margin-right: 10px; + opacity: 0.7; } - -#accessibility_menu a:hover span { - color: white; +#user_box a:hover, +#user_box a:active { + opacity: 1; } -/* Itens Navigation Bar */ - -#navigation_bar { +#cat_menu { + padding: 0px; + margin: 0px; width: 100%; - padding: 0px !important; - height: 35px; - vertical-align: middle; - line-height: 35px; - z-index: 995; } -#navigation_bar ul { - padding: 0px !important; - margin: 0px !important; - z-index: 996; +#cat_menu a { + font-weight: bold; + line-height: 22px; + text-decoration: none; + color: #FFF; } -#navigation_bar ul li { - list-style: none; - display: inline; - font-size: 17px; - margin-right: 5px; -} +#category1 ul a:hover, #category1 a:active { color: #FDD79E } +#category2 ul a:hover, #category2 a:active { color: #C4F099 } +#category3 ul a:hover, #category3 a:active { color: #D6BFD3 } +#category4 ul a:hover, #category4 a:active { color: #F79494 } -#navigation_bar ul li a { +.linkSubMenu { + cursor: default; float: left; display: block; - cursor: default; - margin-top: 5px; margin-left: 5px; - text-align: center; - height: 30px; - padding-left: 5px; - padding-right: 5px; - line-height: 30px; - vertical-align: middle; - color: #fff; - text-decoration: none; -} - -#navigation_bar ul ul { -position: absolute; -top: 35px; -margin: 0px; -padding: 0px; -width: 100%; -left: 0px; -display: none; -z-index: 997; + padding: 0px 5px; + height: 100%; + position: relative; + left: 50px; } -#navigation_bar ul li ul li { - text-align: center; -} - -#navigation_bar ul li ul li a { - display: inline; - cursor: pointer; - width: auto; - padding-left: 5px; - padding-right: 5px; - margin: 0px; - text-align: center; -} - -#search_box { -position: absolute; -top: 8px; -right: 8px; -margin: 0px; -z-index: 998; -} -#search_box form, #search_box input { - display: inline; -} -#search_box .button { - color: white; - width: 24px; +#cat_menu li { padding: 0px; margin: 0px; -} -#search_box .button:hover { - color: black; -} - -#input_search { -border: 1px solid transparent; -color: #545454; -background-color: #efefef; -width: 130px; -font-size: 12px; -} - -#input_search:hover, #input_search:focus { -border: 1px solid white; -color: black; -background-color: white; -} - -/* Itens Colors Change */ - -/* ITEM 0 */ -body.category #navigation_bar, -li#category a { -background-color: #3465a4; -} - -li#category:hover a, li#category a:focus, -li#category ul { - background-color: #245090 !important; -} - -body.category #wrap { -border: 3px solid #245090 !important; -} -li#category ul li a { - color: white; - background-color: #245090; - border-right: 1px solid white; -} -li#category ul li a:hover { - color: black; -} - -/* ITEM 1 - Orange */ -body.category1 #navigation_bar, -li#category1 a { background-color: #f57900; } - -li#category1:hover a, li#category1 a:focus, -li#category1 ul { - background-color: #da6303 !important; -} -body.category1 #wrap { -border: 3px solid #da6303 !important; -} -li#category1 ul li a { - color: white; - background-color: #da6303; - border-right: 1px solid white; -} -li#category1 ul li a:hover { - color: black; + list-style: none; + display: inline; } -/* ITEM 2 - Green */ -body.category2 #navigation_bar, -li#category2 a { - background-color: #71b737 !important; +#cat_menu ul { + display: none; + position: absolute; + top: 22px; + left: 0px; + width: 100%; + padding: 0px 0px 0px 20px; + margin: 0px; } -li#category2:hover a, li#category2 a:focus, -li#category2 ul { - background-color: #4e9a06 !important; -} -body.category2 #wrap { -border: 3px solid #4e9a06 !important; -} -li#category2 ul li a { - color: white; - background-color: #4e9a06; - border-right: 1px solid white; -} -li#category2 ul li a:hover { - color: black; +/* +#cat_menu ul li { + padding: 0px; + margin: 0px; } +*/ -/* ITEM 3 - Purple */ -body.category3 #navigation_bar, -li#category3 a { - background-color: #75507b !important; -} -li#category3:hover a, li#category3 a:focus, -li#category3 ul { - background-color: #633a6d !important; -} -body.category3 #wrap { -border: 3px solid #633a6d !important; -} -li#category3 ul li a { - color: white; - background-color: #633a6d; - border-right: 1px solid white; -} -li#category3 ul li a:hover { - color: black; +#cat_menu ul a { + background: url(/images/bolota.gif) 0% 50% no-repeat; + padding-left: 15px; + margin-left: -11px; } - -/* ITEM 4 - Red */ -body.category4 #navigation_bar, -li#category4 a { - background-color: #cc0000 !important; +#cat_menu ul span { + background: url(/images/bolota.gif) 100% 50% no-repeat; + padding-right: 15px; } -li#category4:hover a, li#category4 a:focus, -li#category4 ul { - background-color: #ae0303 !important; -} -body.category4 #wrap { -border: 3px solid #ae0303 !important; -} -li#category4 ul li a { - color: white; - background-color: #ae0303; - border-right: 1px solid white; -} -li#category4 ul li a:hover { - color: black; -} diff --git a/public/stylesheets/search.css b/public/stylesheets/search.css index 56650a3..357ee8f 100644 --- a/public/stylesheets/search.css +++ b/public/stylesheets/search.css @@ -1,3 +1,4 @@ + .search-relevance { font-size: smaller; font-style: italic; -- libgit2 0.21.2