asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Optimize the tooltip position of sharing icons.

Browse source
This commit is contained in:
Cotes Chung 2020-02-29 21:51:18 +08:00
parent 0425b1058f
commit 01fe877ebb
2 changed files with 19 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
_includes/post-sharing.html
View file

@ -9,7 +9,7 @@
<div class="share-wrapper"> <div class="share-wrapper">
<span class="share-label ml-1 mr-1">{{ site.data.share.label }}</span> <span class="share-label ml-1 mr-1">{{ site.data.share.label }}</span>
<span class="share-icon"> <span class="share-icons">
{% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %} {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
{% assign url = page.url | relative_url | prepend: site.url %} {% assign url = page.url | relative_url | prepend: site.url %}
@ -17,11 +17,11 @@
{% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %} {% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
<a href="{{ link }}" data-toggle="tooltip" data-placement="top" <a href="{{ link }}" data-toggle="tooltip" data-placement="top"
title="{{ share.type }}" target="_blank"> title="{{ share.type }}" target="_blank">
<i class="fa-fw {{ share.icon }} mr-1"></i> <i class="fa-fw {{ share.icon }}"></i>
</a> </a>
{% endfor %} {% endfor %}
<i class="fa-fw fas fa-link mr-1 small" onclick="copyLink()" <i class="fa-fw fas fa-link small" onclick="copyLink()"
data-toggle="tooltip" data-placement="top" title="Copy link"></i> data-toggle="tooltip" data-placement="top" title="Copy link"></i>
</span> </span>

16
assets/css/post.scss
View file

@ -216,17 +216,25 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
.share-wrapper { .share-wrapper {
vertical-align: middle; vertical-align: middle;
user-select: none; user-select: none;
.share-icon { .share-icons {
font-size: 1.2rem; font-size: 1.2rem;
a:hover { a {
&:not(:last-child) {
margin-right: .25rem;
}
&:hover {
text-decoration: none; text-decoration: none;
>i { >i {
@extend %btn-share-hovor; @extend %btn-share-hovor;
} }
} }
i:hover { }
>i {
padding-top: .35rem;
&:hover {
@extend %btn-share-hovor; @extend %btn-share-hovor;
} }
}
.fab { .fab {
&.fa-twitter { &.fa-twitter {
@include btn-sharing-color(rgba(29, 161, 242, 1.00)); @include btn-sharing-color(rgba(29, 161, 242, 1.00));
@ -242,7 +250,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
} }
} }
} // .share-icon } // .share-icons
.fas.fa-link { .fas.fa-link {
@include btn-sharing-color(rgb(171, 171, 171)); @include btn-sharing-color(rgb(171, 171, 171));