post likes ui changes

_data/locales/en.yml

@@ -56,6 +56,7 @@ post:
   posted: Posted
   updated: Updated
   views: Views
+  likes: Likes
   words: words
   pageview_measure: views
   read_time:

_includes/likes.html

@@ -0,0 +1,34 @@
+<link rel="stylesheet" href="/assets/css/heart.css">
+<i class="heart-icon" {% if include.tooltip %} title="{{site.data.locales[include.lang].post.likes}}"
+    data-bs-toggle="tooltip" data-bs-placement="bottom" {% endif %}></i>
+{% include loader.html id="likes-loader" %}
+<em id="likes-count">125</em>
+
+<script>
+    const heartIcon = document.querySelector(".heart-icon");
+    const likesCount = document.getElementById("likes-count");
+    const likesLoader = document.getElementById("likes-loader");
+
+    likesLoader.style.display = "none"
+
+    let likesAmount = likesCount.innerHTML;
+
+    heartIcon.addEventListener("click", () => {
+        likesLoader.style.display = "inline-flex"
+        likesCount.style.display = "none";
+        heartIcon.style.pointerEvents = 'none';
+        setTimeout(function(){
+            heartIcon.classList.toggle("liked");
+        if (heartIcon.classList.contains("liked")) {
+            likesAmount++;
+        } else {
+            likesAmount--;
+        }
+
+        likesCount.innerHTML = likesAmount;
+        likesLoader.style.display = "none"
+        likesCount.style.display = "inline-flex";
+        heartIcon.style.pointerEvents = 'auto';
+        }, 1000); 
+    });
+</script>

_includes/views.html

@@ -1,12 +1,16 @@
 <i class="fa fa-eye fa-fw me-1" {% if include.tooltip %} title="{{site.data.locales[include.lang].post.views}}"
   data-bs-toggle="tooltip" data-bs-placement="bottom" {% endif %}></i>
-{% include loader.html id="postcountloader" %}
+{% include loader.html id="views-loader" %}
-<em id="visit-count">
+<em id="views-count" style="margin-right: 12px">
 </em>
 
 <script>
-  document.getElementById("visit-count").style.display = "none";
+  const viewsCount = document.getElementById("views-count");
-  document.getElementById("postcountloader").style.display = "inline-block";
+  const viewsLoader = document.getElementById("views-loader");
+
+  viewsCount.style.display = "none";
+  viewsLoader.style.display = "inline-block"
+
   function ajax(url) {
     return new Promise(function (resolve, reject) {
       var xhr = new XMLHttpRequest();
@@ -25,9 +29,9 @@
   ajax("{{site.custom-config.blog-services.service_url}}/GetPostViews?siteId=" + siteId + "&postId=" + postId)
     .then(function (result) {
       console.log(result); // Code depending on result
-      document.getElementById('visit-count').innerText = result;
+      viewsCount.innerText = result;
-      document.getElementById("postcountloader").style.display = "none";
+      viewsLoader.style.display = "none";
-      document.getElementById("visit-count").style.display = "inline-block";
+      viewsCount.style.display = "inline-block";
     })
     .catch(function () {
       // An error occurred

_layouts/post.html

@@ -35,7 +35,8 @@ tail_includes:
     <!-- post counter -->
     <div>
       <!-- {{ site.data.locales[lang].post.views }}  -->
-      {% include post-counter.html tooltip=true lang=lang %}
+      {% include views.html tooltip=true lang=lang %}
+      {% include likes.html tooltip=true lang=lang %}
     </div>
   </div>
 

assets/css/heart.css

@@ -0,0 +1,21 @@
+.heart-icon {
+  margin-bottom: -41px;
+  margin-right: -38px;
+  display: inline-flex;
+  width: 46px;
+  height: 46px;
+  transform: translate(-50%, -50%);
+  background: url(/assets/img/custom/heart.png) no-repeat;
+  background-position: 0 0;
+  cursor: pointer;
+}
+
+.heart-icon.liked {
+  animation: like-anim 0.7s steps(28) forwards;
+}
+
+@keyframes like-anim {
+  to {
+    background-position: right;
+  }
+}