Use partials everywhere

pedagogy/templates/pedagogy/fragments/comment_report.jinja

@@ -1,11 +1,10 @@
 <form
+  class="report-form"
   hx-post="{{ request.get_full_path() }}"
-  hx-ext="error-callbacks"
   hx-target="this"
   hx-swap="outerHTML"
-  hx-disabled-elt="input[type='submit']"
+  hx-disable="button input[type='submit']"
   hx-trigger="submit"
-  hx-callback-404="target.remove()"
 >
   {% csrf_token %}
   {{ form.non_field_errors() }}
@@ -16,15 +15,17 @@
   {{ form.reporter }}
   {{ form.comment }}
 
-  <button
-    hx-get="{{ url('pedagogy:comment_detail', comment_id=comment_id) }}"
-    hx-target="closest form"
-    hx-swap="outerHTML"
-  >
-    {% trans %}Cancel{% endtrans %}
-  </button>
+  <div class="buttons">
+    <button
+      class="btn btn-red left"
+      hx-get="{{ ue_detail_url }}"
+      hx-target="closest form"
+      hx-swap="outerHTML"
+    >
+      {% trans %}Cancel{% endtrans %}
+    </button>
 
-  <p class="right" id="nique">
-    <input type="submit" value="{% trans %}Report{% endtrans %}" />
-  </p>
+    <input class="btn btn-green" type="submit" value="{% trans %}Report{% endtrans %}" />
+
+  </div>
 </form>

pedagogy/templates/pedagogy/fragments/ue_comment.jinja

@@ -1,83 +0,0 @@
-{% from "pedagogy/macros.jinja" import display_star %}
-{% from "core/macros.jinja" import user_profile_link %}
-
-<div id="comment-{{ comment.id }}" class="comment-container">
-
-  <div class="grade-block">
-    <div class="grade-type">
-      <p>{% trans %}Global grade{% endtrans %}</p>
-      <p>{% trans %}Utility{% endtrans %}</p>
-      <p>{% trans %}Interest{% endtrans %}</p>
-      <p>{% trans %}Teaching{% endtrans %}</p>
-      <p>{% trans %}Work load{% endtrans %}</p>
-    </div>
-    <div class="grade-stars">
-      <p>{{ display_star(comment.grade_global) }}</p>
-      <p>{{ display_star(comment.grade_utility) }}</p>
-      <p>{{ display_star(comment.grade_interest) }}</p>
-      <p>{{ display_star(comment.grade_teaching) }}</p>
-      <p>{{ display_star(comment.grade_work_load) }}</p>
-    </div>
-    <div class="grade-extension"></div>
-  </div>
-
-  <div class="comment">
-    <div class="anchor">
-      <a href="{{ url('pedagogy:ue_detail', ue_id=ue.id) }}#comment-{{ comment.id }}"><i class="fa fa-paragraph"></i></a>
-    </div>
-    {{ comment.comment|markdown }}
-  </div>
-
-  <div class="info">
-    {% if comment.is_reported %}
-      <p class="status-reported">
-        {% trans %}This comment has been reported{% endtrans %}
-      </p>
-    {% endif %}
-
-    {% if comment.author_id == user.id or user.has_perm("pedagogy.change_comment") %}
-      <button
-        class="btn btn-orange action"
-        hx-get="{{ url('pedagogy:comment_update', comment_id=comment.id) }}"
-        hx-swap="outerHTML"
-        hx-target="#comment-{{ comment.id }}"
-      >
-        <i class="fa fa-pencil"></i> {% trans %}Edit{% endtrans %}
-      </button>
-    {% endif %}
-    {% if comment.author_id == user.id or user.has_perm("pedagogy.delete_comment") %}
-      <form class="action"
-            hx-ext="error-callbacks"
-            hx-post="{{ url('pedagogy:comment_delete', comment_id=comment.id) }}"
-            hx-confirm='{% trans obj=object %}Are you sure you want to delete "{{ obj }}"?{% endtrans %}'
-            hx-swap="outerHTML"
-            hx-target="#comment-{{ comment.id }}"
-            hx-callback-404="document.getElementsByTagName('body')[0].dispatchEvent(new CustomEvent('CommentUpdate'));target.remove()"
-      >
-        {% csrf_token %}
-        <button class="btn btn-red action">
-          <i class="fa fa-trash-can"></i> {% trans %}Delete{% endtrans %}
-        </button>
-      </form>
-    {% endif %}
-  </div>
-
-  <div class="comment-end-bar">
-    <div class="report">
-      <p>
-        <a
-          hx-get="{{ url('pedagogy:comment_report', comment_id=comment.id) }}"
-          hx-swap="outerHTML"
-          hx-target="#comment-{{ comment.id }}"
-        >
-          {% trans %}Report this comment{% endtrans %}
-        </a>
-      </p>
-    </div>
-
-    <div class="date"><p>{{ comment.publish_date.strftime('%d/%m/%Y') }}</p></div>
-
-    <div class="author"><p>{{ user_profile_link(comment.author) }}</p></div>
-  </div>
-
-</div>

pedagogy/templates/pedagogy/fragments/ue_comment_form.jinja

@@ -56,9 +56,9 @@
         {{ form.comment }}
       </div>
     </div>
-    <p class="right">
+    <div class="buttons">
       <input type="submit" value="{% trans %}Comment{% endtrans %}" />
-    </p>
+    </div>
   </form>
 
   {% if form.is_creation %}

pedagogy/templates/pedagogy/fragments/ue_details/comments.jinja

@@ -1,3 +1,6 @@
+{% from "pedagogy/macros.jinja" import display_star %}
+{% from "core/macros.jinja" import user_profile_link %}
+
 {% if comments %}
   <h2>{% trans %}Comments{% endtrans %}</h2>
   <br>
@@ -5,6 +8,84 @@
 
 <section>
   {% for comment in comments %}
-    {% include "pedagogy/fragments/ue_comment.jinja" %}
+
+    <div id="comment-{{ comment.id }}" class="comment-container">
+
+      <div class="grade-block">
+        <div class="grade-type">
+          <p>{% trans %}Global grade{% endtrans %}</p>
+          <p>{% trans %}Utility{% endtrans %}</p>
+          <p>{% trans %}Interest{% endtrans %}</p>
+          <p>{% trans %}Teaching{% endtrans %}</p>
+          <p>{% trans %}Work load{% endtrans %}</p>
+        </div>
+        <div class="grade-stars">
+          <p>{{ display_star(comment.grade_global) }}</p>
+          <p>{{ display_star(comment.grade_utility) }}</p>
+          <p>{{ display_star(comment.grade_interest) }}</p>
+          <p>{{ display_star(comment.grade_teaching) }}</p>
+          <p>{{ display_star(comment.grade_work_load) }}</p>
+        </div>
+        <div class="grade-extension"></div>
+      </div>
+
+      <div class="comment">
+        <div class="anchor">
+          <a href="{{ url('pedagogy:ue_detail', ue_id=ue.id) }}#comment-{{ comment.id }}"><i class="fa fa-paragraph"></i></a>
+        </div>
+        {{ comment.comment|markdown }}
+      </div>
+
+      <div class="info">
+        {% if comment.is_reported %}
+          <p class="status-reported">
+            {% trans %}This comment has been reported{% endtrans %}
+          </p>
+        {% endif %}
+
+        {% if comment.author_id == user.id or user.has_perm("pedagogy.change_comment") %}
+          <button
+            class="btn btn-orange action"
+            hx-get="{{ url('pedagogy:comment_update', comment_id=comment.id) }}"
+            hx-swap="outerHTML"
+            hx-target="#comment-{{ comment.id }}"
+          >
+            <i class="fa fa-pencil"></i> {% trans %}Edit{% endtrans %}
+          </button>
+        {% endif %}
+        {% if comment.author_id == user.id or user.has_perm("pedagogy.delete_comment") %}
+          <form class="action"
+                hx-post="{{ url('pedagogy:comment_delete', comment_id=comment.id) }}"
+                hx-confirm='{% trans obj=object %}Are you sure you want to delete "{{ obj }}"?{% endtrans %}'
+                hx-swap="outerHTML"
+                hx-target="#comment-{{ comment.id }}"
+          >
+            {% csrf_token %}
+            <button class="btn btn-red action">
+              <i class="fa fa-trash-can"></i> {% trans %}Delete{% endtrans %}
+            </button>
+          </form>
+        {% endif %}
+      </div>
+
+      <div class="comment-end-bar">
+        <div class="report">
+          <p>
+            <a
+              hx-get="{{ url('pedagogy:comment_report', comment_id=comment.id) }}"
+              hx-swap="outerHTML"
+              hx-target="#comment-{{ comment.id }}"
+            >
+              {% trans %}Report this comment{% endtrans %}
+            </a>
+          </p>
+        </div>
+
+        <div class="date"><p>{{ comment.publish_date.strftime('%d/%m/%Y') }}</p></div>
+
+        <div class="author"><p>{{ user_profile_link(comment.author) }}</p></div>
+      </div>
+
+    </div>
   {% endfor %}
 </section>

pedagogy/templates/pedagogy/ue_detail.jinja

@@ -82,9 +82,7 @@
         </div>
 
         <div id="comments">
-          {% for comment in comments %}
-            {% include "pedagogy/fragments/ue_comment.jinja" %}
-          {% endfor %}
+          {% include "pedagogy/fragments/ue_details/comments.jinja" %}
         </div>
 
       </div>