Commit 4f8866b836c428744f592f637ea79aeb4aee17fe
1 parent
95699bc6
Exists in
master
and in
4 other branches
Hide whatsapp icon when device has 'no-touch' html class
Showing
2 changed files
with
17 additions
and
4 deletions
Show diff stats
src/app/components/social-share/social-share.html
@@ -2,7 +2,7 @@ | @@ -2,7 +2,7 @@ | ||
2 | <div ng-class="vm.arrowClass"></div> | 2 | <div ng-class="vm.arrowClass"></div> |
3 | </div> | 3 | </div> |
4 | <ul class="social-share list-inline"> | 4 | <ul class="social-share list-inline"> |
5 | - <li> | 5 | + <li class="social-share--item-facebook"> |
6 | <a href="#" role="button" | 6 | <a href="#" role="button" |
7 | socialshare | 7 | socialshare |
8 | socialshare-provider="facebook" | 8 | socialshare-provider="facebook" |
@@ -17,7 +17,7 @@ | @@ -17,7 +17,7 @@ | ||
17 | <span class="sr-only">Compartilhar no Facebook</span> | 17 | <span class="sr-only">Compartilhar no Facebook</span> |
18 | </a> | 18 | </a> |
19 | </li> | 19 | </li> |
20 | - <li> | 20 | + <li class="social-share--item-twitter"> |
21 | <a href="#" role="button" | 21 | <a href="#" role="button" |
22 | socialshare | 22 | socialshare |
23 | socialshare-provider="twitter" | 23 | socialshare-provider="twitter" |
@@ -29,7 +29,7 @@ | @@ -29,7 +29,7 @@ | ||
29 | <span class="sr-only">Compartilhar no Twitter</span> | 29 | <span class="sr-only">Compartilhar no Twitter</span> |
30 | </a> | 30 | </a> |
31 | </li> | 31 | </li> |
32 | - <li> | 32 | + <li class="social-share--item-google"> |
33 | <a href="#" role="button" | 33 | <a href="#" role="button" |
34 | socialshare | 34 | socialshare |
35 | socialshare-provider="google+" | 35 | socialshare-provider="google+" |
@@ -40,7 +40,7 @@ | @@ -40,7 +40,7 @@ | ||
40 | <span class="sr-only">Compartilhar no Google Plus</span> | 40 | <span class="sr-only">Compartilhar no Google Plus</span> |
41 | </a> | 41 | </a> |
42 | </li> | 42 | </li> |
43 | - <li> | 43 | + <li class="social-share--item-whatsapp"> |
44 | <a href="whatsapp://send?text=Dialoga Brasil - {{vm.socialUrl}}" title="Compartilhar no WhatsApp"> | 44 | <a href="whatsapp://send?text=Dialoga Brasil - {{vm.socialUrl}}" title="Compartilhar no WhatsApp"> |
45 | <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-whatsapp"><span class="icon icon-social-whatsapp"></span></span> | 45 | <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-whatsapp"><span class="icon icon-social-whatsapp"></span></span> |
46 | <span class="sr-only">Compartilhar no WhatsApp</span> | 46 | <span class="sr-only">Compartilhar no WhatsApp</span> |
src/app/components/social-share/social-share.scss
@@ -45,8 +45,21 @@ | @@ -45,8 +45,21 @@ | ||
45 | &:last-child { margin-right: 0;} | 45 | &:last-child { margin-right: 0;} |
46 | } | 46 | } |
47 | } | 47 | } |
48 | + | ||
49 | + // Hide whatsapp when is not a mobile device | ||
50 | + // > For this, we can test if 'no-touch' class is present at root html tag. | ||
51 | + .no-touch & { // ->> .no-touch .social-share | ||
52 | + min-width: 160px; | ||
53 | + | ||
54 | + .social-share--item-whatsapp { | ||
55 | + display: none; | ||
56 | + } | ||
57 | + } | ||
48 | } | 58 | } |
49 | 59 | ||
60 | + | ||
61 | + | ||
62 | + | ||
50 | .social-share--arrow { | 63 | .social-share--arrow { |
51 | position: absolute; | 64 | position: absolute; |
52 | width: 0; | 65 | width: 0; |