From b251522adf6e504a62a319d3e78fbd50e5f21e5d Mon Sep 17 00:00:00 2001
From: p0lygun <solankivibhakar82@gmail.com>
Date: Mon, 17 Oct 2022 20:14:01 +0530
Subject: [PATCH 1/4] fix: redo like container

---
 .../templates/core/experiences_listing.html   | 27 ++++++++++---------
 bfportal/theme/static_src/src/styles.css      |  6 +----
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/bfportal/core/templates/core/experiences_listing.html b/bfportal/core/templates/core/experiences_listing.html
index f2ed4c6..5c7df7b 100644
--- a/bfportal/core/templates/core/experiences_listing.html
+++ b/bfportal/core/templates/core/experiences_listing.html
@@ -22,11 +22,11 @@
                                 />
                             </div>
                             <!-- like count -->
-                            {% with post.liked_by.all.count as like_count %}
+                            {% with 9999 as like_count %}
                             {% if post.bugged or post.broken or post.xp_farm %}
-                                <div data-card_error_container="{{ post.id }}" class="absolute -bottom-0.5 inset-x-0 w-full h-7 {% if post.bugged %}bg-[#9c8b2e]/[.95]{% else %}bg-[#881e14]/[.95]{% endif %}"></div>
+                                <div data-card_error_container="{{ post.id }}" class="absolute bottom-0 inset-x-0 w-full h-7 {% if post.bugged %}bg-[#9c8b2e]/[.95]{% else %}bg-[#881e14]/[.95]{% endif %}"></div>
 
-                                <div class="absolute bottom-0 flex flex-row gap-x-1 mb-1 ml-1 text-xs">
+                                <div class="absolute bottom-[0.1rem] flex flex-row gap-x-1 mb-1 ml-1 text-xs">
                                     <img width="14" height="14" alt="" src="{% static 'svgs/card/Alert.svg' %}">
                                     <p class="align-bottom text-white">
                                         {% if post.bugged %}
@@ -39,21 +39,24 @@
                                     </p>
                                 </div>
                             {% endif %}
-                            <div like_count_container="{{ post.id }}" class="absolute -bottom-0.5 h-7 right-0 w-min-14 pl-6 pr-2.5 pt-1.5 text-white text-sm group-hover:bg-bg-default duration-200 clickable fav-container" style="--rect-url: url('{% static 'svgs/card-fav-rect.svg' %}');" onclick="add_to_liked(this)">
-                                <div class="flex flex-row gap-2 font-medium pb-1.5">
-                                    <p fav_count_container="{{ post.id }}" class="{% if like_count == 0 %} hidden {% endif %}">{{ like_count }}</p>
-                                    {% if post|is_liked_by_user:request %}
-                                    <img like_svg="{{ post.id }}" class="block" src="{% static 'svgs/card/heart_liked.svg' %}" alt="non">
-                                    {% else %}
-                                    <img like_svg="{{ post.id }}" class="block" src="{% static 'svgs/card/heart_not_liked.svg' %}" alt="non">
-                                    {% endif %}
+                            <div like_count_container="{{ post.id }}" class="absolute bottom-0 h-7 bg-transparent right-0 w-min-14 text-white text-sm clickable" onclick="add_to_liked(this)">
+                                <div class="flex flex-row w-full h-full items-center relative bg-card-bg group-hover:bg-bg-default px-1 transition duration-200">
+                                    <span class="absolute right-[99%] fav-container w-4 h-8 -bottom-1 bg-card-bg group-hover:bg-bg-default transition duration-200"></span>
+                                    <div class="flex flex-row gap-2 items-center font-medium">
+                                        <p fav_count_container="{{ post.id }}" class="{% if like_count == 0 %} hidden {% endif %}">{{ like_count }}</p>
+                                        {% if post|is_liked_by_user:request %}
+                                        <img like_svg="{{ post.id }}" class="block" src="{% static 'svgs/card/heart_liked.svg' %}" alt="non">
+                                        {% else %}
+                                        <img like_svg="{{ post.id }}" class="block" src="{% static 'svgs/card/heart_not_liked.svg' %}" alt="non">
+                                        {% endif %}
+                                    </div>
                                 </div>
                             </div>
                             {% endwith %}
                         </div>
                     </div>
                     <!-- info -->
-                    <div class="grid grid-cols-1 grid-flow-row mt-3 h-1/3">
+                    <div class="grid grid-cols-1 grid-flow-row pt-3 h-1/3">
                         <!-- cats -->
                         <div class="flex flex-row flex-wrap gap-x-1 mb-2">
                             <a class="clickable" href="/experiences/?category={{ post.category }}">
diff --git a/bfportal/theme/static_src/src/styles.css b/bfportal/theme/static_src/src/styles.css
index 6654bf9..c57c778 100644
--- a/bfportal/theme/static_src/src/styles.css
+++ b/bfportal/theme/static_src/src/styles.css
@@ -13,11 +13,7 @@ body {
 }
 
 .fav-container {
-    background-color: #262626;
-    -webkit-mask-image: var(--rect-url);
-    mask-image: var(--rect-url);
-    mask-repeat: no-repeat;
-    mask-size: auto 100%;
+    clip-path: polygon(94% 0, 100% 0, 100% 100%, 0% 100%);
 }
 
 .checkbox-check:checked {

From 3628809d0c2b622a778ea8304505c07abf7a336e Mon Sep 17 00:00:00 2001
From: p0lygun <solankivibhakar82@gmail.com>
Date: Mon, 17 Oct 2022 20:19:44 +0530
Subject: [PATCH 2/4] chore: user acctual like count

---
 bfportal/core/templates/core/experiences_listing.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bfportal/core/templates/core/experiences_listing.html b/bfportal/core/templates/core/experiences_listing.html
index 5c7df7b..c074984 100644
--- a/bfportal/core/templates/core/experiences_listing.html
+++ b/bfportal/core/templates/core/experiences_listing.html
@@ -22,7 +22,7 @@
                                 />
                             </div>
                             <!-- like count -->
-                            {% with 9999 as like_count %}
+                            {% with post.liked_by.all|length as like_count %}
                             {% if post.bugged or post.broken or post.xp_farm %}
                                 <div data-card_error_container="{{ post.id }}" class="absolute bottom-0 inset-x-0 w-full h-7 {% if post.bugged %}bg-[#9c8b2e]/[.95]{% else %}bg-[#881e14]/[.95]{% endif %}"></div>
 

From 5739a49406b0c2df6ea6486de4f18a3c94f121f7 Mon Sep 17 00:00:00 2001
From: p0lygun <solankivibhakar82@gmail.com>
Date: Mon, 17 Oct 2022 22:13:31 +0530
Subject: [PATCH 3/4] style: fix like contaier

---
 .../core/templates/core/experience_page.html  | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/bfportal/core/templates/core/experience_page.html b/bfportal/core/templates/core/experience_page.html
index fddff34..2f39478 100644
--- a/bfportal/core/templates/core/experience_page.html
+++ b/bfportal/core/templates/core/experience_page.html
@@ -18,20 +18,18 @@
             />
             {% with page.liked_by.all.count as like_count %}
                 <div like_count_container="{{ page.id }}"
-                     class="absolute bottom-0 right-0 w-min-14 pl-8 pr-2.5 pt-1.5 fav-container"
-                     style="--rect-url: url('{% static 'svgs/card-fav-rect.svg' %}'); background-color: #121212"
-                     onclick="add_to_liked(this)">
-                    <div class="flex flex-row gap-2 font-medium pb-1.5 text-3xl">
-                        <p fav_count_container="{{ page.id }}"
-                           class="{% if like_count == 0 %} hidden {% endif %}">{{ like_count }}</p>
-                        <img like_svg="{{ page.id }}"
-                             width="32" height="32"
-                             src="
-
-
-                                     {% if page|is_liked_by_user:request %}{% static 'svgs/card/heart_liked.svg' %}{% else %}{% static 'svgs/card/heart_not_liked.svg' %}{% endif %}"
-                             alt=""
-                        />
+                     class="absolute bottom-0 bg-transparent right-0 w-min-14 text-white h-10" onclick="add_to_liked(this)">
+                    <div class="flex flex-row w-full h-full items-center relative bg-default group-hover:bg-bg-default pl-2.5 pr-4 transition duration-200  py-2">
+                        <span class="absolute right-full bottom-0 fav-container w-4 h-10 bg-default group-hover:bg-bg-default transition duration-200"></span>
+                        <div class="flex flex-row gap-2 font-medium text-3xl">
+                            <p fav_count_container="{{ page.id }}" class="{% if not like_count %} hidden {% endif %}">{{ like_count }}</p>
+                            <img like_svg="{{ page.id }}"
+                                 width="32" height="32"
+                                 src="
+                                         {% if page|is_liked_by_user:request %}{% static 'svgs/card/heart_liked.svg' %}{% else %}{% static 'svgs/card/heart_not_liked.svg' %}{% endif %}"
+                                 alt=""
+                            />
+                        </div>
                     </div>
                 </div>
             {% endwith %}

From 01e1dfc1ac9acb0110c932282ce5dfac27a3c9c9 Mon Sep 17 00:00:00 2001
From: p0lygun <solankivibhakar82@gmail.com>
Date: Mon, 17 Oct 2022 22:14:44 +0530
Subject: [PATCH 4/4] feat: change order of report type in template

---
 bfportal/core/templates/core/experiences_listing.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/bfportal/core/templates/core/experiences_listing.html b/bfportal/core/templates/core/experiences_listing.html
index c074984..b85e4fc 100644
--- a/bfportal/core/templates/core/experiences_listing.html
+++ b/bfportal/core/templates/core/experiences_listing.html
@@ -29,10 +29,10 @@
                                 <div class="absolute bottom-[0.1rem] flex flex-row gap-x-1 mb-1 ml-1 text-xs">
                                     <img width="14" height="14" alt="" src="{% static 'svgs/card/Alert.svg' %}">
                                     <p class="align-bottom text-white">
-                                        {% if post.bugged %}
-                                            Experience Bugged
-                                        {% elif post.broken %}
+                                        {% if post.broken %}
                                             Experience Broken
+                                        {% elif post.bugged %}
+                                            Experience Bugged
                                         {% elif post.xp_farm %}
                                             XP Farm
                                         {% endif %}