1
Download as
Browse Code »

Commit 4f8866b836c428744f592f637ea79aeb4aee17fe

Authored by Leonardo Merlin
1 parent 95699bc6
Exists in master and in 4 other branches feature-captcha, production, staging, the_glorious_return_of_piwik

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
  Diff comments   View file @4f8866b
... ... @@ -2,7 +2,7 @@
2 2 <div ng-class="vm.arrowClass"></div>
3 3 </div>
4 4 <ul class="social-share list-inline">
5   - <li>
  5 + <li class="social-share--item-facebook">
6 6 <a href="#" role="button"
7 7 socialshare
8 8 socialshare-provider="facebook"
... ... @@ -17,7 +17,7 @@
17 17 <span class="sr-only">Compartilhar no Facebook</span>
18 18 </a>
19 19 </li>
20   - <li>
  20 + <li class="social-share--item-twitter">
21 21 <a href="#" role="button"
22 22 socialshare
23 23 socialshare-provider="twitter"
... ... @@ -29,7 +29,7 @@
29 29 <span class="sr-only">Compartilhar no Twitter</span>
30 30 </a>
31 31 </li>
32   - <li>
  32 + <li class="social-share--item-google">
33 33 <a href="#" role="button"
34 34 socialshare
35 35 socialshare-provider="google+"
... ... @@ -40,7 +40,7 @@
40 40 <span class="sr-only">Compartilhar no Google Plus</span>
41 41 </a>
42 42 </li>
43   - <li>
  43 + <li class="social-share--item-whatsapp">
44 44 <a href="whatsapp://send?text=Dialoga Brasil - {{vm.socialUrl}}" title="Compartilhar no WhatsApp">
45 45 <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-whatsapp"><span class="icon icon-social-whatsapp"></span></span>
46 46 <span class="sr-only">Compartilhar no WhatsApp</span>
... ...
src/app/components/social-share/social-share.scss
  Diff comments   View file @4f8866b
... ... @@ -45,8 +45,21 @@
45 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 63 .social-share--arrow {
51 64 position: absolute;
52 65 width: 0;
... ...