Commit ec536ce16b7a0a4a7de8f759cf45cefcf8604b85
1 parent
1f86c597
Exists in
master
and in
29 other branches
ActionItem0: integrating new top bar
git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@404 3f533792-8f58-4932-b0fe-aaf55b0a4547
Showing
5 changed files
with
260 additions
and
89 deletions
Show diff stats
app/controllers/cms_controller.rb
app/helpers/application_helper.rb
@@ -96,7 +96,7 @@ module ApplicationHelper | @@ -96,7 +96,7 @@ module ApplicationHelper | ||
96 | ( link_to_cms(_('Manage content')) ), | 96 | ( link_to_cms(_('Manage content')) ), |
97 | ( link_to (_('Manage layout')), :controller => 'edit_template' ), | 97 | ( link_to (_('Manage layout')), :controller => 'edit_template' ), |
98 | ( link_to(_('My enterprises'), { :controller => 'enterprise' }) ), | 98 | ( link_to(_('My enterprises'), { :controller => 'enterprise' }) ), |
99 | - ].join("\n") | 99 | + ].join(" | \n") |
100 | content_tag('span', links, :id => 'user_links') | 100 | content_tag('span', links, :id => 'user_links') |
101 | end | 101 | end |
102 | 102 | ||
@@ -124,6 +124,10 @@ module ApplicationHelper | @@ -124,6 +124,10 @@ module ApplicationHelper | ||
124 | content_tag('span', (link_to _('Logout'), { :controller => 'account', :action => 'logout'}, :method => 'post'), :id => 'logout_box') | 124 | content_tag('span', (link_to _('Logout'), { :controller => 'account', :action => 'logout'}, :method => 'post'), :id => 'logout_box') |
125 | end | 125 | end |
126 | 126 | ||
127 | + # renders a search box. | ||
128 | + def search_box | ||
129 | + end | ||
130 | + | ||
127 | # FIXME | 131 | # FIXME |
128 | def footer | 132 | def footer |
129 | 'nothing in the footer yet' | 133 | 'nothing in the footer yet' |
app/views/layouts/application.rhtml
@@ -7,6 +7,35 @@ | @@ -7,6 +7,35 @@ | ||
7 | <%= stylesheet_link_tag 'cms' %> | 7 | <%= stylesheet_link_tag 'cms' %> |
8 | <% end %> | 8 | <% end %> |
9 | <%= stylesheet_link_tag 'common' %> | 9 | <%= stylesheet_link_tag 'common' %> |
10 | + <%= stylesheet_link_tag 'blue_bar' %> | ||
11 | + | ||
12 | + <script type="text/javascript"> | ||
13 | + function enableSubMenus(){ | ||
14 | + var lis = document.getElementsByTagName('li'); | ||
15 | + for (var i = 0, li; li = lis[i]; i++) { | ||
16 | + var link = li.getElementsByTagName('a')[0]; | ||
17 | + if (link) { | ||
18 | + link.onfocus = function(){ | ||
19 | + var ul = this.parentNode.getElementsByTagName('ul')[0]; | ||
20 | + if (ul) | ||
21 | + ul.style.display = 'block'; | ||
22 | + } | ||
23 | + var ul = link.parentNode.getElementsByTagName('ul')[0]; | ||
24 | + if (ul){ | ||
25 | + var ullinks = ul.getElementsByTagName('a'); | ||
26 | + var ullinksqty = ullinks.length; | ||
27 | + var lastItem = ullinks[ullinksqty - 1]; | ||
28 | + if (lastItem){ | ||
29 | + lastItem.onblur = function(){ | ||
30 | + this.parentNode.parentNode.style.display = ''; | ||
31 | + } | ||
32 | + } | ||
33 | + } | ||
34 | + } | ||
35 | + } | ||
36 | + } | ||
37 | + window.onload = enableSubMenus; | ||
38 | + </script> | ||
10 | </head> | 39 | </head> |
11 | 40 | ||
12 | <body> | 41 | <body> |
@@ -23,20 +52,51 @@ | @@ -23,20 +52,51 @@ | ||
23 | <div id="frame"> | 52 | <div id="frame"> |
24 | <div id="menu_accessibility"> | 53 | <div id="menu_accessibility"> |
25 | <%= _('Skip to:') %> | 54 | <%= _('Skip to:') %> |
55 | + <%# FIXME: fix all these links!!! %> | ||
56 | + <%= link_to _('Site accesibility'), :controller => 'accessibility' %> | | ||
26 | <a href="#main_content"><%= _('Content') %></a> | | 57 | <a href="#main_content"><%= _('Content') %></a> | |
27 | <a href="#sidebar"><%= _('Navigation') %></a> | | 58 | <a href="#sidebar"><%= _('Navigation') %></a> | |
28 | <a href="#footer"><%= _('Footer') %></a> | 59 | <a href="#footer"><%= _('Footer') %></a> |
29 | </div> | 60 | </div> |
30 | 61 | ||
31 | <div id="header"> | 62 | <div id="header"> |
32 | - <%= header %> | ||
33 | - </div> | 63 | + <div id="virtual_community_identification">Default Virtual Community</div> |
64 | +<div id="user_links"> | ||
65 | +<span id="login_name">Login Name</span><br /> | ||
66 | +<a href="#" id="perfil_edit_button">Editar Perfil</a>|<a href="#" id="logout_button">Sair</a> | ||
67 | +</div> | ||
68 | + | ||
69 | +<div id="bar_center_content"> | ||
70 | + <div id="search_bar"> | ||
71 | +<form action="a" name="buscaBarraForm" method="get"> | ||
72 | +Buscar: <input name="busca" id="search_input_bar" maxlength="70" type="text" value="Digite aqui sua busca..."> <SELECT NAME="lista" SIZE="1" id="search_select_bar"> | ||
73 | +<OPTION>opção 2 | ||
74 | +<OPTION>opção 3 | ||
75 | +<OPTION>opção 4 | ||
76 | +<OPTION>opção 5 | ||
77 | +<OPTION>opção 6 | ||
78 | +</SELECT> <input type="submit" id="search_button_bar" value="buscar"></form> | ||
79 | +</div> | ||
80 | + <div id="menu_bar"><ul id="menu"> | ||
81 | + <li><a href="#minha_rede" id="minha_rede" class="active">Minha Rede</a> | ||
82 | + </li><li><a href="#minha_web" id="minha_web">Minha página web</a><ul> | ||
83 | + <li><a href="#mudar_tema" id="mudar_tema">Modificar Tema</a></li><li><a href="#navegar_conteudo" id="navegar_conteudo" class="submenu">Navegar no conteúdo</a> | ||
84 | + </li></ul> | ||
85 | + </li><li><a href="#empreendimento" id="empreendimento">Meu Empreendimento</a></li> | ||
86 | + </li></ul></div> | ||
87 | +</div> | ||
88 | + | ||
89 | + </div><!-- id="header" --> | ||
34 | 90 | ||
35 | <div id='content'> | 91 | <div id='content'> |
36 | - <!-- <a name='main_content'/></a> --> | 92 | + <a name='main_content'/></a> |
93 | + | ||
94 | + <!-- Aqui entra um conteudo tipo o titulo da pagina do usuário e os botoes do comatose? --> | ||
95 | + <!-- | ||
37 | <div id='header_content'> | 96 | <div id='header_content'> |
38 | - <!-- Aqui entra um conteudo tipo o titulo da pagina do usuário e os botoes do comatose? --> | ||
39 | </div> | 97 | </div> |
98 | + --> | ||
99 | + | ||
40 | <% if params[:controller] == 'cms' %> | 100 | <% if params[:controller] == 'cms' %> |
41 | <div id='boxes'> | 101 | <div id='boxes'> |
42 | <%= yield %> | 102 | <%= yield %> |
@@ -0,0 +1,188 @@ | @@ -0,0 +1,188 @@ | ||
1 | +/* Default Bar theme Blue Sky */ | ||
2 | +#frame { | ||
3 | + background: #fff url("../images/black_white_12px.png") repeat-x; | ||
4 | +} | ||
5 | + | ||
6 | +#menu_accessibility { | ||
7 | + font-size: 10px; | ||
8 | + color: black; | ||
9 | + font-family: Sans-serif; | ||
10 | + color: #545454; | ||
11 | +} | ||
12 | + | ||
13 | + | ||
14 | +#menu_accessibility a { | ||
15 | + color: #545454; | ||
16 | + text-decoration: none; | ||
17 | +} | ||
18 | + | ||
19 | +#menu_accessibility a:hover { | ||
20 | + color: #000000; | ||
21 | + text-decoration: underline; | ||
22 | +} | ||
23 | + | ||
24 | +#menu_accessibility a:focus { | ||
25 | + color: #ef2929; | ||
26 | + text-decoration: underline; | ||
27 | +} | ||
28 | + | ||
29 | +#header { | ||
30 | + background: #fff url("../images/bg_blue_bar.png") left bottom repeat-x; | ||
31 | + font-family: Verdana, Sans-serif; | ||
32 | + height: 40px; | ||
33 | + color: #ffffff; | ||
34 | +} | ||
35 | + | ||
36 | +#virtual_community_identification { | ||
37 | +float: left; | ||
38 | +background: url("../images/bg_blue_logo.png") left bottom no-repeat; | ||
39 | +vertical-align: bottom; | ||
40 | +font-weight:bold; | ||
41 | +width: 230px; | ||
42 | +height: 40px; | ||
43 | +line-height: 40px; | ||
44 | +padding-left: 60px; | ||
45 | +} | ||
46 | + | ||
47 | +#bar_center_content { | ||
48 | +position: relative; | ||
49 | +margin-left: 290px; | ||
50 | +margin-right: 120px; | ||
51 | +text-align: center; | ||
52 | +font-size: 13px; | ||
53 | +height: 40px; | ||
54 | +} | ||
55 | + | ||
56 | +#user_links { | ||
57 | +float: right; | ||
58 | +text-align: center; | ||
59 | +color: #204a87; | ||
60 | +font-size: 12px; | ||
61 | +width: 120px; | ||
62 | +height: 40px; | ||
63 | +} | ||
64 | + | ||
65 | +#user_links a { | ||
66 | +color: #ffffff; | ||
67 | +padding-left: 5px; | ||
68 | +padding-right: 5px; | ||
69 | +font-size: 10px; | ||
70 | +text-decoration: none; | ||
71 | +} | ||
72 | + | ||
73 | +#user_links a:hover { | ||
74 | +color: #fce94f; | ||
75 | +} | ||
76 | + | ||
77 | + | ||
78 | +/* SEARCH BAR */ | ||
79 | +#search_bar { | ||
80 | +position: absolute; | ||
81 | +top: 0px; | ||
82 | +width: 380px; | ||
83 | +left: 50%; | ||
84 | +margin-left: -190px; | ||
85 | +height: 20px; | ||
86 | +text-align: center; | ||
87 | +color: #204a87; | ||
88 | +z-index: 9999; | ||
89 | +} | ||
90 | + | ||
91 | +#search_input_bar { | ||
92 | +width: 163px; | ||
93 | +height: 19px; | ||
94 | +font-size: 10px; | ||
95 | +border: 1px solid #545454; | ||
96 | +} | ||
97 | + | ||
98 | +#search_select_bar { | ||
99 | +height: 18px; | ||
100 | +font-size: 10px; | ||
101 | +border: 1px solid #545454; | ||
102 | +} | ||
103 | + | ||
104 | +#search_button_bar { | ||
105 | +height: 17px; | ||
106 | +font-size: 10px; | ||
107 | +border: 1px solid #545454; | ||
108 | +} | ||
109 | + | ||
110 | + | ||
111 | +/* MENU BAR */ | ||
112 | +#menu_bar { | ||
113 | +position: absolute; | ||
114 | +top: 19px; | ||
115 | +width: 380px; | ||
116 | +left: 50%; | ||
117 | +font-size: 12px; | ||
118 | +margin-left: -190px; | ||
119 | +height: 20px; | ||
120 | +text-align: center; | ||
121 | +} | ||
122 | + | ||
123 | +#menu { | ||
124 | +margin: 0px; | ||
125 | +padding: 0px; | ||
126 | +text-align: center; | ||
127 | +list-style:none; | ||
128 | +} | ||
129 | + | ||
130 | +#menu li { | ||
131 | +float: left; | ||
132 | +font-weight: bold; | ||
133 | +position: relative; | ||
134 | +} | ||
135 | + | ||
136 | +#menu li ul { | ||
137 | + display:none; | ||
138 | + position:absolute; | ||
139 | + list-style:none; | ||
140 | + text-align: left; | ||
141 | + left:0px; | ||
142 | + margin:0px; | ||
143 | + width: 200px; | ||
144 | + padding:0px; | ||
145 | +} | ||
146 | + | ||
147 | +#menu li:hover ul { display:block; } | ||
148 | + | ||
149 | +#menu li:hover, #menu li a:hover, #menu a:focus { | ||
150 | + background: url("../images/bg_blue_menu.png") left bottom repeat-x; | ||
151 | + color: #ffffff; | ||
152 | +} | ||
153 | + | ||
154 | +#menu li a{ | ||
155 | + display:block; | ||
156 | + padding:.2em .5em; | ||
157 | + text-decoration:none; | ||
158 | + color: #dfdfdf; | ||
159 | +} | ||
160 | + | ||
161 | +#menu li ul{ | ||
162 | + background: #bcc6d4; | ||
163 | +} | ||
164 | + | ||
165 | +#menu li ul a{ | ||
166 | + color: #204a87; | ||
167 | + border: 1px solid transparent; | ||
168 | +} | ||
169 | + | ||
170 | +#menu li ul li { | ||
171 | + width: 100%; | ||
172 | +} | ||
173 | + | ||
174 | +#menu li ul li a:hover { | ||
175 | + background: url("../images/bg_blue_menu.png") left bottom repeat-x; | ||
176 | + color: #ffffff; | ||
177 | +} | ||
178 | + | ||
179 | + | ||
180 | +/* Cores Tango | ||
181 | +ef2929 - Vermelho Claro | ||
182 | +729fcf - Azul Claro | ||
183 | +3465a4 - Azul Medio | ||
184 | +204a87 - Azul Escuro | ||
185 | +fce94f - Amarelo Claro | ||
186 | +*/ | ||
187 | +/* END MENU BAR */ | ||
188 | + |
public/stylesheets/common.css
@@ -3,88 +3,6 @@ margin: 0px; | @@ -3,88 +3,6 @@ margin: 0px; | ||
3 | padding: 0px; | 3 | padding: 0px; |
4 | } | 4 | } |
5 | 5 | ||
6 | -#notice { | ||
7 | -position: absolute; | ||
8 | -margin-top: 10px; | ||
9 | -right: 10px; | ||
10 | -background: #ffffa9; | ||
11 | -padding: 10px; | ||
12 | -border: 3px solid #dfdfdf; | ||
13 | -z-index: 9999 !important ; | 6 | +a img { |
7 | + border: none; | ||
14 | } | 8 | } |
15 | - | ||
16 | -/* Bar Blue Default */ | ||
17 | - | ||
18 | -#virtual_community_identification { | ||
19 | -position: absolute !important; | ||
20 | -background: url("../images/bg_blue_logo.png") 5px no-repeat !important; | ||
21 | -vertical-align: bottom !important ; | ||
22 | -width: 230px !important ; | ||
23 | -height: 34px !important ; | ||
24 | -line-height: 34px !important ; | ||
25 | -padding-left: 60px !important ; | ||
26 | -} | ||
27 | - | ||
28 | -#virtual_community_identification:hover { | ||
29 | -color: #dfdfdf !important ; | ||
30 | -} | ||
31 | - | ||
32 | -#header { | ||
33 | - position: relative !important; | ||
34 | - margin: 0px !important; | ||
35 | - padding: 0px !important; | ||
36 | - height: 35px !important; | ||
37 | - background: #fff url("../images/bg_blue_bar.png") bottom left repeat-x !important; | ||
38 | - color: #ffffff !important ; | ||
39 | -} | ||
40 | - | ||
41 | - | ||
42 | -#header a { | ||
43 | -display: table-cell !important ; | ||
44 | -height: 35px !important ; | ||
45 | -color: #ffffff !important ; | ||
46 | -font-size: 10px !important ; | ||
47 | -font-family: Sans-serif !important ; | ||
48 | -font-weight: bold !important ; | ||
49 | -vertical-align: middle !important ; | ||
50 | -padding: 0px 5px 0px 5px !important ; | ||
51 | -text-decoration: underline !important ; | ||
52 | -} | ||
53 | - | ||
54 | -#user_links, #login_box { | ||
55 | -margin-left: 290px !important ; | ||
56 | -} | ||
57 | - | ||
58 | -#user_links a:hover, #user_links a:focus, #login_box a:hover, #login_box a:focus, #register_box a:hover, #register_box a:focus { | ||
59 | -color: #dfdfdf !important ; | ||
60 | -text-decoration: none !important ; | ||
61 | -} | ||
62 | - | ||
63 | -#logout_box a:hover, #logout_box a:focus { | ||
64 | -color: red !important ; | ||
65 | -text-decoration: none !important ; | ||
66 | -} | ||
67 | - | ||
68 | -#menu_accessibility { | ||
69 | - background: #fff url("../images/black_white_12px.png") repeat-x !important ; | ||
70 | - font-size: 10px !important ; | ||
71 | - color: black !important ; | ||
72 | - font-family: Sans-serif !important ; | ||
73 | - color: #545454 !important ; | ||
74 | -} | ||
75 | - | ||
76 | -#menu_accessibility a { | ||
77 | - color: #545454 !important ; | ||
78 | - text-decoration: none !important ; | ||
79 | -} | ||
80 | - | ||
81 | -#menu_accessibility a:hover { | ||
82 | - color: #000000 !important ; | ||
83 | - text-decoration: underline !important ; | ||
84 | -} | ||
85 | - | ||
86 | -#menu_accessibility a:focus { | ||
87 | - color: red !important ; | ||
88 | - text-decoration: underline !important ; | ||
89 | -} | ||
90 | - |