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 | 2 | <div class="container"> |
| 3 | 3 | <div class="row"> |
| 4 | 4 | <div class="col-sm-6"> |
| ... | ... | @@ -21,12 +21,12 @@ |
| 21 | 21 | <span class="color-theme-common-bg">3</span> |
| 22 | 22 | </a> |
| 23 | 23 | </li> |
| 24 | - <li> | |
| 24 | + <!-- <li> | |
| 25 | 25 | <a class="color-theme-common-fg" accesskey="4" href="#footer" id="skip-to-footer" ng-click="focusOn('#footer', $event)"> |
| 26 | 26 | Ir para o rodapé |
| 27 | 27 | <span class="color-theme-common-bg">4</span> |
| 28 | 28 | </a> |
| 29 | - </li> | |
| 29 | + </li> --> | |
| 30 | 30 | </ul> |
| 31 | 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 | 20 | <li ui-sref-active="active"><a ui-sref="propostas">Propostas</a></li> |
| 21 | 21 | <li ui-sref-active="active"><a ui-sref="ranking">Ranking</a></li> |
| 22 | 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 | 24 | <li class="dropdown"> |
| 26 | 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 | 26 | <ul class="dropdown-menu"> |
| ... | ... | @@ -43,12 +42,6 @@ |
| 43 | 42 | <span class="sr-only">Compartilhar no Google Plus</span> |
| 44 | 43 | </a> |
| 45 | 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 | 45 | <li> |
| 53 | 46 | <a href="mailto:contato@dialoga.gov.br?subject=Conheça o Dialoga Brasil" title="Enviar por email"> |
| 54 | 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 | 1 | .app-navbar { |
| 2 | 2 | |
| 3 | 3 | border-bottom: 2px solid #f1f1f1; |
| 4 | - margin-bottom: 20px; | |
| 5 | 4 | |
| 6 | 5 | .navbar { |
| 7 | 6 | margin-bottom: 0; |
| ... | ... | @@ -12,13 +11,26 @@ |
| 12 | 11 | height: auto; |
| 13 | 12 | padding-bottom: 0; |
| 14 | 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 | 21 | .navbar-toggle { |
| 22 | + padding: 12px 10px; | |
| 18 | 23 | margin-top: 20px; |
| 24 | + border-radius: 100%; | |
| 25 | + background-color: #5e749d; | |
| 19 | 26 | |
| 20 | 27 | .icon-bar { |
| 21 | 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 | 39 | margin: 53px 10px 0 10px; |
| 28 | 40 | display: block; |
| 29 | 41 | |
| 30 | - @media screen and (max-width: 768px) { | |
| 42 | + @media screen and (max-width: $screen-md) { | |
| 31 | 43 | display: none; |
| 32 | 44 | } |
| 33 | 45 | } |
| ... | ... | @@ -49,12 +61,16 @@ |
| 49 | 61 | .contraste & { |
| 50 | 62 | color: #fff; |
| 51 | 63 | } |
| 64 | + | |
| 65 | + @media screen and (max-width: $screen-md) { | |
| 66 | + margin-top: 5px; | |
| 67 | + } | |
| 52 | 68 | } |
| 53 | 69 | |
| 54 | 70 | &.active > a { |
| 55 | 71 | border-bottom: 3px solid #77BB34; |
| 56 | 72 | |
| 57 | - @media screen and (max-width: 768px) { | |
| 73 | + @media screen and (max-width: $screen-md) { | |
| 58 | 74 | border: none; |
| 59 | 75 | background-color: #eee; |
| 60 | 76 | padding: 10px 0 10px 0px; |
| ... | ... | @@ -63,12 +79,21 @@ |
| 63 | 79 | |
| 64 | 80 | .dropdown-toggle { |
| 65 | 81 | margin-top: 50px; |
| 82 | + | |
| 83 | + @media screen and (max-width: $screen-md) { | |
| 84 | + margin-top: 0px; | |
| 85 | + } | |
| 66 | 86 | } |
| 67 | 87 | |
| 68 | 88 | .dropdown-menu { |
| 69 | 89 | min-width: 200px; |
| 70 | 90 | background-color: #eee; |
| 71 | 91 | padding: 5px; |
| 92 | + height: 47px; | |
| 93 | + | |
| 94 | + &:after { | |
| 95 | + clear: both; | |
| 96 | + } | |
| 72 | 97 | |
| 73 | 98 | li { |
| 74 | 99 | float: left; |
| ... | ... | @@ -95,10 +120,6 @@ |
| 95 | 120 | } |
| 96 | 121 | } |
| 97 | 122 | |
| 98 | - .navbar-toggle .icon-bar { | |
| 99 | - background-color: #333; | |
| 100 | - } | |
| 101 | - | |
| 102 | 123 | .contraste & { |
| 103 | 124 | .nav > li > a:hover, |
| 104 | 125 | .nav > li > a:focus { | ... | ... |
src/app/components/proposal-carousel/proposal-carousel.html
| 1 | 1 | <div class="proposal-carousel"> |
| 2 | 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 | 4 | <div class="proposal-carousel-position" ng-repeat="proposal in vm.proposals"> |
| 5 | 5 | <span ng-show="vm.activeIndex === $index">{{::($index+1)}}º</span> |
| 6 | 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 | 41 | </div> | ... | ... |
src/app/components/proposal-related/proposal-related.scss
| ... | ... | @@ -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 | 48 | \ No newline at end of file | ... | ... |
src/app/index.scss
| ... | ... | @@ -178,7 +178,7 @@ body { |
| 178 | 178 | .icon-circle-social-facebook {background-color: #537ab5; } |
| 179 | 179 | .icon-circle-social-twitter {background-color: #77cbef; } |
| 180 | 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 | 182 | .icon-circle-social-youtube {background-color: #c63635; } |
| 183 | 183 | .icon-circle-social-flickr {background-color: #eaeaea; } |
| 184 | 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 | 8 | \ No newline at end of file | ... | ... |
src/app/pages/inicio/inicio.html
| ... | ... | @@ -90,8 +90,8 @@ |
| 90 | 90 | </div> |
| 91 | 91 | <div class="row"> |
| 92 | 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 | 95 | </div> |
| 96 | 96 | </div> |
| 97 | 97 | ... | ... |