Commit 4f8866b836c428744f592f637ea79aeb4aee17fe

Authored by Leonardo Merlin
1 parent 95699bc6

Hide whatsapp icon when device has 'no-touch' html class

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;