mirror of
https://github.com/openvk/openvk
synced 2024-12-23 00:51:03 +03:00
Wall: Redesign like and repost buttons
This commit is contained in:
parent
7d94282ad4
commit
f3791f6478
5 changed files with 46 additions and 12 deletions
|
@ -87,10 +87,9 @@
|
|||
|
||||
|
||||
<div class="like_wrap">
|
||||
<a class="post-share-button" href="javascript:repostPost('{$post->getPrettyId()}', '{rawurlencode($csrfToken)}')"
|
||||
class="post-like-button">
|
||||
<a class="post-share-button" href="javascript:repostPost('{$post->getPrettyId()}', '{rawurlencode($csrfToken)}')">
|
||||
<div class="repost-icon" style="opacity: 0.4;"></div>
|
||||
<span class="likeCnt">{$post->getRepostCount()}</span>
|
||||
<span class="likeCnt">{if $post->getRepostCount() > 0}{$post->getRepostCount()}{/if}</span>
|
||||
</a>
|
||||
|
||||
{var liked = $post->hasLikeFrom($thisUser)}
|
||||
|
@ -98,8 +97,8 @@
|
|||
class="post-like-button"
|
||||
data-liked="{(int) $liked}"
|
||||
data-likes="{$post->getLikesCount()}">
|
||||
<div class="heart" style="{if $liked}opacity: 1;{else}opacity: 0.4;{/if}"></div>
|
||||
<span class="likeCnt">{$post->getLikesCount()}</span>
|
||||
<div class="heart" id="{if $liked}liked{/if}"></div>
|
||||
<span class="likeCnt">{if $post->getLikesCount() > 0}{$post->getLikesCount()}{/if}</span>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
@ -112,8 +112,8 @@
|
|||
class="post-like-button"
|
||||
data-liked="{(int) $liked}"
|
||||
data-likes="{$post->getLikesCount()}">
|
||||
<div class="heart" style="{if $liked}opacity: 1;{else}opacity: 0.4;{/if}"></div>
|
||||
<span class="likeCnt">{$post->getLikesCount()}</span>
|
||||
<div class="heart" id="{if $liked}liked{/if}"></div>
|
||||
<span class="likeCnt">{if $post->getLikesCount() > 0}{$post->getLikesCount()}{/if}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -36,18 +36,45 @@
|
|||
color: grey;
|
||||
}
|
||||
|
||||
.like_wrap {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.repost-icon {
|
||||
background: url('/assets/packages/static/openvk/img/published.gif') no-repeat 0px 0px;
|
||||
height: 12px;
|
||||
margin: 2px 3px 0px;
|
||||
width: 11px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.repost-icon:hover {
|
||||
.heart {
|
||||
background: url('/assets/packages/static/openvk/img/like.gif') no-repeat 1px 0px;
|
||||
height: 10px;
|
||||
margin: 2px 3px 0px;
|
||||
width: 11px;
|
||||
float: none;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
#liked {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.heart:hover {
|
||||
opacity: 0.4 !important;
|
||||
}
|
||||
|
||||
.post-share-button, .post-like-button {
|
||||
display: flex;
|
||||
padding: 2px;
|
||||
border-radius: 2px;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.post-share-button:hover, .post-like-button:hover {
|
||||
background-color: rgb(240, 240, 240);
|
||||
}
|
||||
|
||||
.post-author .delete {
|
||||
float: right;
|
||||
display: inline-block;
|
||||
|
|
|
@ -1230,6 +1230,7 @@ body.scrolled .toTop:hover {
|
|||
margin: 2px 3px 0px;
|
||||
width: 11px;
|
||||
float: left;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.likeCnt {
|
||||
|
@ -1242,6 +1243,10 @@ body.scrolled .toTop:hover {
|
|||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
#liked {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.content_title_expanded {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
|
|
@ -89,12 +89,15 @@ u(".post-like-button").on("click", function(e) {
|
|||
var link = u(this).attr("href");
|
||||
var heart = u(".heart", thisBtn);
|
||||
var counter = u(".likeCnt", thisBtn);
|
||||
var likes = counter.text();
|
||||
var isLiked = heart.attr("style") === 'opacity: 1;';
|
||||
var likes = counter.text() === "" ? 0 : counter.text();
|
||||
var isLiked = heart.attr("id") === 'liked';
|
||||
|
||||
ky(link);
|
||||
heart.attr("style", isLiked ? 'opacity: 0.4;' : 'opacity: 1;');
|
||||
heart.attr("id", isLiked ? '' : 'liked');
|
||||
counter.text(parseInt(likes) + (isLiked ? -1 : 1));
|
||||
if (counter.text() === "0") {
|
||||
counter.text("");
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue