mirror of
https://github.com/openvk/openvk
synced 2024-11-11 01:19:53 +03:00
Make likes more VK-styled
Co-authored-by: Kos Furler <35310076+kosfurler@users.noreply.github.com>
This commit is contained in:
parent
a032ba09d2
commit
62f9467179
3 changed files with 37 additions and 15 deletions
|
@ -85,21 +85,22 @@
|
||||||
{/if}
|
{/if}
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<div style="float: right; font-size: .7rem;">
|
|
||||||
{var liked = $post->hasLikeFrom($thisUser)}
|
|
||||||
|
|
||||||
<a
|
<div class="like_wrap">
|
||||||
href="/wall{$post->getPrettyId()}/like?hash={rawurlencode($csrfToken)}"
|
{var liked = $post->hasLikeFrom($thisUser)}
|
||||||
class="post-like-button"
|
<a href="/wall{$post->getPrettyId()}/like?hash={rawurlencode($csrfToken)}"
|
||||||
|
class="post-like-button"
|
||||||
data-liked="{(int) $liked}"
|
data-liked="{(int) $liked}"
|
||||||
data-likes="{$post->getLikesCount()}">
|
data-likes="{$post->getLikesCount()}">
|
||||||
<text class="heart" style="{if $liked}color: red;{else}filter: sepia(1){/if}">
|
|
||||||
❤
|
|
||||||
</text>
|
<div class="heart" style="{if $liked}opacity: 1;{else}opacity: 0.4;{/if}"></div>
|
||||||
|
<span class="likeCnt">{$post->getLikesCount()}</span>
|
||||||
<text class="likeCnt">{$post->getLikesCount()}</text>
|
</a></div>
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
|
@ -1160,3 +1160,24 @@ body.scrolled .toTop:hover {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.like_wrap {
|
||||||
|
color: #2F5879;
|
||||||
|
font-size: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.heart {
|
||||||
|
background: url(/assets/packages/static/openvk/img/like.gif) no-repeat 1px 0px;
|
||||||
|
height: 10px;
|
||||||
|
margin: 2px 3px 0px;
|
||||||
|
width: 11px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.likeCnt {
|
||||||
|
font-size: 10px;
|
||||||
|
margin-right: 3px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.heart:hover {
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
|
|
@ -51,10 +51,10 @@ u(".post-like-button").on("click", function(e) {
|
||||||
var heart = u(".heart", thisBtn);
|
var heart = u(".heart", thisBtn);
|
||||||
var counter = u(".likeCnt", thisBtn);
|
var counter = u(".likeCnt", thisBtn);
|
||||||
var likes = counter.text();
|
var likes = counter.text();
|
||||||
var isLiked = heart.attr("style") === 'color: red;';
|
var isLiked = heart.attr("style") === 'opacity: 1;';
|
||||||
|
|
||||||
ky(link);
|
ky(link);
|
||||||
heart.attr("style", isLiked ? 'filter: sepia(1);' : 'color: red;');
|
heart.attr("style", isLiked ? 'opacity: 0.4;' : 'opacity: 1;');
|
||||||
counter.text(parseInt(likes) + (isLiked ? -1 : 1));
|
counter.text(parseInt(likes) + (isLiked ? -1 : 1));
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
|
|
Loading…
Reference in a new issue