Commit 5215e1c410185bc052521af1c2ca6bbb94dea930

Authored by Leonardo Merlin
1 parent b3bcc701

sync

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
1 .a11y-bar { 1 .a11y-bar {
2 font-size: 12px; 2 font-size: 12px;
3 padding: 5px 0; 3 padding: 5px 0;
  4 +
  5 + @media (max-width: $screen-md) {
  6 + font-size: 11px;
  7 + }
  8 +
4 span { 9 span {
5 color: #fff; 10 color: #fff;
6 padding: 0 5px; 11 padding: 0 5px;
src/app/components/breadcrumb/breadcrumb.scss
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 .breadcrumb { 3 .breadcrumb {
4 background: none; 4 background: none;
5 padding: 0; 5 padding: 0;
6 - margin: 0; 6 + margin: 10px 0;
7 } 7 }
8 8
9 .glyphicon { 9 .glyphicon {
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
1 <header id="header" class="container"> 1 <header id="header" class="container">
2 2
3 - <div class="row"> 3 + <div class="row hidden-xs">
4 <div class="col-sm-12"> 4 <div class="col-sm-12">
5 <auth-user></auth-user> 5 <auth-user></auth-user>
6 </div> 6 </div>
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
src/app/pages/inicio/inicio.scss
1 .page--inicio { 1 .page--inicio {
2 - margin-top: 20px; 2 +
  3 + .section-video {
  4 + padding: 20px 0;
  5 + // background-color: #919191;
  6 + }
3 7
4 .section--articles { 8 .section--articles {
5 9