Botones para compartir

This commit is contained in:
f 2020-06-17 16:52:43 -03:00
parent f78ce0f786
commit 08cc1bacbe
8 changed files with 141 additions and 5 deletions

38
_data/en.yml Normal file
View file

@ -0,0 +1,38 @@
---
locale: English
date: '%m/%d/%Y'
layouts:
post: Article
menu:
title: Menu
items:
- title: Home
href: ''
share:
text: Share
icon: share-alt
items:
- title: Fediverse
url: "https://fediverse.sutty.nl/en/?u=%url&t=%title&d=%description"
icon: mastodon-alt
- title: Facebook
url: "https://www.facebook.com/sharer/sharer.php?u=%url&t=%title%0A%0A%description"
icon: facebook-official
- title: Twitter
url: "https://twitter.com/intent/tweet?url=%url&text=%title%0A%0A%description&hashtags=ContamosConVoz"
icon: twitter
- title: Whatsapp
url: "https://api.whatsapp.com/send?text=%title%0A%0A%description%0A%0A%url"
icon: whatsapp
- title: Telegram
url: "https://t.me/share/url?url=%url&text=%title%0A%0A%description"
icon: telegram
- title: Tumblr
url: "https://www.tumblr.com/widgets/share/tool?canonicalUrl=%url&title=%title&caption=%description&tags=ContamosConVoz"
icon: tumblr
- title: Reddit
url: "https://reddit.com/submit?url=%url&title=ConVozContamos%20-%20%title"
icon: reddit
- title: E-mail
url: "mailto:?subject=%title&body=%description%0A%0A%url"
icon: envelope

38
_data/es.yml Normal file
View file

@ -0,0 +1,38 @@
---
locale: Castellano
date: '%d/%m/%Y'
layouts:
post: Artículo
menu:
title: Menú
items:
- title: Inicio
href: ''
share:
text: Compartir
icon: share-alt
items:
- title: Fediverso
url: "https://fediverse.sutty.nl/es/?u=%url&t=%title&d=%description"
icon: mastodon-alt
- title: Facebook
url: "https://www.facebook.com/sharer/sharer.php?u=%url&t=%title%0A%0A%description"
icon: facebook-official
- title: Twitter
url: "https://twitter.com/intent/tweet?url=%url&text=%title%0A%0A%description&hashtags=ContamosConVoz"
icon: twitter
- title: Whatsapp
url: "https://api.whatsapp.com/send?text=%title%0A%0A%description%0A%0A%url"
icon: whatsapp
- title: Telegram
url: "https://t.me/share/url?url=%url&text=%title%0A%0A%description"
icon: telegram
- title: Tumblr
url: "https://www.tumblr.com/widgets/share/tool?canonicalUrl=%url&title=%title&caption=%description&tags=ContamosConVoz"
icon: tumblr
- title: Reddit
url: "https://reddit.com/submit?url=%url&title=ConVozContamos%20-%20%title"
icon: reddit
- title: Correo
url: "mailto:?subject=%title&body=%description%0A%0A%url"
icon: envelope

View file

@ -1,3 +1,4 @@
$bezier: cubic-bezier(0.75, 0, 0.25, 1);
/*
* Crea una propiedad con prefijos de navegador

12
_sass/share.html Normal file
View file

@ -0,0 +1,12 @@
{% assign url = site.url | append: include.url | uri_escape %}
{% assign title = include.title | default: site.title | uri_escape %}
{% assign description = include.description | default: '' | uri_escape %}
<a
target="_blank"
title="{{ include.share.title }}"
class="d-flex flex-column align-items-center p-3"
href="{{ include.share.url | replace: '%url', url | replace: '%title', title | replace: '%description', description }}">
<i class="fa fa-fw fa-2x fa-{{ include.share.icon }}"></i>
<span>{{ include.share.title }}</span>
</a>

16
_sass/share_box.html Normal file
View file

@ -0,0 +1,16 @@
<input type="checkbox" id="share" class="toggler" autocomplete="off" />
<label class="share btn border btn-block" for="share">
{{ site.i18n.share.text }}
<i class="fa fa-{{ site.i18n.share.icon }}"></i>
<div class="share-box toggled d-flex align-items-center justify-content-center">
<div class="box background-white color-redpink row no-gutters align-items-center justify-content-center p-3">
{% for share in site.i18n.share.items %}
<div class="col-4">
{% include_cached share.html share=share url=include.url title=include.title description=include.description %}
</div>
{% endfor %}
</div>
</div>
</label>

26
_sass/share_box.scss Normal file
View file

@ -0,0 +1,26 @@
input[type="checkbox"].toggler {
&:focus + label {
outline: none;
}
}
.share-box {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.5);
@include vendor-prefix(transition, all 0.2s $bezier);
a {
border: $border-width solid transparent;
&:focus,
&:hover {
text-decoration: none;
border: $border-width solid $border-color;
}
}
}

View file

@ -12,15 +12,19 @@ input[type="checkbox"].toggler {
position: absolute;
// Ocultamos el elemento colapsable
& ~ .collapse {
& ~ label {
.toggled {
z-index: 10;
visibility: hidden;
}
}
// Al tildar el input, mostramos el elemento
&:checked ~ .collapse {
&:checked ~ label {
.toggled {
visibility: visible;
}
}
& + label {
border: none;

View file

@ -13,3 +13,4 @@
@import "fork-awesome/scss/fork-awesome";
@import "accessibility";
@import "helpers";
@import "share_box";