Commit 1ee405a7f24aa8c6b5f4ef24dfc68beadc8cc42b
1 parent
c7782905
Exists in
spb-release/3.0
New footer
Signed-off-by: Charles Oliveira <18oliveira.charles@gmail.com> Signed-off-by: Melissa Wen <melissa.srw@gmail.com> Signed-off-by: Peter Lima <peterlima@gmail.com> Signed-off-by: Sergio Oliveira <sergio@tracy.com.br>
Showing
2 changed files
with
196 additions
and
106 deletions
Show diff stats
colab/static/css/footer.css
1 | /*Footer*/ | 1 | /*Footer*/ |
2 | 2 | ||
3 | footer { | 3 | footer { |
4 | - background: none; | 4 | + font-family: 'open_sansregular', Arial, Helvetica, sans-serif; |
5 | } | 5 | } |
6 | 6 | ||
7 | -.colab-footer-content{ | ||
8 | - background: rgb(213,213,213); | ||
9 | - font-family: 'Open Sans Regular', Arial, Helvetica, sans-serif; | 7 | +footer #btn-top { |
8 | + min-width: 960px; | ||
9 | + max-width: 960px; | ||
10 | + padding-right: 0px; | ||
11 | + margin-bottom: 22px; | ||
12 | + text-decoration: none; | ||
13 | + font-family: 'open_sansregular', Arial, Helvetica, sans-serif; | ||
14 | + font-size: 14px; | ||
15 | + position: relative; | ||
10 | } | 16 | } |
11 | 17 | ||
12 | -.colab-footer-links a{ | ||
13 | - color:#2c66ce; | ||
14 | - font-size: 13px; | ||
15 | - line-height: 1.7em; | 18 | +footer #btn-top a { |
19 | + padding-left: 20px; | ||
20 | + background: url("../img/voltar-topo.png") no-repeat left center; | ||
21 | + color: #777; | ||
22 | + font-size: 14px; | ||
16 | } | 23 | } |
17 | 24 | ||
18 | -.colab-footer-links a:hover{ | ||
19 | - background: none; | ||
20 | - text-decoration: underline; | 25 | +footer #footer { |
26 | + padding: 4px 0 20px 0; | ||
27 | + min-height: 50px; | ||
28 | + width: 100%; | ||
29 | + background: #EAEDF0; | ||
30 | + color: #fff; | ||
31 | + font-family: 'open_sansregular', Arial, Helvetica, sans-serif; | ||
32 | + min-width: 960px; | ||
21 | } | 33 | } |
22 | 34 | ||
23 | -.colab-footer-links{ | ||
24 | - color:#2c66ce; | ||
25 | - border-left:1px dotted #2c66ce; | ||
26 | - margin-top: 50px; | ||
27 | - margin-bottom: 50px; | 35 | + |
36 | +footer #footer > div { | ||
37 | + margin: 2em auto; | ||
38 | + padding-top: 1em; | ||
39 | + max-width: 960px; | ||
28 | } | 40 | } |
29 | 41 | ||
30 | -.colab-footer-links dt{ | ||
31 | - font-size: 18px; | ||
32 | - font-weight: bold; | ||
33 | - line-height: 1.3em; | ||
34 | - margin-bottom: 8px; | ||
35 | - font-family: 'Open Sans Regular', Arial, Helvetica, sans-serif; | 42 | +footer #doormat-container { |
43 | + float: none; | ||
44 | + width: 100%; | ||
36 | } | 45 | } |
37 | 46 | ||
38 | -.colab-footer-links dd{ | ||
39 | - padding-bottom: 3px | 47 | +footer #doormat-container dl { |
48 | + border-left: 1px dotted #9CB5E2; | ||
49 | + margin: 0 0 18px 0; | ||
50 | + font-size: 13px; | ||
40 | } | 51 | } |
41 | 52 | ||
42 | -.footer-gov{ | ||
43 | - background: #0042b2; | 53 | +footer #doormat-container dt { |
54 | + color: #2C65CD; | ||
55 | + font-size: 18px; | ||
56 | + font-family: "open_sansbold", Arial, Helvetica, sans-serif; | ||
44 | } | 57 | } |
45 | 58 | ||
46 | -.footer-gov > .container{ | ||
47 | - padding: 2em 0; | 59 | +footer #doormat-container dt, |
60 | +footer #doormat-container dd { | ||
61 | + padding-left: 10px; | ||
62 | + margin-bottom: 4px; | ||
48 | } | 63 | } |
49 | 64 | ||
50 | -.footer-gov .institucionais a{ | ||
51 | - display:table-cell; | ||
52 | - vertical-align: middle; | ||
53 | - float: right; | 65 | +footer #doormat-container dd a { |
66 | + color: #2C65CD; | ||
54 | } | 67 | } |
55 | 68 | ||
56 | -.footer-gov a:hover{ | ||
57 | - text-decoration: none; | 69 | +footer #doormat-container dd a:hover { |
70 | + text-decoration: none; | ||
71 | +} | ||
72 | + | ||
73 | +footer #doormat-container.columns-4 .doormatColumn { | ||
74 | + width: 21%; | ||
58 | } | 75 | } |
59 | 76 | ||
60 | -.footer-gov span{ | ||
61 | - display: none; | 77 | +footer #doormat-container .doormatColumn { |
78 | + float: left; | ||
79 | + margin: 0 1.1em 0 0.8em; | ||
80 | + text-align: left; | ||
62 | } | 81 | } |
63 | 82 | ||
64 | -.footer-gov .colab-logo-sgpr img, .logo-acesso img{ | ||
65 | - padding-top: 10px; | ||
66 | - padding-right: 15%; | ||
67 | - padding-bottom: 10px; | 83 | +#footer .footer-logos { |
84 | + margin: 0 0 -20px; | ||
85 | + padding: 1.6em 0; | ||
86 | + max-width: 100%; | ||
87 | + background: #0041B1; | ||
68 | } | 88 | } |
69 | 89 | ||
70 | -.colab-logo-sgpr img, .spb-definitions { | ||
71 | - display: none; | 90 | +#footer .footer-logos div { |
91 | + width: 960px; | ||
92 | + margin: auto; | ||
93 | + overflow: auto; | ||
72 | } | 94 | } |
73 | 95 | ||
74 | -.footer-gov .logo-brasil img{ | ||
75 | - padding-right: 0; | 96 | +#footer .footer-logos div .logo-acesso-footer { |
97 | + background-image: url("../img/acesso-a-informacao.png"); | ||
98 | + float: left; | ||
99 | + width: 107px; | ||
100 | + height: 49px; | ||
76 | } | 101 | } |
77 | 102 | ||
78 | -.go-top{ | ||
79 | - font-size: 13px; | ||
80 | - height: 2em; | 103 | + |
104 | +#footer .footer-logos div .logo-brasil-footer { | ||
105 | + background-image: url("../img/brasil.png"); | ||
106 | + float: right; | ||
107 | + width: 153px; | ||
108 | + height: 48px; | ||
109 | + } | ||
110 | + | ||
111 | +footer #extra-footer p { | ||
112 | + margin: 1em auto; | ||
113 | + max-width: 960px; | ||
114 | + font-size: 12px; | ||
115 | + line-height: 1.8em; | ||
81 | } | 116 | } |
82 | 117 | ||
83 | -.go-top a{ | 118 | +footer #extra-footer a { |
119 | + color: #2C65CD; | ||
120 | +} | ||
121 | + | ||
122 | +footer #footer .clear { | ||
123 | + clear: both; | ||
124 | +} | ||
125 | + | ||
126 | + | ||
127 | +footer .go-top a{ | ||
84 | color: #717782; | 128 | color: #717782; |
85 | line-height: 2em; | 129 | line-height: 2em; |
86 | } | 130 | } |
87 | 131 | ||
88 | -.go-top i { | 132 | +footer .go-top i { |
89 | margin-right: 5px; | 133 | margin-right: 5px; |
90 | text-decoration: none; | 134 | text-decoration: none; |
91 | - font-size: 12px; | 135 | + font-size: 12px; |
92 | } | 136 | } |
93 | 137 | ||
94 | -.spb-definitions{ | ||
95 | - font-size: 10px; | ||
96 | - padding: 10px 0; | 138 | +html footer div#wrap-footer-brasil { |
139 | + padding: 0; | ||
97 | } | 140 | } |
colab/templates/footer.html
@@ -2,68 +2,115 @@ | @@ -2,68 +2,115 @@ | ||
2 | {% load static from staticfiles %} | 2 | {% load static from staticfiles %} |
3 | 3 | ||
4 | <footer> | 4 | <footer> |
5 | - <div class="container"> | 5 | + <div id="btn-top" class="container"> |
6 | <div class="pull-right go-top"> | 6 | <div class="pull-right go-top"> |
7 | - <a id="link-top" href="#link-rodape"><i class="fa fa-chevron-up"></i>Voltar ao topo</a> | 7 | + <a id="link-top" href="#link-rodape">Voltar para o topo</a> |
8 | </div> | 8 | </div> |
9 | </div> | 9 | </div> |
10 | - <div class="container-fluid colab-footer-content"> | ||
11 | - <div class="container"> | ||
12 | - <dl class="col-md-2 col-md-offset-1 colab-footer-links"> | ||
13 | - <dt>Assuntos</dt> | ||
14 | - <dd><a href="/social/spb/publique-seu-software" title="Publique seu software">Publique seu software</a></dd> | ||
15 | - <dd><a href="http://www.softwarepublico.gov.br/mpv/" title="Prestadores de serviço">Prestadores de serviço</a></dd> | ||
16 | - <dd><a href="http://www.softwarepublico.gov.br/4cmbr/xowiki/Principal" title="Espaço dos municípios">Espaço dos municípios</a></dd> | ||
17 | - </dl> | ||
18 | - <dl class="col-md-2 colab-footer-links"> | ||
19 | - <dt>Software Público</dt> | ||
20 | - <dd class="colab-portalspb-item"> | ||
21 | - <a title="Entenda o que é" href="/social/spb/entenda-o-que-e">Entenda o que é</a> | 10 | + <div id="footer" role="contentinfo"> |
11 | + <a name="afooter" id="afooter"></a> | ||
12 | + <div id="doormat-container" class="columns-4"> | ||
13 | + <div class="doormatColumn column-0"> | ||
14 | + <dl class="doormatSection"> | ||
15 | + <dt class="doormatSectionHeader">Assuntos</dt> | ||
16 | + <dd class="doormatSectionBody"> | ||
17 | + <a href="/social/spb/publique-seu-software" class="external-link">Publique seu software</a> | ||
22 | </dd> | 18 | </dd> |
23 | - <dd class="colab-portalspb-item"> | ||
24 | - <a title="Eventos" href="/social/profile/spb/events">Eventos</a> | 19 | + <dd class="doormatSectionBody"> |
20 | + <a href="http://antigo.softwarepublico.gov.br/mpv/" class="external-link">Prestadores de serviço</a> | ||
25 | </dd> | 21 | </dd> |
26 | - <dd class="colab-portalspb-item"> | ||
27 | - <a title="Prêmios" href="/social/spb/premios">Prêmios</a> | 22 | + <dd class="doormatSectionBody"> |
23 | + <a href="http://antigo.softwarepublico.gov.br/4cmbr/xowiki/Principal" class="external-link">Espaços dos municípios</a> | ||
28 | </dd> | 24 | </dd> |
29 | - <dd class="colab-portalspb-item"> | ||
30 | - <a title="Publicações" href="/social/spb/publicacoes">Publicações</a> | 25 | + </dl> |
26 | + </div> | ||
27 | + <div class="doormatColumn column-1"> | ||
28 | + <dl class="doormatSection"> | ||
29 | + <dt class="doormatSectionHeader">Software Público</dt> | ||
30 | + <dd class="doormatSectionBody"> | ||
31 | + <a href="/social/spb/entenda-o-que-e" class="external-link">Entenda o que é</a> | ||
31 | </dd> | 32 | </dd> |
32 | - </dl> | ||
33 | - <dl class="col-md-2 colab-footer-links"> | ||
34 | - <dt>Serviços</dt> | ||
35 | - <dd> | ||
36 | - <a href="/social/spb/ajuda#faq" title="FAQ">FAQ</a> | ||
37 | - </dd> | ||
38 | - <dd> | ||
39 | - <a href="/social/spb/contato" title="Contato">Contato</a> | ||
40 | - </dd> | ||
41 | - <dd> | ||
42 | - <a href="/archives/thread/spb-usuarios/relatar-erros#msg-1635" title="Relatar erros">Relatar erros</a> | ||
43 | - </dd> | ||
44 | - </dl> | ||
45 | - <dl class="col-md-2 colab-footer-links"> | ||
46 | - <dt>RSS</dt> | ||
47 | - <dd><a href="/social/spb/rss/o-que-e" title="O que é?">O que é</a></dd> | ||
48 | - <dd><a href="/rss/colab/latest" title="Assine">Assine</a></dd> | ||
49 | - </dl> | ||
50 | - <dl class="col-md-2 colab-footer-links"> | ||
51 | - <dt>Navegação</dt> | ||
52 | - <dd><a href="/social/spb/acessibilidade">Acessibilidade</a></dd> | ||
53 | - <dd><a href="/social/spb/mapa-do-site">Mapa do site</a></dd> | ||
54 | - </dl> | ||
55 | - </div> | ||
56 | - | ||
57 | - <div class="footer-gov"> | ||
58 | - <div class="container"> | ||
59 | - <div class="col-md-7"> | ||
60 | - <a class="logo-acesso" href="http://www.acessoainformacao.gov.br/" target="_blank"><img class="img-responsive pull-left" src="{% static 'img/acesso-a-informacao.png' %}" ><span>Acesso a Informação</span></a> | 33 | + <dd class="doormatSectionBody"> |
34 | + <a href="/social/profile/spb/events" class="external-link">Eventos</a> | ||
35 | + </dd> | ||
36 | + <dd class="doormatSectionBody"> | ||
37 | + <a href="/social/spb/premios" class="external-link">Prêmios</a> | ||
38 | + </dd> | ||
39 | + <dd class="doormatSectionBody"> | ||
40 | + <a href="/social/spb/publicacoes" class="external-link">Publicações</a> | ||
41 | + </dd> | ||
42 | + </dl> | ||
61 | </div> | 43 | </div> |
62 | - <div class="col-md-5 institucionais"> | ||
63 | - <a class="logo-brasil" href="http://www.brasil.gov.br/" target="_blank"><img class="img-responsive" src="{% static 'img/brasil.png' %}" ><span>Brasil - Governo Federal</span></a> | ||
64 | - <a class="colab-logo-sgpr" href="http://www.secretariageral.gov.br/" target="_blank"><img class="img-responsive" src="{% static 'img/sgpr.png' %}" ><span>Secretaria-geral da Presidência da República</span></a> | 44 | + <div class="doormatColumn column-2"> |
45 | + <dl class="doormatSection"> | ||
46 | + <dt class="doormatSectionHeader">Serviços</dt> | ||
47 | + <dd class="doormatSectionBody"> | ||
48 | + <a href="/social/spb/ajuda#faq" class="external-link">FAQ</a> | ||
49 | + </dd> | ||
50 | + <dd class="doormatSectionBody"> | ||
51 | + <a href="/social/spb/contato" class="external-link">Contato</a> | ||
52 | + </dd> | ||
53 | + <dd class="doormatSectionBody"> | ||
54 | + <a href="/archives/thread/spb-usuarios/relatar-erros#msg-1635" class="external-link">Relatar erros</a> | ||
55 | + </dd> | ||
56 | + </dl> | ||
57 | + </div> | ||
58 | + <div class="doormatColumn column-3"> | ||
59 | + <dl class="doormatSection"> | ||
60 | + <dt class="doormatSectionHeader">RSS</dt> | ||
61 | + <dd class="doormatSectionBody"> | ||
62 | + <a href="/social/spb/rss/o-que-e" class="external-link">O que é?</a> | ||
63 | + </dd> | ||
64 | + <dd class="doormatSectionBody"> | ||
65 | + <a href="/rss/colab/latest" class="external-link">Assine</a> | ||
66 | + </dd> | ||
67 | + </dl> | ||
68 | + <dl class="doormatSection"> | ||
69 | + <dt class="doormatSectionHeader">Navegação</dt> | ||
70 | + <dd class="doormatSectionBody"> | ||
71 | + <a href="/social/spb/acessibilidade" class="external-link">Acessibilidade</a> | ||
72 | + </dd> | ||
73 | + <dd class="doormatSectionBody"> | ||
74 | + <a href="/social/spb/mapa-do-site" class="external-link">Mapa do site</a> | ||
75 | + </dd> | ||
76 | + </dl> | ||
65 | </div> | 77 | </div> |
66 | </div> | 78 | </div> |
67 | - </div><!-- end footer-gov --> | 79 | + <div class="clear"></div> |
80 | + <!-- <div id="footer-brasil" class="footer-logos"> | ||
81 | + <div> | ||
82 | + <a href="http://www.acessoainformacao.gov.br/" class="logo-acesso"> | ||
83 | + <img src="{% static 'img/acesso-a-informacao.png' %}" alt="Acesso a Informação"></a> | ||
84 | + <a href="http://www.brasil.gov.br/" class="logo-brasil"> | ||
85 | + <img src="{% static 'img/brasil.png' %}" alt="Brasil - Governo Federal"></a> | ||
86 | + </div> | ||
87 | + </div> --> | ||
88 | + <div class="footer-logos"> | ||
89 | + | ||
90 | + | ||
91 | + <div> | ||
92 | + | ||
93 | + <a href="http://www.acessoainformacao.gov.br/"> | ||
94 | + <span class="logo-acesso-footer"></span> | ||
95 | + </a> | ||
96 | + | ||
97 | + | ||
98 | + <a href="http://www.brasil.gov.br/"> | ||
99 | + <span class="logo-brasil-footer"></span> | ||
100 | + </a> | ||
101 | + | ||
102 | + | ||
103 | + </div> | ||
104 | + | ||
105 | + </div> | ||
106 | + </div> | ||
107 | + <div id="extra-footer"> | ||
108 | + <p> | ||
109 | + Desenvolvido com os projetos de software livre | ||
110 | + <a href="http://github.com/colab/colab">Colab</a>, | ||
111 | + <a href="http://gitlab.com">Gitlab</a>, | ||
112 | + <a href="http://www.gnu.org/software/mailman/">Mailman</a> e | ||
113 | + <a href="http://noosfero.org">Noosfero</a> | ||
114 | + </p> | ||
68 | </div> | 115 | </div> |
69 | </footer> | 116 | </footer> |