Commit 231dd00de6cec09ccd2031061da892ec783b7dda

Authored by Leonardo Merlin
1 parent 460eb69d

Sync

src/app/components/navbar/navbar.html
... ... @@ -23,7 +23,7 @@
23 23 <li role="separator" class="divider hidden-xs hidden-sm"><span>|</span></li>
24 24 <li class="dropdown">
25 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>
26   - <ul class="dropdown-menu">
  26 + <ul class="dropdown-menu dropdown-menu-right dropdown-menu-social">
27 27 <li>
28 28 <a social-facebook custom-url="http://dialoga.gov.br" title="Compartilhar no Facebook">
29 29 <span class="icon-circle icon-small icon-circle-social-facebook"><span class="icon icon-social-facebook"></span></span>
... ...
src/app/components/navbar/navbar.scss
... ... @@ -84,40 +84,6 @@
84 84 margin-top: 0px;
85 85 }
86 86 }
87   -
88   - .dropdown-menu {
89   - min-width: 200px;
90   - background-color: #eee;
91   - padding: 5px;
92   - height: 47px;
93   -
94   - &:after {
95   - clear: both;
96   - }
97   -
98   - li {
99   - float: left;
100   - padding: 0;
101   - margin: 0;
102   - width: 45px;
103   - text-align: center;
104   -
105   - & > a {
106   - padding: 0;
107   - }
108   -
109   - &:first-child {
110   - // margin-left: 5px;
111   - }
112   - }
113   -
114   - .icon {
115   - transform: scale(0.7);
116   - position: relative;
117   - top: -10px;
118   - left: -10px;
119   - }
120   - }
121 87 }
122 88  
123 89 .contraste & {
... ...
src/app/components/proposal-related/proposal-related.html
... ... @@ -7,37 +7,74 @@
7 7 <div class="proposal-related--content">
8 8 <div class="proposal-related--content-inner" ng-bind-html="vm.proposal.abstract"></div>
9 9 </div>
10   - <div class="proposal-related--actions">
  10 + <div class="proposal-related--actions text-center">
11 11 <div class="row">
12   - <div class="col-sm-4">
13   - <div class="action vote_for" title="Apoiar">
  12 + <div class="col-xs-4">
  13 + <div class="action vote_for">
14 14 <div class="icon-circle">
15 15 <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
16 16 </div>
17   - <div class="sr-only">Apoiar proposta</div>
  17 + <div class="action-label">Apoio</div>
18 18 </div>
19 19 </div>
20   - <div class="col-sm-4">
21   - <div class="action next" title="Pular proposta">
  20 + <div class="col-xs-4">
  21 + <div class="action next">
22 22 <div class="icon-circle">
23 23 <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
24 24 </div>
25   - <div class="sr-only">Pular proposta</div>
  25 + <div class="action-label">Pular</div>
26 26 </div>
27 27 </div>
28   - <div class="col-sm-4">
29   - <div class="action vote_against" title="Não apoiar">
  28 + <div class="col-xs-4">
  29 + <div class="action vote_against">
30 30 <div class="icon-circle">
31 31 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
32 32 </div>
33   - <div class="sr-only">Não apoiar</div>
  33 + <div class="action-label">Não Apoio</div>
34 34 </div>
35 35 </div>
36 36 </div>
37 37 </div>
38 38 </div>
39   - <div class="proposal-related--bottom">
40   - <div class="proposal-related--share">[SHARE]</div>
41   - <div class="proposal-related--ranking">[RANKING]</div>
  39 + <div class="proposal-related--bottom text-center">
  40 + <div class="proposal-related--share">
  41 + <span>COMPARTILHE ESSA <b>PROPOSTA</b></span>
  42 + <div class="dropdown">
  43 + <button id="dropdown-share-btn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="icon icon-social-share-small" aria-hidden="true"></span></button>
  44 + <ul class="dropdown-menu dropdown-menu-right dropdown-menu-social" aria-labelledby="dropdown-share-btn">
  45 + <li>
  46 + <a social-facebook="" custom-url="http://dialoga.gov.br" title="Compartilhar no Facebook" class="ng-isolate-scope" rel="nofollow" href="https://facebook.com/sharer.php?u=http%3A%2F%2Fdialoga.gov.br">
  47 + <span class="icon-circle icon-small icon-circle-social-facebook"><span class="icon icon-social-facebook"></span></span>
  48 + <span class="sr-only">Compartilhar no Facebook</span>
  49 + </a>
  50 + </li>
  51 + <li>
  52 + <a social-twitter="" custom-url="http://dialoga.gov.br" status="This status is #" title="Compartilhar no Twitter" class="ng-isolate-scope" rel="nofollow" href="https://twitter.com/intent/tweet?text=This%20status%20is%20%23">
  53 + <span class="icon-circle icon-small icon-circle-social-twitter"><span class="icon icon-social-twitter"></span></span>
  54 + <span class="sr-only">Compartilhar no Twitter</span>
  55 + </a>
  56 + </li>
  57 + <li>
  58 + <a social-gplus="" custom-url="http://dialoga.gov.br" title="Compartilhar no Google Plus" class="ng-isolate-scope" rel="nofollow" href="https://plus.google.com/share?url=http%3A%2F%2Fdialoga.gov.br">
  59 + <span class="icon-circle icon-small icon-circle-social-googleplus"><span class="icon icon-social-googleplus"></span></span>
  60 + <span class="sr-only">Compartilhar no Google Plus</span>
  61 + </a>
  62 + </li>
  63 + <li>
  64 + <a href="mailto:contato@dialoga.gov.br?subject=Conheça o Dialoga Brasil" title="Enviar por email">
  65 + <span class="icon-circle icon-small icon-circle-social-whatsapp"><span class="icon icon-social-whatsapp"></span></span>
  66 + <span class="sr-only">Enviar por email</span>
  67 + </a>
  68 + </li>
  69 + </ul>
  70 + </div>
  71 + </div>
  72 + <div class="proposal-related--ranking">
  73 + <div class="proposal-related--ranking-inner">
  74 + <span class="icon icon-small icon-ranking" aria-hidden="true"></span>
  75 + <span>Colocação nos resultados:</span>
  76 + <span>{{::vm.proposal.ranking_position}}º</span>
  77 + </div>
  78 + </div>
42 79 </div>
43 80 </div>
... ...
src/app/components/proposal-related/proposal-related.scss
1 1 .proposal-related {
2 2 background-color: #f1f1f1;
3 3 border-radius: 5px;
4   - overflow: hidden;
  4 + // overflow: hidden;
5 5  
6 6 &.focus {
7 7 border: 7px solid #000;
... ... @@ -25,7 +25,8 @@
25 25 &--bottom {
26 26 border-bottom-left-radius: 5px;
27 27 border-bottom-right-radius: 5px;
28   - overflow: hidden;
  28 + // overflow: hidden;
  29 + border-bottom: 5px solid #dadada;
29 30 }
30 31  
31 32 &--theme {
... ... @@ -40,6 +41,25 @@
40 41 padding-bottom: 20px;
41 42 }
42 43  
  44 + &--share {
  45 + padding: 15px 0;
  46 + background-color: #e8e8e8;
  47 + }
  48 +
  49 + &--ranking {
  50 + font-weight: bold;
  51 + padding: 10px 0;
  52 + background-color: #dadada;
  53 + }
  54 +
  55 + .action-label {
  56 + margin-top: 10px;
  57 + }
  58 +
  59 + .dropdown {
  60 + display: inline-block;
  61 + }
  62 +
43 63 .glyphicon {
44 64 color: #fff;
45 65 }
... ...
src/app/index.scss
... ... @@ -132,9 +132,44 @@ body {
132 132 }
133 133 }
134 134  
  135 +
  136 +.dropdown-menu.dropdown-menu-social {
  137 + min-width: 200px;
  138 + background-color: #eee;
  139 + padding: 5px;
  140 + height: 47px;
  141 +
  142 + &:after {
  143 + clear: both;
  144 + }
  145 +
  146 + li {
  147 + float: left;
  148 + padding: 0;
  149 + margin: 0;
  150 + width: 45px;
  151 + text-align: center;
  152 +
  153 + & > a {
  154 + padding: 0;
  155 + }
  156 +
  157 + &:first-child {
  158 + // margin-left: 5px;
  159 + }
  160 + }
  161 +
  162 + .icon {
  163 + transform: scale(0.7);
  164 + position: relative;
  165 + top: -10px;
  166 + left: -10px;
  167 + }
  168 +}
  169 +
135 170 .icon {
136 171 display: inline-block;
137   - vertical-align: middle;
  172 + vertical-align: middle;
138 173 }
139 174  
140 175 .icon-wrapper-rounded {
... ... @@ -152,7 +187,7 @@ body {
152 187 // border: 1px solid #eee;
153 188 border-radius: 100%;
154 189 overflow: hidden;
155   -
  190 +
156 191 &.icon-small {
157 192 width: 35px;
158 193 height: 35px;
... ...
src/assets/images/icons/ranking.png

298 Bytes | W: | H:

399 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/assets/images/icons/sprite.png

107 KB | W: | H:

107 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin