Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style: remove the extra space to the right of like container #128

Merged
merged 4 commits into from
Oct 17, 2022
Merged

style: remove the extra space to the right of like container #128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b251522
fix: redo like container
MagneticNeedle Oct 17, 2022
3628809
chore: user acctual like count
MagneticNeedle Oct 17, 2022
5739a49
style: fix like contaier
MagneticNeedle Oct 17, 2022
01e1dfc
feat: change order of report type in template
MagneticNeedle Oct 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 12 additions & 14 deletions bfportal/core/templates/core/experience_page.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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