style: improve ue detail infos appearance

pedagogy/templates/pedagogy/fragments/ue_detail/comments.jinja

@@ -7,8 +7,7 @@
 {% endif %}
 
 <section>
-  {% for comment in comments %}
-
+  {%- for comment in comments -%}
     <div id="comment-{{ comment.id }}" class="comment-container">
 
       <div class="grade-block">
@@ -54,11 +53,12 @@
           </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 }}"
+          <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">
@@ -82,10 +82,9 @@
         </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 %}
+  {%- endfor -%}
 </section>

pedagogy/templates/pedagogy/fragments/ue_detail/grade.jinja

@@ -0,0 +1,20 @@
+<div class="info-container-item">
+  <span>{% trans %}Global grade{% endtrans %}</span>
+  <span>{{ display_star(object.grade_global_average) }}</span>
+</div>
+<div class="info-container-item">
+  <span>{% trans %}Utility{% endtrans %}</span>
+  <span>{{ display_star(object.grade_utility_average) }}</span>
+</div>
+<div class="info-container-item">
+  <span>{% trans %}Interest{% endtrans %}</span>
+  <span>{{ display_star(object.grade_interest_average) }}</span>
+</div>
+<div class="info-container-item">
+  <span>{% trans %}Teaching{% endtrans %}</span>
+  <span>{{ display_star(object.grade_teaching_average) }}</span>
+</div>
+<div class="info-container-item">
+  <span>{% trans %}Workload{% endtrans %}</span>
+  <span>{{ display_star(object.grade_work_load_average) }}</span>
+</div>

pedagogy/templates/pedagogy/fragments/ue_detail/ue_detail.jinja

@@ -0,0 +1,11 @@
+<hx-partial id="ue-grade">
+  {% include "pedagogy/fragments/ue_detail/grade.jinja" %}
+</hx-partial>
+
+<hx-partial id="comment-form">
+  {% include "pedagogy/fragments/ue_detail/form.jinja" %}
+</hx-partial>
+
+<hx-partial id="comments" hx-swap="innerMorph">
+  {% include "pedagogy/fragments/ue_detail/comments.jinja" %}
+</hx-partial>

pedagogy/templates/pedagogy/fragments/ue_details/grade.jinja

@@ -1,27 +0,0 @@
-<div class="ue-details-container">
-  <div class="grade">
-    <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(object.grade_global_average) }}</p>
-    <p>{{ display_star(object.grade_utility_average) }}</p>
-    <p>{{ display_star(object.grade_interest_average) }}</p>
-    <p>{{ display_star(object.grade_teaching_average) }}</p>
-    <p>{{ display_star(object.grade_work_load_average) }}</p>
-  </div>
-  <div class="ue-infos">
-    <p><b>{% trans %}Objectives{% endtrans %}</b></p>
-    <p>{{ object.objectives|markdown }}</p>
-    <p><b>{% trans %}Program{% endtrans %}</b></p>
-    <p>{{ object.program|markdown }}</p>
-    <p><b>{% trans %}Earned skills{% endtrans %}</b></p>
-    <p>{{ object.skills|markdown }}</p>
-    <p><b>{% trans %}Key concepts{% endtrans %}</b></p>
-    <p>{{ object.key_concepts|markdown }}</p>
-    <p><b>{% trans %}UE manager: {% endtrans %}</b>{{ object.manager }}</p>
-  </div>
-</div>