Display reactions using bootstrap tooltip

oioioi/forum/models.py

@@ -255,13 +255,7 @@ def is_reporter_banned(self):
             return False
 
         return Ban.is_banned(self.thread.category.forum, self.reported_by)
-
-    def get_upvotes(self):
-        return self.reactions.filter(type_of_reaction='UPVOTE')
-
-    def get_downvotes(self):
-        return self.reactions.filter(type_of_reaction='DOWNVOTE')
-
+
 
 post_reaction_types = EnumRegistry(
     entries=[

oioioi/forum/static/common/forum.scss

@@ -14,12 +14,4 @@
 .anchor-jump-fix {
   margin-top: -$oioioi-navbar-height;
   margin-bottom: $oioioi-navbar-height;
-}
-
-.reaction-list {
-  display: none;
-}
-
-.reaction-symbol:hover + .reaction-list {
-  display: inline;
 }

oioioi/forum/templates/forum/thread-element-footer.html

@@ -1,6 +1,7 @@
 {% load i18n %}
 {% load check_perm %}
 {% load get_user_name %}
+{% load format_reactions %}
 
 {% url 'forum_post_edit' contest_id=contest.id category_id=category.id thread_id=thread.id post_id=post.id as forum_post_edit_url %}
 {% url 'forum_post_delete' contest_id=contest.id category_id=category.id thread_id=thread.id post_id=post.id as forum_post_delete_url %}
@@ -18,11 +19,13 @@
             <a href="#" data-post-url="{{ forum_post_toggle_reaction_url }}?reaction=upvote">
         {% endif %}
 
-        <span class="{% if post.user_upvoted %} text-success {% else %} text-muted {% endif %} reaction-symbol">
+        <span 
+            class="{% if post.user_upvoted %} text-success {% else %} text-muted {% endif %}"
+            data-toggle="tooltip" title="{% format_reactions post "UPVOTE" %}"
+        >
             <i class="fa-solid fa-plus"></i> {{ post.upvotes_count }}
         </span>
-        {% include "forum/thread-post-reactions.html" with reactions=post.get_upvotes %}
-
+
         {% if can_interact_with_users %}
             </a>
         {% endif %}
@@ -31,10 +34,12 @@
             <a href="#" data-post-url="{{ forum_post_toggle_reaction_url }}?reaction=downvote">
         {% endif %}
 
-        <span class="{% if post.user_downvoted %} text-danger {% else %} text-muted {% endif %} reaction-symbol">
+        <span 
+            class="{% if post.user_downvoted %} text-danger {% else %} text-muted {% endif %}"
+            data-toggle="tooltip" title="{% format_reactions post "DOWNVOTE" %}"
+        >
             <i class="fa-solid fa-minus"></i> {{ post.downvotes_count }}
         </span>
-        {% include "forum/thread-post-reactions.html" with reactions=post.get_downvotes %}
 
         {% if can_interact_with_users %}
             </a>

oioioi/forum/templatetags/format_reactions.py

@@ -0,0 +1,18 @@
+from django import template
+from django.utils.translation import gettext as _
+from oioioi.base.utils import get_user_display_name
+
+register = template.Library()
+
+@register.simple_tag
+def format_reactions(post, rtype):
+  output = ', '.join([
+    get_user_display_name(reaction.author)
+    for reaction in 
+    post.reactions.filter(type_of_reaction=rtype).select_related('author')[:10]
+  ])
+
+  if(post.reactions.filter(type_of_reaction=rtype).count() > 10):
+    output +=  _(' and others')
+
+  return output