Download as
Browse Code »

Commit 4246158071b3e8877f3182556a3b3b6609812317

Authored by Melissa Wen
1 parent 6fd298c0
Exists in master and in 5 other branches fix_forms_for_create_and_edit_contents, fix_people_elements, fix_search_pages, production, staging

Move theme-header to global-header and add style of this

Showing 3 changed files with 335 additions and 101 deletions   Show diff stats
_globalheader.sass 0 → 100644
  Diff comments   View file @4246158
... ... @@ -0,0 +1,244 @@
  1 +#global-header
  2 + height: auto
  3 + margin: auto
  4 + width: 100%
  5 + a:link
  6 + text-decoration: none
  7 +
  8 +.header-content
  9 + *
  10 + list-style: none
  11 + margin: 0
  12 + padding: 0
  13 + vertical-align: baseline
  14 + li
  15 + display: inline
  16 +
  17 +#header
  18 + background-color: #fcdd4e //(amarelo-claro)
  19 + // Old browsers
  20 + background-color: #f9c404 // (amarelo-escuro)
  21 + background-image: -moz-radial-gradient(center, ellipse cover, #fcdd4e 1%, #f9c404 100%) // (amarelo-claro)(amarelo-escuro)
  22 + // FF3.6+
  23 + background-image: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#fcdd4e), color-stop(100%,#f9c404))
  24 + // Chrome,Safari4+
  25 + background-image: -webkit-radial-gradient(center, ellipse cover, #fcdd4e 1%,#f9c404 100%)
  26 + // Chrome10+,Safari5.1+
  27 + background-image: -o-radial-gradient(center, ellipse cover, #fcdd4e 1%,#f9c404 100%)
  28 + // Opera 12+
  29 + background-image: -ms-radial-gradient(center, ellipse cover, #fcdd4e 1%,#f9c404 100%)
  30 + // IE10+
  31 + background-image: radial-gradient(ellipse at center, #fcdd4e 1%,#f9c404 100%)
  32 + // IE6-9 fallback on horizontal gradient
  33 + color: #fff
  34 + padding: 13px 0 0 0
  35 + &>div
  36 + margin: 0 auto
  37 + max-width: 960px
  38 +
  39 +#accessibility
  40 + display: block
  41 + float: left
  42 + font-family: arial
  43 + font-size: 10px
  44 + list-style: nonei
  45 + width: 45%
  46 + a
  47 + color: #00500f
  48 + margin-right: 8px
  49 + span
  50 + background: none repeat scroll 0 0 #497B16
  51 + color: #FFFFFF
  52 + padding: 0 4px
  53 +
  54 +#portal-siteactions
  55 + display: block
  56 + float: right
  57 + font-size: 10px
  58 + margin-top: -2px
  59 + text-align: right
  60 + width: 30%
  61 + a
  62 + border-bottom: 1px dotted #00500f
  63 + color: #00500f
  64 + font-family: 'Open Sans', Arial, Helvetica, sans-serif
  65 + padding: 2px 0px
  66 + text-decoration: none
  67 + text-transform: uppercase
  68 + &:hover
  69 + color: #03316f
  70 + li
  71 + display: inline
  72 + margin: 0px 0px 0px 15px
  73 +
  74 +#user
  75 + float: right
  76 + height: auto
  77 + margin-top: -2px
  78 + position: relative
  79 + right: 0
  80 + top: 0
  81 + width: auto
  82 + #top-search
  83 + display: none
  84 + #homepage-link i
  85 + display: block
  86 + a
  87 + margin-left: 15px
  88 + i
  89 + display: none
  90 + strong
  91 + color: #00500f
  92 + font-family: 'Open Sans'
  93 + font-size: 10px
  94 + font-weight: 300
  95 + text-transform: uppercase
  96 + .welcome, .or
  97 + display: none
  98 +
  99 +#logo
  100 + float: left
  101 + padding: 0
  102 + width: 70%
  103 + a
  104 + display: block
  105 + color: #03316f
  106 + margin: 1em 0px
  107 + text-decoration: none
  108 + width: 100%
  109 + span
  110 + display: block
  111 + #portal-title
  112 + margin: 30px 0px 46px 0px
  113 + color: #03316f
  114 + font-size: 40px
  115 + font-family: 'Open Sans Extrabold', Arial, Helvetica, sans-serif
  116 + font-weight: normal
  117 + line-height: 1em
  118 + letter-spacing: -0.05em
  119 + #portal-description
  120 + font-size: 1.2em
  121 + text-transform: uppercase
  122 +
  123 +#sobre
  124 + #header &
  125 + clear: both
  126 + background: #f8c300
  127 + font-size: 12px
  128 + line-height: 20px
  129 + margin: 0
  130 + max-width: 100%
  131 + padding: 5px 0
  132 + ul
  133 + max-width: 960px
  134 + margin: 0 auto
  135 + text-align: right
  136 + a
  137 + color: #00500f
  138 + font-family: 'Open Sans', Arial, Helvetica, sans-serif
  139 + #link-faq a
  140 + border-right: 1px solid #00500f
  141 + padding: 0 10px
  142 + #link-contact a
  143 + padding-left: 10px
  144 +
  145 +// Searchbox
  146 +.LSBox
  147 + border: none
  148 + margin: 0
  149 + padding: 0
  150 +
  151 +input.searchField
  152 + -moz-appearance: none
  153 +
  154 +#portal-searchbox
  155 + background: #fff
  156 + border: 1px solid #CCCCCC
  157 + border-radius: 5px
  158 + -moz-border-radius: 5px
  159 + -webkit-border-radius: 5px
  160 + clear: right
  161 + float: right
  162 + font-size: 80%
  163 + margin: 30px 0 14px
  164 + padding: 2px
  165 + text-align: right
  166 + .searchField
  167 + border: none
  168 + padding: 0.45em
  169 + width: 170px
  170 + form
  171 + white-space: nowrap
  172 + label
  173 + font-weight: normal
  174 + #searchGadget
  175 + margin: 0
  176 + width: 13em
  177 + input.searchButton
  178 + background-image: url("images/search-button.gif")
  179 + background-position: 8px 2px
  180 + background-repeat: no-repeat
  181 + background-color: #ffffff
  182 + border: none
  183 + padding: 4px 15px
  184 + text-indent: -2000px
  185 + input.searchField
  186 + margin-bottom: 1em
  187 + -moz-appearance: searchfield
  188 +
  189 +#LSResult
  190 + margin-top: 0.5%
  191 + z-index: 1
  192 +
  193 +// Search Button
  194 +#search-button
  195 + a
  196 + display: inline-block
  197 + height: 25px
  198 + margin-right: 3px
  199 + margin-top: 10px
  200 + width: 29px
  201 + &:hover
  202 + opacity: 0.6
  203 + #sb_search
  204 + background-image: url(images/search.png)
  205 + background-size: 100% 100%
  206 + span
  207 + display: none
  208 +
  209 +// Social Buttons
  210 +#social-icons
  211 + clear: right
  212 + float: right
  213 + margin: 0px
  214 + ul
  215 + display: table-row
  216 + li
  217 + float: right
  218 + width: 20px
  219 + margin-left: 4px
  220 + a
  221 + width: 20px
  222 + height: 20px
  223 + padding: 0px
  224 + display: inline-block
  225 + background-repeat: no-repeat
  226 + #sb_face
  227 + background-image: url(images/icone-verde-facebook.png)
  228 + &:hover
  229 + background: url(images/icone-verde-facebook.png) 0 20px
  230 + #sb_tweet
  231 + background-image: url(images/icone-verde-twitter.png)
  232 + &:hover
  233 + background: url(images/icone-verde-twitter.png) 0 20px
  234 + #sb_youtb
  235 + background-image: url(images/icone-verde-youtube.png)
  236 + &:hover
  237 + background: url(images/icone-verde-youtube.png) 0 20px
  238 + #sb_flickr
  239 + background-image: url(images/icone-verde-flickr.png)
  240 + &:hover
  241 + background: url(images/icone-verde-flickr.png) 0 20px
  242 + span
  243 + display: none
  244 +// END social Buttons
... ...
global_header.html.erb 0 → 100644
  Diff comments   View file @4246158
... ... @@ -0,0 +1,91 @@
  1 +<!--- <div id="barra-brasil">
  2 + <a href="http://brasil.gov.br" style="background:#7F7F7F; height: 20px; padding:4px 0 4px 10px; display: block; font-family:sans,sans-serif; text-decoration:none; color:white; ">Portal do Governo Brasileiro</a>
  3 +</div> -->
  4 +
  5 +
  6 +<div class="header-content">
  7 + <div role="banner" id="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="#barra-psocial" 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="#global-footer" accesskey="4">
  30 + Ir para o rodapé
  31 + <span>4</span>
  32 + </a>
  33 + </li>
  34 + </ul>
  35 + <!-- <ul id="login-menu">
  36 + <li class="login-item"><a href="/account/signup">Cadastre-se</a></li>
  37 + <li class="login-item last-item"><a href="/account/login">Entrar</a></li>
  38 + </ul> -->
  39 + <%= render :partial => 'layouts/user' %>
  40 + <ul id="portal-siteactions">
  41 + <li id="siteaction-accessibility">
  42 + <a href="#">Acessibilidade</a>
  43 + </li>
  44 + <li id="siteaction-contraste">
  45 + <a href="#">Alto Contraste</a>
  46 + </li>
  47 + <li id="siteaction-mapadosite">
  48 + <a href="/search">Mapa do Site</a>
  49 + </li>
  50 + </ul>
  51 + <div id="logo">
  52 + <a title="Participa.br" href="/">
  53 + <span id="portal-title">Participa.br</span>
  54 + </a>
  55 + </div>
  56 + <div role="search" id="portal-searchbox">
  57 + <form action="/search/articles">
  58 + <input type="text" autocomplete="off" name="query" size="18" title="Buscar no Site" placeholder="Buscar no Site" accesskey="3" class="searchField" id="searchGadget">
  59 + <input type="submit" class="searchButton" value="Buscar"></form>
  60 + </div>
  61 +
  62 + <div id="social-icons">
  63 + <ul>
  64 + <li>
  65 + <a id="sb_flickr" title="Flickr" href="https://www.flickr.com/photos/110745331@N02/"><span>Flickr</span></a>
  66 + </li>
  67 + <li>
  68 + <a id="sb_face" title="Facebook" href="http://facebook.com/participabr"><span>Facebook</span></a>
  69 + </li>
  70 + <li>
  71 + <a id="sb_youtb" title="Youtube" href="https://www.youtube.com/participabrasil"><span>Youtube</span></a>
  72 + </li>
  73 + <li>
  74 + <a id="sb_tweet" title="Twitter" href="http://twitter.com/participabr"><span>Twitter</span></a>
  75 + </li>
  76 + </ul>
  77 + </div>
  78 + </div>
  79 +
  80 + <div id="sobre">
  81 + <ul>
  82 + <li id="link-faq">
  83 + <a href="/ajuda/ajuda/duvidas-frequentes">Perguntas frequentes</a>
  84 + </li>
  85 + <li id="link-contact">
  86 + <a href="/contact/portal/new">Contato</a>
  87 + </li>
  88 + </ul>
  89 + </div>
  90 + </div>
  91 +</div>
... ...
header.html.erb
View file @6fd298c
... ... @@ -1,101 +0,0 @@
1   -<div id="barra-brasil">
2   - <a href="http://brasil.gov.br" style="background:#7F7F7F; height: 20px; padding:4px 0 4px 10px; display: block; font-family:sans,sans-serif; text-decoration:none; color:white; ">Portal do Governo Brasileiro</a>
3   -</div>
4   -
5   -
6   -<div class="header-content">
7   - <div role="banner" id="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="#barra-psocial" 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-siteactions">
36   - <li id="siteaction-accessibility">
37   - <a href="#">Acessibilidade</a>
38   - </li>
39   - <li id="siteaction-contraste">
40   - <a href="#">Alto Contraste</a>
41   - </li>
42   - <li id="siteaction-mapadosite">
43   - <a href="/search">Mapa do Site</a>
44   - </li>
45   - </ul>
46   -
47   - <div id="logo">
48   - <a title="Participa.br" href="/">
49   - <span id="portal-title">Participa.br</span>
50   - </a>
51   - </div>
52   -
53   - <div role="search" id="portal-searchbox">
54   - <form action="/search/articles">
55   - <input type="text" autocomplete="off" name="query" size="18" title="Buscar no Site" placeholder="Buscar no Site" accesskey="3" class="searchField" id="searchGadget">
56   - <input type="submit" class="searchButton" value="Buscar"></form>
57   - </div>
58   -
59   - <div id="social-icons">
60   - <ul>
61   - <li>
62   - <a id="sb_flickr" title="Flickr" href="https://www.flickr.com/photos/110745331@N02/"><span>Flickr</span></a>
63   - </li>
64   - <li>
65   - <a id="sb_face" title="Facebook" href="http://facebook.com/participabr"><span>Facebook</span></a>
66   - </li>
67   - <li>
68   - <a id="sb_youtb" title="Youtube" href="https://www.youtube.com/participabrasil"><span>Youtube</span></a>
69   - </li>
70   - <li>
71   - <a id="sb_tweet" title="Twitter" href="http://twitter.com/participabr"><span>Twitter</span></a>
72   - </li>
73   - </ul>
74   - </div>
75   - </div>
76   -
77   - <div id="sobre">
78   - <ul>
79   - <li id="link-faq">
80   - <a href="/ajuda/ajuda/duvidas-frequentes">Perguntas frequentes</a>
81   - </li>
82   - <li id="link-contact">
83   - <a href="/contact/portal/new">Contato</a>
84   - </li>
85   - </ul>
86   - </div>
87   - </div>
88   -</div>
89   -
90   -<div id="barra-psocial">
91   - <span id="custom-menu">
92   - <a href="http://biblioteca.participa.br/" target="_blank"><img src="/designs/themes/participa-theme/images/biblioteca_digital.png" title="Biblioteca Digital"></a>
93   - </span>
94   - <div id="categories_menu">
95   - <%= theme_include 'categories' %>
96   - </div>
97   - <div id="participa-languages">
98   - <a href="?lang=pt" class="flag-pt" title="Português"><span>Português</span></a>
99   - <a href="?lang=en" class="flag-en" title="English"><span>English</span></a>
100   - </div>
101   -</div>