Added share buttons

This commit is contained in:
Marcus Noble 2017-10-15 17:31:16 +01:00
parent 296d24a8a2
commit bd38076041
3 changed files with 46 additions and 1 deletions

View File

@ -159,3 +159,25 @@ footer {
height: 40px; height: 40px;
} }
} }
.share {
background: transparent;
border: none;
display: none;
cursor: pointer;
&.show {
display: initial;
}
&:hover, &:active {
fill: $link-color;
color: $link-color;
}
svg {
height: 20px;
vertical-align: bottom;
}
}

View File

@ -0,0 +1,6 @@
<button class="share" title="Share this post">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59 59">
<path d="M47 39c-2.67 0-5.182 1.04-7.07 2.93-.525.523-.976 1.1-1.366 1.708l-17.28-10.49c.457-1.143.716-2.387.716-3.692 0-1.305-.26-2.55-.715-3.693l17.284-10.41C40.343 18.143 43.454 20 47 20c5.514 0 10-4.486 10-10S52.514 0 47 0 37 4.486 37 10c0 1.256.243 2.454.667 3.562L20.36 23.985c-1.787-2.724-4.865-4.53-8.36-4.53-5.514 0-10 4.487-10 10s4.486 10 10 10c3.495 0 6.572-1.804 8.36-4.528L37.664 45.43C37.234 46.556 37 47.76 37 49c0 2.67 1.04 5.183 2.93 7.07C41.817 57.96 44.33 59 47 59s5.182-1.04 7.07-2.93C55.96 54.184 57 51.67 57 49s-1.04-5.183-2.93-7.07C52.183 40.04 49.67 39 47 39z"/>
</svg>
{{ shareText }}
</button>

View File

@ -9,7 +9,7 @@
<a href="/" class="back-to-blog" title="Return to all posts"></a> <a href="/" class="back-to-blog" title="Return to all posts"></a>
<h2 class="post-title" itemprop="name headline"> <h2 class="post-title" itemprop="name headline">
<a class="post-link" href="{{ path }}">{{ title }}</a> <a class="post-link" href="{{ path }}">{{ title }}</a> {{> share }}
</h2> </h2>
<div class="post-meta feather_type"> <div class="post-meta feather_type">
@ -25,6 +25,9 @@
</div> </div>
</article> </article>
<div class="center">
{{> share shareText='Share this post'}}
</div>
</section> </section>
{{> footer }} {{> footer }}
@ -52,5 +55,19 @@
} }
</script> </script>
<script>
if (navigator.share) {
[...document.querySelectorAll('.share')].forEach(function(shareButton) {
shareButton.classList.add('show');
shareButton.addEventListener('click', function(event) {
event.preventDefault();
navigator.share({
title: document.title,
url: window.location.url
});
});
});
}
</script>
</body> </body>
</html> </html>