Simplify the css of the moderation tree

Author: C4ptainCrunch

moderation/templates/moderation/tree.html

@@ -17,55 +17,11 @@ <h1 class="h3 mb-4">Arbre de modération</h1>
             Chaque branche représente une chaîne de confiance.
         </p>
 
-        <style>
-            .mod-tree ul {
-                list-style: none;
-                padding-left: 1.5rem;
-                margin: 0;
-                position: relative;
-            }
-            .mod-tree ul::before {
-                content: '';
-                position: absolute;
-                left: 0.4rem;
-                top: 0;
-                bottom: 0.75rem;
-                border-left: 1px solid #ccc;
-            }
-            .mod-tree li {
-                position: relative;
-                padding: 0.15rem 0;
-            }
-            .mod-tree li::before {
-                content: '';
-                position: absolute;
-                left: -1.1rem;
-                top: 0.75rem;
-                width: 0.7rem;
-                border-top: 1px solid #ccc;
-            }
-            .mod-tree .tree-root {
-                list-style: none;
-                padding: 0;
-                margin: 0;
-            }
-            .mod-tree .tree-root::before {
-                display: none;
-            }
-            .mod-tree .tree-root > li::before {
-                display: none;
-            }
-            .mod-tree .doc-count {
-                color: #888;
-                font-size: 0.9em;
-            }
-        </style>
-
         {% if tree %}
-            <div class="mod-tree">
-                <ul class="tree-root">
+            <div>
+                <ul class="list-unstyled ps-0 mb-0">
                     {% for root in tree %}
-                        {% include "moderation/tree_node.html" with node=root %}
+                        {% include "moderation/tree_node.html" with node=root is_root=True %}
                     {% endfor %}
                 </ul>
             </div>

moderation/templates/moderation/tree_node.html

@@ -1,14 +1,19 @@
-<li>
-    <strong><a href="{% url 'moderation_profile' node.user.netid %}">{{ node.user.netid }}</a></strong>
-    <span class="text-muted">{{ node.user.name }}</span>
-    <span class="doc-count">({{ node.user.action_count }} action{{ node.user.action_count|pluralize }})</span>
-    {% if node.user.is_staff %}
-        <span class="badge bg-danger ms-1" style="font-size:0.7em;">Admin</span>
-    {% endif %}
+<li class="py-1">
+    <div class="d-flex flex-wrap align-items-baseline gap-1">
+        {% if not is_root %}
+            <span class="border-top flex-shrink-0 align-self-center" style="width: 1rem;"></span>
+        {% endif %}
+        <strong><a href="{% url 'moderation_profile' node.user.netid %}">{{ node.user.netid }}</a></strong>
+        <span class="text-muted">{{ node.user.name }}</span>
+        <span class="text-muted small">({{ node.user.action_count }} action{{ node.user.action_count|pluralize }} de modération, {{ node.user.document_count }} document{{ node.user.document_count|pluralize }})</span>
+        {% if node.user.is_staff %}
+            <span class="badge text-bg-danger ms-1">Admin</span>
+        {% endif %}
+    </div>
     {% if node.children %}
-        <ul>
+        <ul class="list-unstyled border-start ps-0 ms-2 mb-0">
             {% for child in node.children %}
-                {% include "moderation/tree_node.html" with node=child %}
+                {% include "moderation/tree_node.html" with node=child is_root=False %}
             {% endfor %}
         </ul>
     {% endif %}

moderation/views.py

@@ -285,7 +285,10 @@ def moderation_tree(request):
     moderators = (
         User.objects.filter(Q(is_staff=True) | Q(is_moderator=True))
         .select_related("promoted_by")
-        .annotate(action_count=Count("moderationlog"))
+        .annotate(
+            action_count=Count("moderationlog", distinct=True),
+            document_count=Count("document", distinct=True),
+        )
         .order_by("first_name")
     )