Commit 231dd00de6cec09ccd2031061da892ec783b7dda
1 parent
460eb69d
Exists in
master
and in
8 other branches
Sync
Showing
7 changed files
with
110 additions
and
52 deletions
Show diff stats
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
src/assets/images/icons/sprite.png