Skip to content

Commit

Permalink
change in the interaction buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@thedudeontitan
thedudeontitan committed Jun 15, 2024
1 parent ebe0e34 commit 8b03649
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 43 deletions.
72 changes: 42 additions & 30 deletions website/templates/includes/_like_dislike_widget.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
{% comment %} views {% endcomment %}
<button disabled
class="like_unlike border-[1px] rounded-2xl shadow-sm mb-3 cursor-pointer relative transform-[0] font-bold text-[#3e3446] bg-white border-black-2 text-[#0.875rem] leading-4 p-4 "
class="like_unlike border-[1px] rounded-2xl shadow-sm mb-3 cursor-pointer relative transform-[0] font-medium text-[#3e3446] bg-white border-black-2 text-[1.3rem] leading-4 p-4 "
type="button">
<span id="likes" class="flex items-end">
{{ object.views }} &nbsp;
<span id="likes" class="flex flex-row gap-2 items-center">
{{ object.views }}
<span>Views</span>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 562 352"
height="16px"
Expand All @@ -14,9 +15,10 @@
</button>
{% comment %} likes {% endcomment %}
{% if request.user.is_authenticated %}
<button name="{{ object.pk }}" {% comment %} {{device}} is passed by _like_dislike_share.html {% endcomment %} data-tooltip-target="tooltip-bottom-{{ device }}-like" data-tooltip-placement="bottom" type="submit" id="like_unlike" class="like_unlike rounded-2xl border-[1px] shadow-sm mb-3 cursor-pointer relative transform-[0] font-bold text-[#3e3446] bg-white border-black-2 text-[#0.875rem] leading-4 p-4 " type="button">
<span id="likes" class="flex items-end">
{{ likes }} &nbsp;
<button name="{{ object.pk }}" {% comment %} {{device}} is passed by _like_dislike_share.html {% endcomment %} data-tooltip-target="tooltip-bottom-{{ device }}-like" data-tooltip-placement="bottom" type="submit" id="like_unlike" class="like_unlike rounded-2xl border-[1px] shadow-sm mb-3 cursor-pointer relative transform-[0] font-medium text-[#3e3446] bg-white border-black-2 text-[#0.875rem] leading-4 p-4 " type="button">
<span id="likes" class="flex flex-row gap-2 items-center">
{{ likes }}
<span>Likes</span>
{% if isLiked %}
{% include "./_tooltip3.html" with text="Unlike" sno=object.pk widget="like" %}
<svg xmlns="http://www.w3.org/2000/svg"
Expand All @@ -42,7 +44,7 @@
<button data-tooltip-target="tooltip-bottom-{{ device }}-like"
data-tooltip-placement="bottom"
onclick="window.location.href='/accounts/login'"
class="like_unlike rounded-2xl border-[1px] shadow-sm mb-3 cursor-pointer relative transform-[0] font-bold text-[#3e3446] bg-white border-black-2 text-[#0.875rem] leading-4 p-4 "
class="like_unlike rounded-2xl border-[1px] shadow-sm mb-3 cursor-pointer relative transform-[0] font-medium text-[#3e3446] bg-white border-black-2 text-[#0.875rem] leading-4 p-4 "
type="button">
<span id="likes" class="flex items-end">
{{ likes }} &nbsp;
Expand All @@ -64,10 +66,11 @@
data-tooltip-placement="bottom"
type="submit"
id="dislike-btn"
class="dislike rounded-2xl border-[1px] shadow-sm mb-3 cursor-pointer relative transform-[0] font-bold text-[#3e3446] bg-white border-black-2 text-[#0.875rem] leading-4 p-4"
class="dislike rounded-2xl border-[1px] shadow-sm mb-3 cursor-pointer relative transform-[0] font-medium text-[#3e3446] bg-white border-black-2 text-[#0.875rem] leading-4 p-4"
type="button">
<span id="dislikes" class="flex items-end">
{{ dislikes }} &nbsp;
<span id="dislikes" class="flex flex-row gap-2 items-center">
{{ dislikes }}
<span>Dislikes</span>
{% if dislikes %}
{% include "./_tooltip3.html" with text="Undo Dislike" sno=object.pk widget="dislike" %}
<svg xmlns="http://www.w3.org/2000/svg"
Expand All @@ -93,7 +96,7 @@
<button data-tooltip-target="tooltip-bottom-{{ device }}-dislike"
data-tooltip-placement="bottom"
onclick="window.location.href='/accounts/login'"
class="dislike rounded-2xl border-[1px] shadow-sm mb-3 cursor-pointer relative transform-[0] font-bold text-[#3e3446] bg-white border-black-2 text-[#0.875rem] leading-4 p-4 ">
class="dislike rounded-2xl border-[1px] shadow-sm mb-3 cursor-pointer relative transform-[0] font-medium text-[#3e3446] bg-white border-black-2 text-[#0.875rem] leading-4 p-4 ">
<span id="dislikes" class="flex items-end">
{{ dislikes }} &nbsp;
{% include "./_tooltip3.html" with text="Login to Dislike" sno=object.pk widget="dislike" %}
Expand All @@ -113,10 +116,11 @@
data-tooltip-target="tooltip-bottom-{{ device }}-flags"
data-tooltip-placement="bottom"
id="flag-unflag"
class="flag-unflag rounded-2xl border-[1px] shadow-sm mb-3 cursor-pointer relative transform-[0] font-bold text-[#3e3446] bg-white border-black-2 text-[#0.875rem] leading-4 p-4 "
class="flag-unflag rounded-2xl border-[1px] shadow-sm mb-3 cursor-pointer relative transform-[0] font-medium text-[#3e3446] bg-white border-black-2 text-[#0.875rem] leading-4 p-4 "
type="button">
<span id="flags" class="flex items-end">
{{ flags }} &nbsp;
<span id="flags" class="flex flex-row gap-2 items-center">
{{ flags }}
<span>Flag</span>
{% if isFlagged %}
{% include "./_tooltip3.html" with text="Undo Report" sno=object.pk widget="flags" %}
<svg xmlns="http://www.w3.org/2000/svg"
Expand All @@ -142,7 +146,7 @@
<button data-tooltip-target="tooltip-bottom-{{ device }}-flags"
data-tooltip-placement="bottom"
onclick="window.location.href='/accounts/login'"
class="like_unlike rounded-2xl border-[1px] shadow-sm mb-3 cursor-pointer relative transform-[0] font-bold text-[#3e3446] bg-white border-black-2 text-[#0.875rem] leading-4 p-4 "
class="like_unlike rounded-2xl border-[1px] shadow-sm mb-3 cursor-pointer relative transform-[0] font-medium text-[#3e3446] bg-white border-black-2 text-[#0.875rem] leading-4 p-4 "
type="button">
<span id="flags" class="flex items-end">
{{ flags }} &nbsp;
Expand All @@ -162,11 +166,12 @@
<button name="{{ object.pk }}"
data-tooltip-target="tooltip-bottom-{{ device }}-bookmark"
data-tooltip-placement="bottom"
class="bookmark rounded-2xl border-[1px] shadow-sm mb-3 cursor-pointer relative transform-[0] font-bold text-[#3e3446] bg-white border-black-2 text-[#0.875rem] leading-4 p-4 "
class="bookmark rounded-2xl border-[1px] shadow-sm mb-3 cursor-pointer relative transform-[0] font-medium text-[#3e3446] bg-white border-black-2 text-[#0.875rem] leading-4 p-4 "
type="button">
<span id="bookmark" class="flex items-end">
<span id="bookmark" class="flex flex-row gap-2 items-center">
{% if bookmarked %}
{% include "./_tooltip3.html" with text="Undo Bookmark" sno=object.pk widget="bookmark" %}
<span>Bookmark</span>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
height="16px"
Expand All @@ -176,6 +181,7 @@
</svg>
{% else %}
{% include "./_tooltip3.html" with text="Bookmark" sno=object.pk widget="bookmark" %}
<span>Bookmark</span>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 384 512"
height="16px"
Expand All @@ -190,7 +196,7 @@
<button data-tooltip-target="tooltip-bottom-{{ device }}-bookmark"
data-tooltip-placement="bottom"
onclick="window.location.href='/accounts/login'"
class="like_unlike rounded-2xl border-[1px] shadow-sm mb-3 cursor-pointer relative transform-[0] font-bold text-[#3e3446] bg-white border-black-2 text-[#0.875rem] leading-4 p-4 "
class="like_unlike rounded-2xl border-[1px] shadow-sm mb-3 cursor-pointer relative transform-[0] font-medium text-[#3e3446] bg-white border-black-2 text-[#0.875rem] leading-4 p-4 "
type="button">
<span id="bookmark" class="flex items-end">
{{ bookmark }} &nbsp;
Expand All @@ -208,30 +214,36 @@
{% comment %} notification {% endcomment %}
<button data-tooltip-target="tooltip-bottom-{{ device }}-notification"
data-tooltip-placement="bottom"
class="relative inline-block shadow-sm rounded-xl transform-[0] font-bold text-[#3e3446] bg-white border-black-2 text-[#0.875rem] leading-4 p-4"
class="relative inline-block shadow-sm rounded-xl transform-[0] font-medium text-[#3e3446] bg-white border-black-2 text-[#0.875rem] leading-4 p-4"
onclick="{% if user.is_authenticated %}subscribe_domain(){% else %}window.location.href=`{% url 'account_login' %}`{% endif %}"
id="subscribe_domain_btn">
{% if user.is_authenticated and subscribed_to_domain %}
{% include "./_tooltip3.html" with text="Unsubscribe" sno=object.pk widget="notification" %}
<svg viewBox="0 0 16 16" fill="currentColor" height="16px" width="16px">
<path d="M10.533 14.07h3.466a.76.76 0 0 0 .58-.28.74.74 0 0 0 .19-.57l-.57-6.55a.13.13 0 0 0 0-.06A6.42 6.42 0 0 0 8 0a6.42 6.42 0 0 0-6.18 6.65v.06l-.57 6.55a.74.74 0 0 0 .19.57.76.76 0 0 0 .56.24h3.468A2.64 2.64 0 0 0 8 16a2.64 2.64 0 0 0 2.533-1.93Zm-1.654 0H7.121a1.13 1.13 0 0 0 1.758 0Zm4.32-1.5H2.8l.5-5.79v-.13A4.92 4.92 0 0 1 8 1.54a4.92 4.92 0 0 1 4.7 5.11v.19l.5 5.73Z">
</path>
</svg>
<div class="flex flex-row gap-2 items-center">
<span>Unsubscribe</span>
<svg viewBox="0 0 16 16" fill="currentColor" height="16px" width="16px">
<path d="M10.533 14.07h3.466a.76.76 0 0 0 .58-.28.74.74 0 0 0 .19-.57l-.57-6.55a.13.13 0 0 0 0-.06A6.42 6.42 0 0 0 8 0a6.42 6.42 0 0 0-6.18 6.65v.06l-.57 6.55a.74.74 0 0 0 .19.57.76.76 0 0 0 .56.24h3.468A2.64 2.64 0 0 0 8 16a2.64 2.64 0 0 0 2.533-1.93Zm-1.654 0H7.121a1.13 1.13 0 0 0 1.758 0Zm4.32-1.5H2.8l.5-5.79v-.13A4.92 4.92 0 0 1 8 1.54a4.92 4.92 0 0 1 4.7 5.11v.19l.5 5.73Z">
</path>
<path d="M.801 16.5a.798.798 0 0 1-.563-.234.786.786 0 0 1 0-1.127L14.635.733a.798.798 0 0 1 1.127 0 .787.787 0 0 1 0 1.127L1.365 16.266A.84.84 0 0 1 .8 16.5Z">
</path>
</svg>
</div>
{% else %}
{% include "./_tooltip3.html" with text="Subscribe" sno=object.pk widget="notification" %}
<svg viewBox="0 0 16 16" fill="currentColor" height="16px" width="16px">
<path d="M10.533 14.07h3.466a.76.76 0 0 0 .58-.28.74.74 0 0 0 .19-.57l-.57-6.55a.13.13 0 0 0 0-.06A6.42 6.42 0 0 0 8 0a6.42 6.42 0 0 0-6.18 6.65v.06l-.57 6.55a.74.74 0 0 0 .19.57.76.76 0 0 0 .56.24h3.468A2.64 2.64 0 0 0 8 16a2.64 2.64 0 0 0 2.533-1.93Zm-1.654 0H7.121a1.13 1.13 0 0 0 1.758 0Zm4.32-1.5H2.8l.5-5.79v-.13A4.92 4.92 0 0 1 8 1.54a4.92 4.92 0 0 1 4.7 5.11v.19l.5 5.73Z">
</path>
<path d="M.801 16.5a.798.798 0 0 1-.563-.234.786.786 0 0 1 0-1.127L14.635.733a.798.798 0 0 1 1.127 0 .787.787 0 0 1 0 1.127L1.365 16.266A.84.84 0 0 1 .8 16.5Z">
</path>
</svg>
<div class="flex flex-row gap-2 items-center">
<span>Sububscribe</span>
<svg viewBox="0 0 16 16" fill="currentColor" height="16px" width="16px">
<path d="M10.533 14.07h3.466a.76.76 0 0 0 .58-.28.74.74 0 0 0 .19-.57l-.57-6.55a.13.13 0 0 0 0-.06A6.42 6.42 0 0 0 8 0a6.42 6.42 0 0 0-6.18 6.65v.06l-.57 6.55a.74.74 0 0 0 .19.57.76.76 0 0 0 .56.24h3.468A2.64 2.64 0 0 0 8 16a2.64 2.64 0 0 0 2.533-1.93Zm-1.654 0H7.121a1.13 1.13 0 0 0 1.758 0Zm4.32-1.5H2.8l.5-5.79v-.13A4.92 4.92 0 0 1 8 1.54a4.92 4.92 0 0 1 4.7 5.11v.19l.5 5.73Z">
</path>
</svg>
</div>
{% endif %}
</button>
{% comment %} resolve {% endcomment %}
{% if request.user.is_superuser or request.user == object.user %}
<button type="button"
onclick="resolveIssue()"
class="rounded-2xl h-auto border-[1px] shadow-sm mb-3 cursor-pointer relative transform-[0] font-bold text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:outline-none border-black-2 text-[#0.875rem] leading-4 p-4 ">
class="rounded-2xl h-auto border-[1px] shadow-sm mb-3 cursor-pointer relative transform-[0] font-medium text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:outline-none border-black-2 text-[#0.875rem] leading-4 p-4 ">
{% if status == "open" %}
Resolve
{% else %}
Expand Down
27 changes: 14 additions & 13 deletions website/templates/issue3.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,6 @@
<span class="bg-green-100 text-green-800 text-xl font-medium me-2 px-2.5 py-0.5 rounded">Resolved</span>
{% endif %}
</nav>
<div class="right-data ml-auto max-sm:pt-2">{% include "includes/_like_dislike_share.html" %}</div>
</div>
<div class="h-[3vh]"></div>
<h2 class="font-[ubuntu] font-bold text-[30px] w-[90%] truncate ml-[3.5%]"
Expand All @@ -76,13 +75,14 @@
rel="noopener noreferrer">{{ object.url }}</a>
</p>
<br>
<div class="right-data max-sm:pt-2 ml-[3.5%]">{% include "includes/_like_dislike_share.html" %}</div>
<div id="default-tab-content" class="bg-white">
<br>
<div class="flex flex-row">
<div class="flex flex-col items-center lg:items-start px-10 lg:flex-row">
<div id="screenshot-wrapper">
<div class="text-[16px] font-semibold mb-5">Screenshots:</div>
<hr>
<div class="screenshot-container h-[400px] w-[40vw] flex">
<div class="screenshot-container max-h-[400px] w-[100%] lg:h-[400px] lg:w-[40vw] flex">
{% if object.screenshot %}
<a href="{{ object.screenshot.url }}" data-lightbox="image">
<img id="current-screenshot"
Expand Down Expand Up @@ -150,8 +150,8 @@ <h4 class="text-2xl font-bold mb-3">Event ID: {{ object.id }}</h4>
</div>
</div>
</div>
<div class="flex flex-wrap lg:grid lg:grid-cols-2 gap-10">
<div class="flex items-center bg-white rounded-2xl shadow-md gap-5 p-10 w-[20vw]">
<div class="flex flex-col lg:grid lg:grid-cols-2 gap-10">
<div class="flex items-center bg-white rounded-2xl shadow-md gap-5 p-10 w-full lg:w-[20vw]">
<div class="rounded-full w-[20%]">
<img class="w-[80%] h-[80%] object-cover"
src="{% if object.user.username %} {% if object.user.userprofile.user_avatar %}{{ MEDIA_URL }}{{ object.user.userprofile.user_avatar }}{% else %}{% gravatar_url object.user.email 100 %}{% endif %}{% else %}{% static 'images/dummy-user.png' %}{% endif %}"
Expand Down Expand Up @@ -185,7 +185,7 @@ <h4 class="text-2xl font-bold mb-3">Event ID: {{ object.id }}</h4>
</div>
</div>
</div>
<div class="flex flex-col items-center bg-white rounded-2xl shadow-md justify-between p-10 w-[20vw]">
<div class="flex flex-col items-center bg-white rounded-2xl shadow-md justify-between p-10 w-full lg:w-[20vw]">
<div class="text-[14px] w-[100%] font-bold truncate">Bug Type: {{ object.get_label_display }}</div>
<div class="h-[2vh]"></div>
<div class="text-[14px] w-[100%] truncate">
Expand Down Expand Up @@ -229,7 +229,7 @@ <h4 class="text-2xl font-bold mb-3">Event ID: {{ object.id }}</h4>
</div>
{% endif %}
</div> -->
<div class="flex items-center bg-white rounded-2xl shadow-md gap-5 p-10 w-[20vw]">
<div class="flex items-center bg-white rounded-2xl shadow-md gap-5 p-10 w-full lg:w-[20vw]">
<img class="w-[40px] h-[40px] object-cover"
src="{{ object.domain.get_logo }}"
alt="Domain Logo"
Expand All @@ -253,7 +253,7 @@ <h4 class="text-2xl font-bold mb-3">Event ID: {{ object.id }}</h4>
</button>
</div>
</div>
<div class="flex items-center bg-white rounded-2xl shadow-md p-10 w-[20vw]">
<div class="flex items-center bg-white rounded-2xl shadow-md p-10 w-full lg:w-[20vw]">
{% if browser_family %}
{% with "img/browser-logos/"|add:browser_family|add:"/"|add:browser_family|add:"_64x64.png"|lower as image_static %}
<div class="rounded-full w-[20%]">
Expand Down Expand Up @@ -286,14 +286,15 @@ <h4 class="text-2xl font-bold mb-3">Event ID: {{ object.id }}</h4>
</div>
</div>
</div>
<div>
<hr class="border-[#7e22ce] w-[97%]">
<div class="px-10 mt-5">
<hr class="border-[#7e22ce] w-[100%]">
{% if object.markdown_description %}
<h3 class="font-[ubuntu] text-[20px] f p-3 my-2 font-semibold">Issue Description</h3>
<p class="ml-3 text-justify max-sm:w-[95vw] lg:w-11/12" id="bug_report">{{ object.markdown_description }}</p>
<h3 class="font-[ubuntu] text-[16px] lg:text-[20px] p-3 my-2 font-semibold">Issue Description</h3>
<p class="ml-3 text-justify text-[12px] lg:text-[14px] lg:w-11/12"
id="bug_report">{{ object.markdown_description }}</p>
{% endif %}
</div>
<div class="p-4 rounded-lg bg-white">{% include "comments2.html" %}</div>
<div class="px-10 rounded-lg bg-white">{% include "comments2.html" %}</div>
</div>
</div>
<script src="{% static '/company/js/md_editor.js' %}"></script>
Expand Down

0 comments on commit 8b03649

Please sign in to comment.