Skip to content

Commit

Permalink
style: remove the extra space to the right of like container (#128)
Browse files Browse the repository at this point in the history
  • Loading branch information
@MagneticNeedle
MagneticNeedle authored Oct 17, 2022
2 parents 0119a9e + 01e1dfc commit 9fe51e3
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 34 deletions.
26 changes: 12 additions & 14 deletions bfportal/core/templates/core/experience_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
33 changes: 18 additions & 15 deletions bfportal/core/templates/core/experiences_listing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,38 +22,41 @@
/>
</div>
<!-- like count -->
{% with post.liked_by.all.count 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.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 %}
Experience Bugged
{% elif post.broken %}
{% if post.broken %}
Experience Broken
{% elif post.bugged %}
Experience Bugged
{% elif post.xp_farm %}
XP Farm
{% endif %}
</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 }}">
Expand Down
6 changes: 1 addition & 5 deletions bfportal/theme/static_src/src/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down

0 comments on commit 9fe51e3

Please sign in to comment.