Commit 5215e1c410185bc052521af1c2ca6bbb94dea930
1 parent
b3bcc701
Exists in
master
and in
8 other branches
sync
Showing
13 changed files
with
139 additions
and
41 deletions
Show diff stats
src/app/components/a11y-bar/a11y-bar.html
1 | -<div class="a11y-bar"> | 1 | +<div class="a11y-bar hidden-xs"> |
2 | <div class="container"> | 2 | <div class="container"> |
3 | <div class="row"> | 3 | <div class="row"> |
4 | <div class="col-sm-6"> | 4 | <div class="col-sm-6"> |
@@ -21,12 +21,12 @@ | @@ -21,12 +21,12 @@ | ||
21 | <span class="color-theme-common-bg">3</span> | 21 | <span class="color-theme-common-bg">3</span> |
22 | </a> | 22 | </a> |
23 | </li> | 23 | </li> |
24 | - <li> | 24 | + <!-- <li> |
25 | <a class="color-theme-common-fg" accesskey="4" href="#footer" id="skip-to-footer" ng-click="focusOn('#footer', $event)"> | 25 | <a class="color-theme-common-fg" accesskey="4" href="#footer" id="skip-to-footer" ng-click="focusOn('#footer', $event)"> |
26 | Ir para o rodapé | 26 | Ir para o rodapé |
27 | <span class="color-theme-common-bg">4</span> | 27 | <span class="color-theme-common-bg">4</span> |
28 | </a> | 28 | </a> |
29 | - </li> | 29 | + </li> --> |
30 | </ul> | 30 | </ul> |
31 | </div> | 31 | </div> |
32 | 32 |
src/app/components/a11y-bar/a11y-bar.scss
src/app/components/breadcrumb/breadcrumb.scss
src/app/components/navbar/navbar.html
@@ -20,8 +20,7 @@ | @@ -20,8 +20,7 @@ | ||
20 | <li ui-sref-active="active"><a ui-sref="propostas">Propostas</a></li> | 20 | <li ui-sref-active="active"><a ui-sref="propostas">Propostas</a></li> |
21 | <li ui-sref-active="active"><a ui-sref="ranking">Ranking</a></li> | 21 | <li ui-sref-active="active"><a ui-sref="ranking">Ranking</a></li> |
22 | <li ui-sref-active="active"><a ui-sref="duvidas">Dúvidas</a></li> | 22 | <li ui-sref-active="active"><a ui-sref="duvidas">Dúvidas</a></li> |
23 | - <!-- <li ui-sref-active="active"><a ui-sref="respostas">Respostas</a></li> --> | ||
24 | - <li role="separator" class="divider"><span>|</span></li> | 23 | + <li role="separator" class="divider hidden-xs hidden-sm"><span>|</span></li> |
25 | <li class="dropdown"> | 24 | <li class="dropdown"> |
26 | <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Compartilhar <span class="icon icon-social-share-small"></span></a> | 25 | <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Compartilhar <span class="icon icon-social-share-small"></span></a> |
27 | <ul class="dropdown-menu"> | 26 | <ul class="dropdown-menu"> |
@@ -43,12 +42,6 @@ | @@ -43,12 +42,6 @@ | ||
43 | <span class="sr-only">Compartilhar no Google Plus</span> | 42 | <span class="sr-only">Compartilhar no Google Plus</span> |
44 | </a> | 43 | </a> |
45 | </li> | 44 | </li> |
46 | - <!-- <li> | ||
47 | - <a href="whatsapp://send?text=http%3A%2F%2Fdialoga.gov.br" target="_blank" title="Compartilhar no WhatsApp"> | ||
48 | - <span class="icon-circle icon-small icon-circle-social-whatsapp"><span class="icon icon-social-whatsapp"></span></span> | ||
49 | - <span class="sr-only">Compartilhar no WhatsApp</span> | ||
50 | - </a> | ||
51 | - </li> --> | ||
52 | <li> | 45 | <li> |
53 | <a href="mailto:contato@dialoga.gov.br?subject=Conheça o Dialoga Brasil" title="Enviar por email"> | 46 | <a href="mailto:contato@dialoga.gov.br?subject=Conheça o Dialoga Brasil" title="Enviar por email"> |
54 | <span class="icon-circle icon-small icon-circle-social-whatsapp"><span class="icon icon-social-whatsapp"></span></span> | 47 | <span class="icon-circle icon-small icon-circle-social-whatsapp"><span class="icon icon-social-whatsapp"></span></span> |
src/app/components/navbar/navbar.scss
1 | .app-navbar { | 1 | .app-navbar { |
2 | 2 | ||
3 | border-bottom: 2px solid #f1f1f1; | 3 | border-bottom: 2px solid #f1f1f1; |
4 | - margin-bottom: 20px; | ||
5 | 4 | ||
6 | .navbar { | 5 | .navbar { |
7 | margin-bottom: 0; | 6 | margin-bottom: 0; |
@@ -12,13 +11,26 @@ | @@ -12,13 +11,26 @@ | ||
12 | height: auto; | 11 | height: auto; |
13 | padding-bottom: 0; | 12 | padding-bottom: 0; |
14 | padding-left: 0; | 13 | padding-left: 0; |
14 | + | ||
15 | + @media screen and (max-width: $screen-md) { | ||
16 | + padding: 20px 0; | ||
17 | + margin: 20px 0; | ||
18 | + } | ||
15 | } | 19 | } |
16 | 20 | ||
17 | .navbar-toggle { | 21 | .navbar-toggle { |
22 | + padding: 12px 10px; | ||
18 | margin-top: 20px; | 23 | margin-top: 20px; |
24 | + border-radius: 100%; | ||
25 | + background-color: #5e749d; | ||
19 | 26 | ||
20 | .icon-bar { | 27 | .icon-bar { |
21 | height: 3px; | 28 | height: 3px; |
29 | + background-color: #fff; | ||
30 | + } | ||
31 | + | ||
32 | + @media screen and (max-width: $screen-md) { | ||
33 | + margin-top: 45px; | ||
22 | } | 34 | } |
23 | } | 35 | } |
24 | 36 | ||
@@ -27,7 +39,7 @@ | @@ -27,7 +39,7 @@ | ||
27 | margin: 53px 10px 0 10px; | 39 | margin: 53px 10px 0 10px; |
28 | display: block; | 40 | display: block; |
29 | 41 | ||
30 | - @media screen and (max-width: 768px) { | 42 | + @media screen and (max-width: $screen-md) { |
31 | display: none; | 43 | display: none; |
32 | } | 44 | } |
33 | } | 45 | } |
@@ -49,12 +61,16 @@ | @@ -49,12 +61,16 @@ | ||
49 | .contraste & { | 61 | .contraste & { |
50 | color: #fff; | 62 | color: #fff; |
51 | } | 63 | } |
64 | + | ||
65 | + @media screen and (max-width: $screen-md) { | ||
66 | + margin-top: 5px; | ||
67 | + } | ||
52 | } | 68 | } |
53 | 69 | ||
54 | &.active > a { | 70 | &.active > a { |
55 | border-bottom: 3px solid #77BB34; | 71 | border-bottom: 3px solid #77BB34; |
56 | 72 | ||
57 | - @media screen and (max-width: 768px) { | 73 | + @media screen and (max-width: $screen-md) { |
58 | border: none; | 74 | border: none; |
59 | background-color: #eee; | 75 | background-color: #eee; |
60 | padding: 10px 0 10px 0px; | 76 | padding: 10px 0 10px 0px; |
@@ -63,12 +79,21 @@ | @@ -63,12 +79,21 @@ | ||
63 | 79 | ||
64 | .dropdown-toggle { | 80 | .dropdown-toggle { |
65 | margin-top: 50px; | 81 | margin-top: 50px; |
82 | + | ||
83 | + @media screen and (max-width: $screen-md) { | ||
84 | + margin-top: 0px; | ||
85 | + } | ||
66 | } | 86 | } |
67 | 87 | ||
68 | .dropdown-menu { | 88 | .dropdown-menu { |
69 | min-width: 200px; | 89 | min-width: 200px; |
70 | background-color: #eee; | 90 | background-color: #eee; |
71 | padding: 5px; | 91 | padding: 5px; |
92 | + height: 47px; | ||
93 | + | ||
94 | + &:after { | ||
95 | + clear: both; | ||
96 | + } | ||
72 | 97 | ||
73 | li { | 98 | li { |
74 | float: left; | 99 | float: left; |
@@ -95,10 +120,6 @@ | @@ -95,10 +120,6 @@ | ||
95 | } | 120 | } |
96 | } | 121 | } |
97 | 122 | ||
98 | - .navbar-toggle .icon-bar { | ||
99 | - background-color: #333; | ||
100 | - } | ||
101 | - | ||
102 | .contraste & { | 123 | .contraste & { |
103 | .nav > li > a:hover, | 124 | .nav > li > a:hover, |
104 | .nav > li > a:focus { | 125 | .nav > li > a:focus { |
src/app/components/proposal-carousel/proposal-carousel.html
1 | <div class="proposal-carousel"> | 1 | <div class="proposal-carousel"> |
2 | <div ng-if="vm.proposals"> | 2 | <div ng-if="vm.proposals"> |
3 | - <div class="proposal-carousel-top color-theme-bg"> | 3 | + <div class="proposal-carousel-top color-theme-bg-darker"> |
4 | <div class="proposal-carousel-position" ng-repeat="proposal in vm.proposals"> | 4 | <div class="proposal-carousel-position" ng-repeat="proposal in vm.proposals"> |
5 | <span ng-show="vm.activeIndex === $index">{{::($index+1)}}º</span> | 5 | <span ng-show="vm.activeIndex === $index">{{::($index+1)}}º</span> |
6 | <span ng-show="vm.activeIndex === $index">Lugar</span> | 6 | <span ng-show="vm.activeIndex === $index">Lugar</span> |
src/app/components/proposal-related/proposal-related.html
1 | -<div class="proposal-related"> | ||
2 | - Proposta | 1 | +<div class="proposal-related" ng-class="{'focus':vm.isFocused}"> |
2 | + <div class="proposal-related--top"> | ||
3 | + <div class="proposal-related--theme color-theme-bg-darker">[Nome do Tema]</div> | ||
4 | + <div class="proposal-related--program color-theme-bg">[Nome do Programa]</div> | ||
5 | + </div> | ||
6 | + <div class="proposal-related--middle"> | ||
7 | + <div class="proposal-related--content">[Conteúdo ad proposta enviada]</div> | ||
8 | + <div class="proposal-related--actions"> | ||
9 | + <div class="row"> | ||
10 | + <div class="col-sm-4"> | ||
11 | + <div class="action vote_for" title="Apoiar"> | ||
12 | + <div class="icon-circle"> | ||
13 | + <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> | ||
14 | + </div> | ||
15 | + <div class="sr-only">Apoiar proposta</div> | ||
16 | + </div> | ||
17 | + </div> | ||
18 | + <div class="col-sm-4"> | ||
19 | + <div class="action next" title="Pular proposta"> | ||
20 | + <div class="icon-circle"> | ||
21 | + <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> | ||
22 | + </div> | ||
23 | + <div class="sr-only">Pular proposta</div> | ||
24 | + </div> | ||
25 | + </div> | ||
26 | + <div class="col-sm-4"> | ||
27 | + <div class="action vote_against" title="Não apoiar"> | ||
28 | + <div class="icon-circle"> | ||
29 | + <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> | ||
30 | + </div> | ||
31 | + <div class="sr-only">Não apoiar</div> | ||
32 | + </div> | ||
33 | + </div> | ||
34 | + </div> | ||
35 | + </div> | ||
36 | + </div> | ||
37 | + <div class="proposal-related--bottom"> | ||
38 | + <div class="proposal-related--share">[SHARE]</div> | ||
39 | + <div class="proposal-related--ranking">[RANKING]</div> | ||
40 | + </div> | ||
3 | </div> | 41 | </div> |
src/app/components/proposal-related/proposal-related.scss
@@ -0,0 +1,47 @@ | @@ -0,0 +1,47 @@ | ||
1 | +.proposal-related { | ||
2 | + background-color: #f1f1f1; | ||
3 | + border-radius: 5px; | ||
4 | + overflow: hidden; | ||
5 | + | ||
6 | + &.focus { | ||
7 | + border: 7px solid #000; | ||
8 | + border-radius: 12px; | ||
9 | + border-color: #5E769C; | ||
10 | + } | ||
11 | + | ||
12 | + &--top { | ||
13 | + color: #fff; | ||
14 | + font-weight: bold; | ||
15 | + | ||
16 | + border-top-left-radius: 5px; | ||
17 | + border-top-right-radius: 5px; | ||
18 | + overflow: hidden; | ||
19 | + } | ||
20 | + | ||
21 | + // &--middle {} | ||
22 | + | ||
23 | + &--bottom { | ||
24 | + border-bottom-left-radius: 5px; | ||
25 | + border-bottom-right-radius: 5px; | ||
26 | + overflow: hidden; | ||
27 | + } | ||
28 | + | ||
29 | + &--theme { | ||
30 | + padding: 10px 15px 5px 15px; | ||
31 | + } | ||
32 | + | ||
33 | + &--program { | ||
34 | + padding: 20px 15px; | ||
35 | + } | ||
36 | + | ||
37 | + .glyphicon { | ||
38 | + color: #fff; | ||
39 | + } | ||
40 | + .icon-circle { | ||
41 | + cursor: pointer; | ||
42 | + | ||
43 | + -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3); | ||
44 | + -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3); | ||
45 | + box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.3); | ||
46 | + } | ||
47 | +} | ||
0 | \ No newline at end of file | 48 | \ No newline at end of file |
src/app/index.scss
@@ -178,7 +178,7 @@ body { | @@ -178,7 +178,7 @@ body { | ||
178 | .icon-circle-social-facebook {background-color: #537ab5; } | 178 | .icon-circle-social-facebook {background-color: #537ab5; } |
179 | .icon-circle-social-twitter {background-color: #77cbef; } | 179 | .icon-circle-social-twitter {background-color: #77cbef; } |
180 | .icon-circle-social-googleplus {background-color: #d23b00; } | 180 | .icon-circle-social-googleplus {background-color: #d23b00; } |
181 | -.icon-circle-social-whatsapp {background-color: #77cbef; } | 181 | +.icon-circle-social-whatsapp {background-color: #10ad08; } |
182 | .icon-circle-social-youtube {background-color: #c63635; } | 182 | .icon-circle-social-youtube {background-color: #c63635; } |
183 | .icon-circle-social-flickr {background-color: #eaeaea; } | 183 | .icon-circle-social-flickr {background-color: #eaeaea; } |
184 | .icon-circle-mail {background-color: #ecb24e; } | 184 | .icon-circle-mail {background-color: #ecb24e; } |
src/app/pages/header/header.html
src/app/pages/header/header.scss
1 | -.accessibility-wrapper { | ||
2 | - .icon-user { | ||
3 | - display: inline-block; | ||
4 | - vertical-align: middle; | ||
5 | - width: 26px; | ||
6 | - height: 26px; | ||
7 | - border: 1px solid #ccc; | ||
8 | - border-radius: 100%; | ||
9 | - background-position: 1px 0px; | 1 | +#header { |
10 | 2 | ||
11 | - .contraste & { | ||
12 | - // XXX: chage for dinamic handler | ||
13 | - background-position: -0px -24px; | ||
14 | - } | 3 | + @media (max-width: $screen-md) { |
4 | + | ||
15 | } | 5 | } |
16 | -} | 6 | -} |
7 | +} | ||
17 | \ No newline at end of file | 8 | \ No newline at end of file |
src/app/pages/inicio/inicio.html
@@ -90,8 +90,8 @@ | @@ -90,8 +90,8 @@ | ||
90 | </div> | 90 | </div> |
91 | <div class="row"> | 91 | <div class="row"> |
92 | <div class="col-xs-6 col-sm-7 col-md-9"> | 92 | <div class="col-xs-6 col-sm-7 col-md-9"> |
93 | - <label for="articleQueryFilter" class="control-label sr-only">Filtrar programas:</label> | ||
94 | - <input id="articleQueryFilter" type="search" class="form-control" ng-model="pageInicio.query" placeholder="Filtrar programas" aria-label="Filtrar programas" > | 93 | + <label for="articleQueryFilter" class="control-label sr-only">Buscar programas:</label> |
94 | + <input id="articleQueryFilter" type="search" class="form-control" ng-model="pageInicio.query" placeholder="Buscar programas" aria-label="Buscar programas" > | ||
95 | </div> | 95 | </div> |
96 | </div> | 96 | </div> |
97 | 97 |