Botones para compartir
This commit is contained in:
parent
f78ce0f786
commit
08cc1bacbe
8 changed files with 141 additions and 5 deletions
38
_data/en.yml
Normal file
38
_data/en.yml
Normal 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
38
_data/es.yml
Normal 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
|
|
@ -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
12
_sass/share.html
Normal 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
16
_sass/share_box.html
Normal 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
26
_sass/share_box.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
|
|
|
@ -13,3 +13,4 @@
|
|||
@import "fork-awesome/scss/fork-awesome";
|
||||
@import "accessibility";
|
||||
@import "helpers";
|
||||
@import "share_box";
|
||||
|
|
Loading…
Reference in a new issue