Make likes more VK-styled

Co-authored-by: Kos Furler <35310076+kosfurler@users.noreply.github.com>

Web/Presenters/templates/components/post.xml

@@ -85,21 +85,22 @@
                         {/if}
                     </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-likes="{$post->getLikesCount()}">
-                            <text class="heart" style="{if $liked}color: red;{else}filter: sepia(1){/if}">
+						  
-                                &#10084;
+  
-                            </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>
             </td>
         </tr>

Web/static/css/style.css

@@ -1160,3 +1160,24 @@ body.scrolled .toTop:hover {
     width: 100%;
     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;
+}

Web/static/js/al_wall.js

@@ -51,10 +51,10 @@ u(".post-like-button").on("click", function(e) {
     var heart   = u(".heart", thisBtn);
     var counter = u(".likeCnt", thisBtn);
     var likes   = counter.text();
-    var isLiked = heart.attr("style") === 'color: red;';
+    var isLiked = heart.attr("style") === 'opacity: 1;';
     
     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));
     
     return false;