Download as
Browse Code »

Commit e19242dd992f70e8511c0d8a337bc3928392be68

Authored by Valessio Brito
1 parent 41ab9d64
Exists in master and in 2 other branches production, staging

Refatoração do cabeçalho e rodapé

Showing 9 changed files with 201 additions and 213 deletions   Show diff stats
cabecalho-juventude.css
  Diff comments   View file @e19242d
... ... @@ -5,7 +5,7 @@
5 5 #theme-header{}
6 6  
7 7 #header {
8   - padding: 13px 0 0 0;
  8 + padding: 20px 0 0 0;
9 9 background: #ce5c00 url(images/bg-juventude.jpg);
10 10 color: #fff;
11 11 }
... ... @@ -44,12 +44,22 @@
44 44 }
45 45  
46 46 #accessibility span {
47   - background: none repeat scroll 0 0 #497B16;
  47 + background: none repeat scroll 0 0 #545;
48 48 color: #FFFFFF;
49 49 padding: 0 4px;
50 50 }
51 51  
  52 +#top-header {
  53 + background: #204A87;
  54 + width: 100%;
  55 +}
52 56  
  57 +#top-header > div {
  58 + width: 960px;
  59 + height: 30px;
  60 + line-height: 30px;
  61 + margin: 0px auto;
  62 +}
53 63  
54 64 /* logo */
55 65 #logo {
... ... @@ -65,8 +75,12 @@
65 75 color: #FFF;
66 76 }
67 77  
  78 +#site-title {
  79 + margin-left: -1000px;
  80 +}
  81 +
68 82 #logo #portal-title {
69   - margin: 30px 0px 46px 0px;
  83 + margin: 0px 0px 10px 0px;
70 84 color: #FFF;
71 85 font-size: 40px;
72 86 font-family: 'Open Sans Extrabold', Arial, Helvetica, sans-serif;
... ... @@ -90,27 +104,25 @@
90 104 #portal-lang,
91 105 #portal-siteactions {
92 106 display: block;
  107 + line-height: 15px;
  108 + margin-top: 5px;
  109 + border-bottom: 1px dotted #FFF;
93 110 float: right;
94   - clear: left;
95   - border-bottom: 1px dotted #00500f;
96   - padding-bottom: 2px;
97   - margin-top: -15px;
98   - font-size: 10px;
99   - text-align: center;
100 111 }
101 112  
102 113 #portal-lang a,
103 114 #portal-siteactions a {
104 115 color: #FFF;
  116 + font-size: 0.93em !important;
105 117 text-decoration: none;
106   - padding: 4px 0 4px 10px;
  118 + padding: 4px 0 4px 0px;
107 119 text-transform: uppercase;
108 120 font-family: 'Open Sans', Arial, Helvetica, sans-serif;
109 121 }
110 122  
111 123 #portal-lang a:hover,
112 124 #portal-siteactions a:hover {
113   - color: yellow;
  125 + color: #F1CA7F;
114 126 }
115 127  
116 128 #portal-lang li,
... ... @@ -118,20 +130,17 @@
118 130 display: inline;
119 131 }
120 132  
  133 +#accessibility a:hover,
121 134 #portal-lang li a:hover,
122 135 #portal-siteactions li a:hover {
123   -color: yellow;
124   -}
125   -
126   -#portal-lang li a,
127   -#portal-siteactions li a {
128   - padding: 4px 0px;
  136 + color: #F1CA7F;
129 137 }
130 138  
131 139 #social-icons {
132 140 float: right;
133 141 clear: right;
134 142 margin: 0px;
  143 + margin-bottom: 10px;
135 144 }
136 145  
137 146 #social-icons ul {
... ... @@ -149,7 +158,7 @@ color: yellow;
149 158  
150 159 #siteaction-accessibility,
151 160 #siteaction-contraste {
152   - margin: 0px 15px 0px 0px;
  161 + margin: 0px 15px 0px 0px;
153 162 }
154 163 /* */
155 164  
... ... @@ -164,33 +173,37 @@ color: yellow;
164 173  
165 174 #theme-header #sobre {
166 175 line-height: 20px;
167   - font-size: 12px;
  176 + font-size: 12px;
168 177 }
169 178 /* */
170 179  
171 180 /* Sobre o brasil */
172 181 #sobre {
173   - clear: both;
174   - max-width: 100% !important;
175   - margin: 0;
176   - background: #ce5c00;/*laranja-mais-escuro*/
177   - padding: 5px 0;
  182 + clear: both;
  183 + max-width: 100% !important;
  184 + margin: 0;
  185 + background: #ce5c00; /*laranja-mais-escuro*/
  186 + padding: 5px 0;
178 187 }
179 188  
180   -#sobre ul {
  189 +#sobre > div {
181 190 max-width: 960px;
182 191 margin: 0 auto;
183   - text-align: right;
184 192 }
185 193  
186   -#sobre a {
187   - color: #FFF;
188   - font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  194 +#sobre-portal {
  195 + float: right;
189 196 }
190 197  
191   -#sobre .portalservicos-item a {
  198 +#sobre a {
  199 + color: #FFF;
  200 + font-family: 'Open Sans', Arial, Helvetica, sans-serif;
192 201 padding: 0 10px;
193   - border-right: 1px solid #03316f;
  202 + border-right: 1px solid #FFF;
  203 +}
  204 +
  205 +#sobre a:hover {
  206 + color: #F1CA7F;
194 207 }
195 208  
196 209 #sobre .last-item a {
... ... @@ -254,6 +267,7 @@ width: 13em;
254 267 #content input.searchField {
255 268 margin-bottom: 1em;
256 269 }
  270 +
257 271 input.searchField {
258 272 -moz-appearance: searchfield;
259 273 }
... ... @@ -270,6 +284,10 @@ input.searchField {
270 284 margin-top: 0.5%;
271 285 }
272 286  
  287 +#wrap-2 {
  288 + margin-top: 0px !important;
  289 + padding-top: 5px !important;
  290 +}
273 291  
274 292 /* Search Button */
275 293 #search-button a {
... ... @@ -335,112 +353,39 @@ background-position: 0px 0px;
335 353 /****************** FIM cabecalho ******************/
336 354  
337 355 /************* Bar Psocial Style - Menu Horizontal**************/
338   -#user{
  356 +#user {
  357 + width: 960px;
  358 + position: relative;
  359 + top: 5px;
  360 + margin: 0px auto;
  361 + background: #FFF;
  362 + border-bottom: 2px solid #DFDFDF;
339 363 padding: 0px 2em;
340   - top: -30px;
341   - font-size: 12px;
342   - right: 4em;
343   -}
344   -
345   -.logged-in #user{
346   - top: -40px;
347   -}
348   -
349   -#user form {
350   - display:none;
351   -}
352   -
353   -#user .logged-in {
354   - visibility: hidden;
355   - display: block;
356   - padding: 1em;
357   - text-align: left;
358   - width: 130px;
359   - background: #204a87;
360   - border-radius: 10px
361   -}
362   -
363   -#user .logged-in:hover {
364   - visibility: visible;
365   -}
366   -#user .logged-in a#homepage-link {
367   - display: block;
368   - visibility: visible;
  364 + font-size: 0.9em;
  365 + color: #204A87;
369 366 }
370 367  
371   -#user .logged-in span {display: none;}
372   -
373   -#user .logged-in a {
374   - display: block;
375   - margin-bottom: 10px;
376   -}
377   -
378   -#user .logged-in #pending-tasks-count {
379   - display: inline-block;
380   - left: 0;
381   - position: absolute;
382   - top: 10px;
383   - visibility: visible;
384   -}
385   -
386   -#user a,
387   -#user a strong{
388   - color: #FFF;
389   -}
390   -
391   -#barra-psocial {
392   - position: relative;
393   - height: 40px;
394   - margin: auto;
395   - background: #204a87;
396   -}
397   -
398   -#barra-psocial li {
399   - float: left;
400   -}
401   -
402   -#assets-menu {
403   - background: #E8E8E8;
404   - top: 35px;
405   - left: 80px;
406   - min-width: 132px;
407   -}
408   -
409   -#assets-menu a {
410   - border: 1px solid #E8E8E8;
411   -}
412   -
413   -#categories_menu {
414   - /*max-width: 960px;*/
415   - padding: 0 1em;
416   - margin: auto;
  368 +#user.fixar-user {
  369 + z-index: 9999;
  370 + position: fixed;
  371 + left: 0px;
  372 + top: 0px;
  373 + padding-top: 5px;
417 374 }
418 375  
419   -#cat_menu {
420   - background: #204a87;
421   - height: 40px;
422   - padding-left: 60px;
  376 +#user a, #user a strong {
  377 + color: #204A87;
  378 + text-decoration: underline;
423 379 }
424 380  
425   -#cat_menu li {
426   - list-style: none;
427   - font-size: 12px;
428   - font-weight: bold;
429   - padding: 0px 20px;
430   - height: 100%;
431   - text-transform: uppercase;
  381 +#user a:focus strong,
  382 +#user a:hover strong {
  383 + color: #000;
  384 + text-decoration: none;
432 385 }
433 386  
434   -#cat_menu li:hover {
435   - background-color: #E1E4E4;
436   -}
  387 +#user form { display: none; }
437 388  
438   -#cat_menu li a {
439   - line-height: 40px;
440   - width: 100%;
441   - height: 100%;
442   - display: block;
443   -}
444 389 /************* FIM Bar Psocial Style - Menu Horizontal**************/
445 390  
446 391  
... ... @@ -481,15 +426,26 @@ background-position: 0px 0px;
481 426 }
482 427  
483 428 #footer-logos .logo-brasil {
484   - display: none; /* Eleicoes 2014 */
485   - background: transparent url(images/brasil.png) center center no-repeat;
486   - width: 153px;
  429 + background: transparent url(images/logof-govbr.png) center center no-repeat;
  430 + width: 170px;
487 431 }
488 432  
489 433 #footer-logos .logo-sgpr {
490   - background: transparent url(images/sgpr.png) center center no-repeat;
491   - width: 188px;
492   - margin-right: 30px;
  434 + background: transparent url(images/logof-sgpr.png) center center no-repeat;
  435 + width: 170px;
  436 + margin-right: 5px;
  437 +}
  438 +
  439 +#footer-logos .logo-snj {
  440 + background: transparent url(images/logof-snj.png) center center no-repeat;
  441 + width: 140px;
  442 + margin-right: 5px;
  443 +}
  444 +
  445 +#footer-logos .logo-conjuve {
  446 + background: transparent url(images/logof-conjuve.png) center center no-repeat;
  447 + width: 140px;
  448 + margin-right: 5px;
493 449 }
494 450  
495 451 #footer-logos .institucionais {
... ...
footer.html.erb
  Diff comments   View file @e19242d
1 1 <div id="footer-content">
2 2 <div id="footer-logos">
3 3 <div>
4   - <a class="logo-acesso" href="http://www.acessoainformacao.gov.br/" target="_blank"><span>Acesso a Informação</span></a>
  4 + <a class="logo-acesso" href="http://www.acessoainformacao.gov.br/"><span>Acesso a Informação</span></a>
5 5 <div class="institucionais">
6   - <a class="logo-sgpr" href="http://www.secretariageral.gov.br/" target="_blank"><span>Secretaria-geral da Presidência da República</span></a>
7   - <a class="logo-brasil" href="http://www.brasil.gov.br/" target="_blank"><span>Brasil - Governo Federal</span></a>
  6 + <a class="logo-conjuve" href="http://www.juventude.gov.br/conjuve"><span>Secretaria-geral da Presidência da República</span></a>
  7 + <a class="logo-snj" href="http://secretariageral.gov.br/atuacao/juventude/secretaria-nacional-de-juventude"><span>Secretaria-geral da Presidência da República</span></a>
  8 + <a class="logo-sgpr" href="http://www.secretariageral.gov.br/"><span>Secretaria-geral da Presidência da República</span></a>
  9 + <a class="logo-brasil" href="http://www.brasil.gov.br/"><span>Brasil - Governo Federal</span></a>
8 10 </div>
9 11 </div>
10 12 </div><!-- end id="footer-logos" -->
11 13  
12 14 <div id="footer-license">
13 15 <p>
14   - Este site utiliza o software livre <a href="http://noosfero.org" target="_blank">Noosfero</a>, licenciado pela <a href="http://www.gnu.org/licenses/agpl.html" target="_blank">GNU Affero General Public License, versão 3 ou superior.<a>
  16 + Este site utiliza o software livre <a href="http://noosfero.org">Noosfero</a>, licenciado pela <a href="http://www.gnu.org/licenses/agpl.html">GNU Affero General Public License, versão 3 ou superior.<a>
15 17 </p>
16 18 </div><!-- end id="footer-license" -->
17 19 </div>
18 20  
19   -<!-- <script type="text/javascript" src="http://barra.brasil.gov.br/barra.js?cor=verde"></script> -->
20 21 <script src="http://barra.brasil.gov.br/barra.js" type="text/javascript"></script>
21 22  
... ...
header.html.erb
  Diff comments   View file @e19242d
... ... @@ -3,67 +3,75 @@
3 3 </div>
4 4  
5 5 <div class="header-content">
  6 +
  7 + <div id="top-header">
  8 + <div>
  9 + <ul id="accessibility">
  10 + <li>
  11 + <a id="link-conteudo" href="#content" accesskey="1">
  12 + Ir para o conteúdo
  13 + <span>1</span>
  14 + </a>
  15 + </li>
  16 + <li>
  17 + <a id="link-navegacao" href="#sobre" accesskey="2">
  18 + Ir para o menu
  19 + <span>2</span>
  20 + </a>
  21 + </li>
  22 + <li>
  23 + <a id="link-buscar" href="#portal-searchbox" accesskey="3">
  24 + Ir para a busca
  25 + <span>3</span>
  26 + </a>
  27 + </li>
  28 + <li>
  29 + <a id="link-rodape" href="#theme-footer" accesskey="4">
  30 + Ir para o rodapé
  31 + <span>4</span>
  32 + </a>
  33 + </li>
  34 + </ul>
  35 + <ul id="portal-lang">
  36 + <li>
  37 + <a href="?lang=pt" class="flag-pt" alt="Português" title="Português">PT</a>
  38 + </li>
  39 + <li>
  40 + <a href="?lang=en" class="flag-en" title="English" alt="English">EN</a>
  41 + </li>
  42 + <li>
  43 + <a href="?lang=es" class="flag-en" title="Español" alt="Español">ES</a>
  44 + </li>
  45 + </ul>
  46 + <ul id="portal-siteactions">
  47 + <li id="siteaction-accessibility">
  48 + <a href="/ajuda/acessibilidade" title="Acessibilidade">Acessibilidade</a>
  49 + </li>
  50 + <li id="siteaction-contraste">
  51 + <a href="#" title="Alto Contraste">Alto Contraste</a>
  52 + </li>
  53 + <li id="siteaction-mapadosite">
  54 + <a href="/ajuda/mapa-do-site" title="Mapa do Site">Mapa do Site</a>
  55 + </li>
  56 + </ul>
  57 + </div>
  58 + </div><!-- #top-header -->
  59 +
6 60 <div role="banner" id="header">
7 61 <div>
8   - <ul id="accessibility">
9   - <li>
10   - <a id="link-conteudo" href="#content" accesskey="1">
11   - Ir para o conteúdo
12   - <span>1</span>
13   - </a>
14   - </li>
15   - <li>
16   - <a id="link-navegacao" href="#barra-psocial" accesskey="2">
17   - Ir para o menu
18   - <span>2</span>
19   - </a>
20   - </li>
21   - <li>
22   - <a id="link-buscar" href="#portal-searchbox" accesskey="3">
23   - Ir para a busca
24   - <span>3</span>
25   - </a>
26   - </li>
27   - <li>
28   - <a id="link-rodape" href="#theme-footer" accesskey="4">
29   - Ir para o rodapé
30   - <span>4</span>
31   - </a>
32   - </li>
33   - </ul>
34   - <ul id="portal-lang">
35   - <li>
36   - <a href="?lang=pt" class="flag-pt" alt="Português" title="Português">PT</a>
37   - </li>
38   - <li>
39   - <a href="?lang=en" class="flag-en" title="English" alt="English">EN</a>
40   - </li>
41   - <li>
42   - <a href="?lang=es" class="flag-en" title="Español" alt="Español">ES</a>
43   - </li>
44   - </ul>
45   - <ul id="portal-siteactions">
46   - <li id="siteaction-accessibility">
47   - <a href="#">Acessibilidade</a>
48   - </li>
49   - <li id="siteaction-contraste">
50   - <a href="#">Alto Contraste</a>
51   - </li>
52   - <li id="siteaction-mapadosite">
53   - <a href="/search">Mapa do Site</a>
54   - </li>
55   - </ul>
56   - <div id="logo">
57   - <a title="Juventude" href="/">
58   - <span id="portal-title">Juventude</span>
59   - </a>
60   - </div>
  62 + <div id="logo">
  63 + <a id="portal-logo" title="Portal da Juventude - Secretaria-Geral da Presidência da República" href="/">
  64 + <span id="portal-title-1">Portal da</span>
  65 + <h1 id="portal-title" class="corto">Juventude</h1>
  66 + <span id="portal-description">Secretaria-Geral da Presidência da República</span>
  67 + </a>
  68 + </div><!-- #logo -->
61 69  
62   - <div role="search" id="portal-searchbox">
63   - <form action="/search">
64   - <input type="text" autocomplete="off" name="query" size="18" title="Buscar no Site" placeholder="Buscar no Site" accesskey="3" class="searchField" id="searchGadget">
65   - <input type="submit" class="searchButton" value="Buscar"></form>
66   - </div>
  70 + <div role="search" id="portal-searchbox">
  71 + <form action="/search">
  72 + <input type="text" autocomplete="off" name="query" size="18" title="Buscar no Site" placeholder="Buscar no Site" accesskey="3" class="searchField" id="searchGadget">
  73 + <input type="submit" class="searchButton" value="Buscar"></form>
  74 + </div><!-- #portal-searchbox -->
67 75  
68 76 <div id="social-icons">
69 77 <ul>
... ... @@ -80,27 +88,37 @@
80 88 <a id="sb_tweet" title="Twitter" href="http://twitter.com/participatorio"><span>Twitter</span></a>
81 89 </li>
82 90 </ul>
83   - </div>
84   - </div>
  91 + </div><!-- #social-icons -->
  92 + </div>
85 93  
86 94 <div id="sobre">
87   - <ul>
88   - <li id="link-ces">
89   - <a href="https://pad.okfn.org/p/JuventudeNoosfero"><strong>Críticas e Sugestões</strong></a>
90   - </li>
91   - <li id="link-faq">
  95 + <div>
  96 + <ul id="sobre-portal">
  97 + <li>
92 98 <a href="/ajuda/duvidas-frequentes">Perguntas frequentes</a>
93 99 </li>
94   - <li id="link-contact">
  100 + <li>
95 101 <a href="/contact/juventude/new">Contato</a>
96 102 </li>
  103 + <li class="last-item">
  104 + <a href="/juventude/imprensa" title="Imprensa">Imprensa</a>
  105 + </li>
97 106 </ul>
98   - </div>
99   - </div>
100   -</div>
101   -
102   -<div id="barra-psocial">
103   - <div id="categories_menu">
104   - <%= theme_include 'categories' %>
105   - </div>
106   -</div>
  107 + <ul>
  108 + <li>
  109 + <a href="/ajuda/sobre-o-portal" title="Sobre o portal">Sobre o portal</a>
  110 + </li>
  111 + <li>
  112 + <a href="/ajuda/orgaos-responsaveis" title="Órgaos responsáveis">Órgãos responsáveis</a>
  113 + </li>
  114 + <li>
  115 + <a href="/legislacao" title="Legislação">Legislação</a>
  116 + </li>
  117 + <li class="last-item">
  118 + <a href="/dados" title="Dados e resultados">Dados e resultados</a>
  119 + </li>
  120 + </ul>
  121 + </div>
  122 + </div><!-- #sobre -->
  123 + </div><!-- #header -->
  124 +</div><!-- .header-content -->
... ...
images/bg-juventude.jpg
View file @e19242d

102 KB | W: | H:

81.5 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/logof-conjuve.png 0 → 100644
View file @e19242d

3.23 KB
images/logof-govbr.png 0 → 100644
View file @e19242d

8.78 KB
images/logof-sgpr.png 0 → 100644
View file @e19242d

4.29 KB
images/logof-snj.png 0 → 100644
View file @e19242d

3.17 KB
theme.js
  Diff comments   View file @e19242d
... ... @@ -50,3 +50,16 @@ function alignBlocks(containerIndex){
50 50 // $('#block-48500 > .block-inner-1 > .block-inner-2').append('<div class="more_button" style="position: absolute; top: 5px; left: 519px;"><div class="view_all"><a href="/portal/blog">Ler todas</a></div></div>');
51 51  
52 52 })(jQuery);
  53 +
  54 +// Aplicar class para fixar o menu #user ao topo
  55 +jQuery("document").ready(function($){
  56 +var nav = $('#user');
  57 +$(window).scroll(function () {
  58 +if ($(this).scrollTop() > 220) {
  59 +nav.addClass("fixar-user");
  60 +} else {
  61 +nav.removeClass("fixar-user");
  62 +}
  63 +});
  64 +});
  65 +
... ...