Download as
Browse Code »

Commit ca7362ba21290f77fbc1565a1aa5f96f2aee64c6

Authored by ValessioBrito
1 parent f1a174ea
Exists in master and in 23 other branches activate_plugin, api_fixies, api_tasks, article_blog_visualization_format, article_layout_refactoring, article_layout_temp, blog_page_bug, clone_article, communities_ratings, design_template, event_layout, fix_forum, fix_optional_fields, fix_suggest_article, folder_improvments, manage_organization, merge_deactive_and_ban, news_page, script_to_update, stable, template_mirror_block, tests, tests_fixies

ActionItem135: Noosfero Bar, clean and fix for IEsucks 



git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@1085 3f533792-8f58-4932-b0fe-aaf55b0a4547
Showing 4 changed files with 104 additions and 232 deletions   Show diff stats
app/views/layouts/application.rhtml
  Diff comments   View file @ca7362b
... ... @@ -23,7 +23,7 @@
23 23 <% end %>
24 24 </head>
25 25  
26   - <body>
  26 + <body class='category<%= category_color %>'>
27 27  
28 28 <% unless flash[:notice].nil? %>
29 29 <div id='notice'>
... ... @@ -33,33 +33,40 @@
33 33 <% end %>
34 34 <%= image_tag 'comatose/spinner.gif', :id=>'spinner', :align=>'absmiddle', :style=>'display:none;' %>
35 35  
36   - <div id="wrap" class='category<%= category_color %>'>
  36 + <div id="wrap">
37 37  
38   - <div id='noosfero_bar' class='category<%= category_color %>'>
39   - <div id='accessibility_menu'>
40   - <a href='#content' id='icon_go_content'><span><%= _('Go to content') %></span></a>
41   - <%= shortcut_header_links %>
42   - </div><!-- accessibility_menu -->
43   -
44   - <div id='top_bar' class='category<%= category_color %>'>
45   - <%= image_tag 'noosfero.png', :style => 'float: left;' %>
  38 + <div id='noosfero_bar' style='position: absolute;'>
  39 + <div id='accessibility_bar'>
  40 + <div id='accessibility_menu'>
  41 + <a href='#content' id='icon_go_content'><span><%= _('Go to content') %></span></a>
  42 + <!-- <%= shortcut_header_links %> -->
  43 + </div><!-- accessibility_menu -->
46 44 <div id='path_category'>
  45 + Voce esta navgeando na FIXME..
47 46 <% if @category %>
48 47 <%= @category.full_name %>
49 48 <% end %>
  49 + <%= javascript_tag(visual_effect(:fade, "path_category", :duration => 10)) %>
50 50 </div>
51   - </div>
52   -
  51 + </div><!-- accessibility_bar -->
53 52 <div id='search_box'>
54 53 <%= search_box %>
55 54 </div><!-- id='search_box' -->
56 55  
57   - <div id='navigation_bar' class='category<%= category_color %>'>
  56 + <div id='navigation_bar'>
  57 + <SCRIPT LANGUAGE="JavaScript"> <!-- FIXME: Tirar o script daqui caso seja solucao adotada -->
  58 + function posset(chkbox, group) {
  59 + var posSetting = (chkbox.checked) ? "fixed" : "absolute"
  60 + document.getElementById(group).style.position = posSetting
  61 + }
  62 + </SCRIPT>
  63 + <INPUT TYPE="checkbox" NAME="Fix" VALUE="0" onClick="posset(this, 'noosfero_bar')" style='float: left; font-size: 2px'><%= image_tag 'noosfero.png', :style => 'float: left;' %>
  64 +
58 65 <%= render :file => 'shared/categories_menu' %>
59 66 </div><!-- id='navigation_bar' -->
60 67  
61 68 <script type="text/javascript">
62   - prepareMenu('navigation_bar', { timeout: 10 });
  69 + prepareMenu('navigation_bar', { timeout: 5 });
63 70 </script>
64 71 </div><!-- id="noosfero_bar" -->
65 72  
... ...
app/views/shared/categories_menu.rhtml
  Diff comments   View file @ca7362b
1 1 <ul>
  2 + <li id='category'>Noosfero <ul><li><%= shortcut_header_links %></li></ul></li>
2 3 <% @environment.display_categories.each do |item| %>
3 4 <li id='category<%= item.display_color %>' <%= 'class="active"' if (@category && (@category.top_ancestor == item)) %> >
4 5 <%= item.name %>
... ...
public/images/ico_enterlink.gif
View file @ca7362b

91 Bytes | W: | H:

66 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
public/stylesheets/menu.css
  Diff comments   View file @ca7362b
... ... @@ -3,26 +3,27 @@
3 3 width: 100%;
4 4 height: 40px;
5 5 padding: 0px;
6   - margin-top: -5px;
7   - margin-right: 5px;
8   - font-family: Verdana, Arial, Serif-sans;
  6 + margin-left: -3px;
  7 + margin-top: -3px;
  8 + font-family: Sans, Verdana, Arial;
9 9 z-index: 9999;
10 10 }
11 11  
12   -/* Top Bar */
  12 +/* Accessibility Bar */
13 13  
14   -#top_bar {
15   -height: 30px;
  14 +#accessibility_bar {
  15 +position: absolute;
  16 +top: 35px;
  17 +margin-left: 15px;
  18 +height: 20px;
16 19 line-height: 20px;
17 20 font-size: 12px !important ;
18   -font-family: Sans-serif !important ;
  21 +font-family: Sans, Verdana, Arial !important ;
19 22 vertical-align: middle !important ;
20   -padding: 0px !important ;
21   -margin: 0px;
22 23 text-align: left;
23 24 }
24 25  
25   -#top_bar a {
  26 +#accessibility_bar a {
26 27 text-decoration: none;
27 28 color: #dfdfdf;
28 29 padding-left: 9px;
... ... @@ -31,18 +32,14 @@ background-position: 0px 6px;
31 32 padding-right: 4px;
32 33 }
33 34  
34   -#top_bar a:hover {
  35 +#accessibility_bar a:hover {
35 36 color: #ffffff;
36 37 text-decoration: underline;
37 38 }
38 39  
39   -#user_options {
40   -font-weight: normal;
41   -}
42   -
43 40 #path_category {
44 41 font-weight: bold;
45   -color: #ffffff;
  42 +color: #545454;
46 43 z-index: 2000;
47 44 padding-top: 4px;
48 45 }
... ... @@ -50,75 +47,35 @@ padding-top: 4px;
50 47 /* Menu Itens Accessibility */
51 48  
52 49 #accessibility_menu {
53   - position: absolute;
54   - top: 2px;
55   - right: 10px;
56   - width: 500px;
  50 + float: right;
57 51 text-align: right;
  52 + margin-right: 10px;
58 53 font-family: Verdana, Arial, Serif-sans;
59 54 font-size: 9px;
60   - color: #dfdfdf;
  55 + color: #545454;
61 56 font-weight: normal;
62   - z-index: 999;
63   -}
64   -
65   -/* Images Icons Mini-BAR */
66   -#accessibility_menu span {
67   -}
68   -
69   -#accessibility_menu a#icon_go_content {
70   -background-image: url('../images/icons-bar/go-content.png');
71 57 }
72 58  
73 59 #accessibility_menu a#icon_go_home {
74   -background-image: url('../images/icons-bar/go-home.png');
75   -}
76   -
77   -#accessibility_menu a#icon_logout {
78   -background-image: url('../images/icons-bar/logout.png');
79   -}
80   -
81   -#accessibility_menu a#icon_login {
82   -background-image: url('../images/icons-bar/login.png');
83   -}
84   -
85   -#accessibility_menu a#icon_admin {
86   -background-image: url('../images/icons-bar/admin.png');
87   -}
88   -
89   -#accessibility_menu a#icon_accessibility {
90   -background-image: url('../images/icons-bar/accessibility.png');
  60 +background: url("../images/ico_enterlink.gif") no-repeat;
91 61 }
92 62  
93 63 #accessibility_menu a {
94   - color: white;
95   - font-weight: bold;
96   - padding-left: 28px;
97   - height: 24px;
98   - display: block;
99   - float: right;
100   - background-repeat: no-repeat;
101   - padding-top: 4px;
  64 + color: black;
102 65 }
103 66  
104 67 #accessibility_menu a:hover span {
105   - color: black;
106   - background: white;
  68 + color: white;
107 69 }
108 70  
109   -
110 71 /* Itens Navigation Bar */
111 72  
112 73 #navigation_bar {
113   - position: absolute;
114   - top: 30px;
115   - left: 0px;
116 74 width: 100%;
117 75 padding: 0px !important;
118   - margin-top: -5px !important;
119   - height: 40px;
  76 + height: 35px;
120 77 vertical-align: middle;
121   - line-height: 40px;
  78 + line-height: 35px;
122 79 z-index: 995;
123 80 }
124 81  
... ... @@ -140,10 +97,12 @@ background-image: url(&#39;../images/icons-bar/accessibility.png&#39;);
140 97 display: block;
141 98 cursor: default;
142 99 margin-top: 5px;
  100 + margin-left: 5px;
143 101 text-align: center;
144   - width: 124px;
145   - height: 38px;
146   - line-height: 38px;
  102 + height: 30px;
  103 + padding-left: 5px;
  104 + padding-right: 5px;
  105 + line-height: 30px;
147 106 vertical-align: middle;
148 107 color: #fff;
149 108 text-decoration: none;
... ... @@ -151,7 +110,7 @@ background-image: url(&#39;../images/icons-bar/accessibility.png&#39;);
151 110  
152 111 #navigation_bar ul ul {
153 112 position: absolute;
154   -top: 43px;
  113 +top: 35px;
155 114 margin: 0px;
156 115 padding: 0px;
157 116 width: 100%;
... ... @@ -176,12 +135,10 @@ z-index: 997;
176 135  
177 136 #search_box {
178 137 position: absolute;
179   -right: 0px;
  138 +top: 8px;
  139 +right: 8px;
180 140 margin: 0px;
181 141 z-index: 998;
182   -padding-top: 4px;
183   -padding-right: 4px;
184   -padding-bottom: 4px;
185 142 }
186 143 #search_box form, #search_box input {
187 144 display: inline;
... ... @@ -190,24 +147,22 @@ padding-bottom: 4px;
190 147 color: white;
191 148 width: 24px;
192 149 padding: 0px;
193   - margin-right: 2px;
194   - margin-top: -2px;
  150 + margin: 0px;
195 151 }
196 152 #search_box .button:hover {
197 153 color: black;
198 154 }
199 155  
200 156 #input_search {
201   -border: 1px outset #545454;
  157 +border: 1px solid transparent;
202 158 color: #545454;
203   -background-color: #dfdfdf;
204   -height: 20px;
  159 +background-color: #efefef;
205 160 width: 130px;
206 161 font-size: 12px;
207 162 }
208 163  
209 164 #input_search:hover, #input_search:focus {
210   -border: 1px inset #dfdfdf;
  165 +border: 1px solid white;
211 166 color: black;
212 167 background-color: white;
213 168 }
... ... @@ -215,201 +170,110 @@ background-color: white;
215 170 /* Itens Colors Change */
216 171  
217 172 /* ITEM 0 */
218   -#noosfero_bar.category div#search_box {
219   -background-color: #245090;
  173 +body.category #navigation_bar,
  174 +li#category a {
  175 +background-color: #3465a4;
220 176 }
221 177  
222   -#navigation_bar ul li#category ul {
  178 +li#category:hover a, li#category a:focus,
  179 +li#category ul {
223 180 background-color: #245090 !important;
224 181 }
225 182  
226   -#wrap.category {
227   - border: 5px solid #245090 !important;
228   -}
229   -
230   -#top_bar.category {
231   -background-color: #245090;
232   -}
233   -
234   -#category a {
235   - background: url("../images/bg_menu_options.png") no-repeat;
236   - background-position: 0px 0px;
  183 +body.category #wrap {
  184 +border: 3px solid #245090 !important;
237 185 }
238   -
239   -li#category.active a {
240   - background-position: 0px -38px;
241   -}
242   -
243   -li#category:hover a {
244   -background-position: 0px -76px !important;
245   -}
246   -
247 186 li#category ul li a {
248 187 color: white;
249   - background: #245090;
  188 + background-color: #245090;
250 189 border-right: 1px solid white;
251 190 }
252   -
253 191 li#category ul li a:hover {
254   - color: black;
  192 + color: black;
255 193 }
256 194  
257 195 /* ITEM 1 - Orange */
258   -#noosfero_bar.category1 div#search_box {
259   -background-color: #da6303;
260   -}
  196 +body.category1 #navigation_bar,
  197 +li#category1 a { background-color: #f57900; }
261 198  
262   -#navigation_bar ul li#category1 ul {
  199 +li#category1:hover a, li#category1 a:focus,
  200 +li#category1 ul {
263 201 background-color: #da6303 !important;
264 202 }
265   -
266   -#wrap.category1 {
267   -border: 5px solid #da6303 !important;
268   -}
269   -
270   -#top_bar.category1 {
271   -background-color: #da6303;
272   -}
273   -
274   -#category1 a {
275   - background: url("../images/bg_menu_options.png") no-repeat;
276   - background-position: -124px 0px;
277   -}
278   -
279   -li#category1.active a {
280   - background-position: -124px -38px;
  203 +body.category1 #wrap {
  204 +border: 3px solid #da6303 !important;
281 205 }
282   -
283   -li#category1:hover a {
284   -background-position: -124px -76px !important;
285   -}
286   -
287 206 li#category1 ul li a {
288   - color: white;
289   - background: #da6303;
290   - border-right: 1px solid white;
  207 + color: white;
  208 + background-color: #da6303;
  209 + border-right: 1px solid white;
291 210 }
292   -
293 211 li#category1 ul li a:hover {
294   - color: black;
  212 + color: black;
295 213 }
296 214  
297 215 /* ITEM 2 - Green */
298   -#noosfero_bar.category2 div#search_box {
299   -background-color: #54a409;
300   -}
301   -
302   -#navigation_bar ul li#category2 ul {
303   - background-color: #54a409 !important;
  216 +body.category2 #navigation_bar,
  217 +li#category2 a {
  218 + background-color: #71b737 !important;
304 219 }
305 220  
306   -#wrap.category2 {
307   -border: 5px solid #54a409 !important;
  221 +li#category2:hover a, li#category2 a:focus,
  222 +li#category2 ul {
  223 + background-color: #4e9a06 !important;
308 224 }
309   -
310   -#top_bar.category2 {
311   -background-color: #54a409;
312   -}
313   -
314   -#category2 a {
315   - background: url("../images/bg_menu_options.png") no-repeat;
316   - background-position: -246px 0px;
317   -}
318   -
319   -li#category2.active a {
320   - background-position: -246px -38px;
321   -}
322   -
323   -li#category2:hover a {
324   -background-position: -246px -76px !important;
  225 +body.category2 #wrap {
  226 +border: 3px solid #4e9a06 !important;
325 227 }
326   -
327 228 li#category2 ul li a {
328 229 color: white;
329   - background: #54a409;
  230 + background-color: #4e9a06;
330 231 border-right: 1px solid white;
331 232 }
332   -
333 233 li#category2 ul li a:hover {
334   - color: black;
  234 + color: black;
335 235 }
336 236  
337 237 /* ITEM 3 - Purple */
338   -#noosfero_bar.category3 div#search_box {
339   -background-color: #633a6d;
  238 +body.category3 #navigation_bar,
  239 +li#category3 a {
  240 + background-color: #75507b !important;
340 241 }
341 242  
342   -#navigation_bar ul li#category3 ul {
  243 +li#category3:hover a, li#category3 a:focus,
  244 +li#category3 ul {
343 245 background-color: #633a6d !important;
344 246 }
345   -
346   -#wrap.category3 {
347   -border: 5px solid #633a6d !important;
348   -}
349   -
350   -#top_bar.category3 {
351   -background-color: #633a6d;
352   -}
353   -
354   -#category3 a {
355   - background: url("../images/bg_menu_options.png") no-repeat;
356   - background-position: -368px 0px;
357   -}
358   -
359   -li#category3.active a {
360   - background-position: -368px -38px;
361   -}
362   -
363   -li#category3:hover a {
364   -background-position: -368px -76px !important;
  247 +body.category3 #wrap {
  248 +border: 3px solid #633a6d !important;
365 249 }
366   -
367 250 li#category3 ul li a {
368 251 color: white;
369   - background: #633a6d;
  252 + background-color: #633a6d;
370 253 border-right: 1px solid white;
371 254 }
372   -
373 255 li#category3 ul li a:hover {
374   - color: black;
  256 + color: black;
375 257 }
376 258  
377 259 /* ITEM 4 - Red */
378   -#noosfero_bar.category4 div#search_box {
379   -background-color: #ae0303;
  260 +body.category4 #navigation_bar,
  261 +li#category4 a {
  262 + background-color: #cc0000 !important;
380 263 }
381 264  
382   -#navigation_bar ul li#category4 ul {
  265 +li#category4:hover a, li#category4 a:focus,
  266 +li#category4 ul {
383 267 background-color: #ae0303 !important;
384 268 }
385   -
386   -#wrap.category4 {
387   -border: 5px solid #ae0303 !important;
388   -}
389   -
390   -#top_bar.category4 {
391   -background-color: #ae0303;
392   -}
393   -
394   -#category4 a {
395   - background: url("../images/bg_menu_options.png") no-repeat;
396   - background-position: -494px 0px;
397   -}
398   -
399   -li#category4.active a {
400   - background-position: -494px -38px;
401   -}
402   -
403   -li#category4:hover a {
404   -background-position: -494px -76px !important;
  269 +body.category4 #wrap {
  270 +border: 3px solid #ae0303 !important;
405 271 }
406   -
407 272 li#category4 ul li a {
408   - color: white;
409   - background: #ae0303;
410   - border-right: 1px solid white;
  273 + color: white;
  274 + background-color: #ae0303;
  275 + border-right: 1px solid white;
411 276 }
412   -
413 277 li#category4 ul li a:hover {
414   - color: black;
  278 + color: black;
415 279 }
... ...