Download as
Browse Code »

Commit 231dd00de6cec09ccd2031061da892ec783b7dda

Authored by Leonardo Merlin
1 parent 460eb69d
Exists in master and in 8 other branches css-list, feature-captcha, feature-proposal-vote, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

Sync

Showing 7 changed files with 110 additions and 52 deletions   Show diff stats
src/app/components/navbar/navbar.html
  Diff comments   View file @231dd00
@@ -23,7 +23,7 @@ @@ -23,7 +23,7 @@
23 <li role="separator" class="divider hidden-xs hidden-sm"><span>|</span></li> 23 <li role="separator" class="divider hidden-xs hidden-sm"><span>|</span></li>
24 <li class="dropdown"> 24 <li class="dropdown">
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> 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 <li> 27 <li>
28 <a social-facebook custom-url="http://dialoga.gov.br" title="Compartilhar no Facebook"> 28 <a social-facebook custom-url="http://dialoga.gov.br" title="Compartilhar no Facebook">
29 <span class="icon-circle icon-small icon-circle-social-facebook"><span class="icon icon-social-facebook"></span></span> 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
  Diff comments   View file @231dd00
@@ -84,40 +84,6 @@ @@ -84,40 +84,6 @@
84 margin-top: 0px; 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 .contraste & { 89 .contraste & {
src/app/components/proposal-related/proposal-related.html
  Diff comments   View file @231dd00
@@ -7,37 +7,74 @@ @@ -7,37 +7,74 @@
7 <div class="proposal-related--content"> 7 <div class="proposal-related--content">
8 <div class="proposal-related--content-inner" ng-bind-html="vm.proposal.abstract"></div> 8 <div class="proposal-related--content-inner" ng-bind-html="vm.proposal.abstract"></div>
9 </div> 9 </div>
10 - <div class="proposal-related--actions"> 10 + <div class="proposal-related--actions text-center">
11 <div class="row"> 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 <div class="icon-circle"> 14 <div class="icon-circle">
15 <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 15 <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
16 </div> 16 </div>
17 - <div class="sr-only">Apoiar proposta</div> 17 + <div class="action-label">Apoio</div>
18 </div> 18 </div>
19 </div> 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 <div class="icon-circle"> 22 <div class="icon-circle">
23 <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> 23 <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
24 </div> 24 </div>
25 - <div class="sr-only">Pular proposta</div> 25 + <div class="action-label">Pular</div>
26 </div> 26 </div>
27 </div> 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 <div class="icon-circle"> 30 <div class="icon-circle">
31 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 31 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
32 </div> 32 </div>
33 - <div class="sr-only">Não apoiar</div> 33 + <div class="action-label">Não Apoio</div>
34 </div> 34 </div>
35 </div> 35 </div>
36 </div> 36 </div>
37 </div> 37 </div>
38 </div> 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 </div> 79 </div>
43 </div> 80 </div>
src/app/components/proposal-related/proposal-related.scss
  Diff comments   View file @231dd00
1 .proposal-related { 1 .proposal-related {
2 background-color: #f1f1f1; 2 background-color: #f1f1f1;
3 border-radius: 5px; 3 border-radius: 5px;
4 - overflow: hidden; 4 + // overflow: hidden;
5 5
6 &.focus { 6 &.focus {
7 border: 7px solid #000; 7 border: 7px solid #000;
@@ -25,7 +25,8 @@ @@ -25,7 +25,8 @@
25 &--bottom { 25 &--bottom {
26 border-bottom-left-radius: 5px; 26 border-bottom-left-radius: 5px;
27 border-bottom-right-radius: 5px; 27 border-bottom-right-radius: 5px;
28 - overflow: hidden; 28 + // overflow: hidden;
  29 + border-bottom: 5px solid #dadada;
29 } 30 }
30 31
31 &--theme { 32 &--theme {
@@ -40,6 +41,25 @@ @@ -40,6 +41,25 @@
40 padding-bottom: 20px; 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 .glyphicon { 63 .glyphicon {
44 color: #fff; 64 color: #fff;
45 } 65 }
src/app/index.scss
  Diff comments   View file @231dd00
@@ -132,9 +132,44 @@ body { @@ -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 .icon { 170 .icon {
136 display: inline-block; 171 display: inline-block;
137 - vertical-align: middle; 172 + vertical-align: middle;
138 } 173 }
139 174
140 .icon-wrapper-rounded { 175 .icon-wrapper-rounded {
@@ -152,7 +187,7 @@ body { @@ -152,7 +187,7 @@ body {
152 // border: 1px solid #eee; 187 // border: 1px solid #eee;
153 border-radius: 100%; 188 border-radius: 100%;
154 overflow: hidden; 189 overflow: hidden;
155 - 190 +
156 &.icon-small { 191 &.icon-small {
157 width: 35px; 192 width: 35px;
158 height: 35px; 193 height: 35px;
src/assets/images/icons/ranking.png
View file @231dd00

298 Bytes | W: | H:

399 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/assets/images/icons/sprite.png
View file @231dd00

107 KB | W: | H:

107 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin