From 62f9467179388d384a00bfdf6e499f3dc3e2e6d2 Mon Sep 17 00:00:00 2001
From: Jill Stingray <stingray@jill.pl>
Date: Thu, 25 Jun 2020 12:09:15 +0000
Subject: [PATCH] Make likes more VK-styled

Co-authored-by: Kos Furler <35310076+kosfurler@users.noreply.github.com>
---
 Web/Presenters/templates/components/post.xml | 27 ++++++++++----------
 Web/static/css/style.css                     | 21 +++++++++++++++
 Web/static/js/al_wall.js                     |  4 +--
 3 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/Web/Presenters/templates/components/post.xml b/Web/Presenters/templates/components/post.xml
index 12e88dbe..dd3c545d 100644
--- a/Web/Presenters/templates/components/post.xml
+++ b/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
-                          href="/wall{$post->getPrettyId()}/like?hash={rawurlencode($csrfToken)}"
-                          class="post-like-button"
+
+					
+					
+					<div class="like_wrap">
+					{var liked = $post->hasLikeFrom($thisUser)}
+					<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>
-                            
-                            <text class="likeCnt">{$post->getLikesCount()}</text>
-                        </a>
-                    </div>
+						  
+  
+  <div class="heart" style="{if $liked}opacity: 1;{else}opacity: 0.4;{/if}"></div>
+  <span class="likeCnt">{$post->getLikesCount()}</span>
+</a></div>
+
+
                 </div>
             </td>
         </tr>
diff --git a/Web/static/css/style.css b/Web/static/css/style.css
index 25f59468..3da19cf3 100644
--- a/Web/static/css/style.css
+++ b/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;
+}
diff --git a/Web/static/js/al_wall.js b/Web/static/js/al_wall.js
index 5ca6f6ed..30f12b9d 100644
--- a/Web/static/js/al_wall.js
+++ b/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;