style: improve ue detail infos appearance

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

@@ -0,0 +1,90 @@
+{% from "pedagogy/macros.jinja" import display_star %}
+{% from "core/macros.jinja" import user_profile_link %}
+
+{% if comments %}
+  <h2>{% trans %}Comments{% endtrans %}</h2>
+  <br>
+{% endif %}
+
+<section>
+  {%- for comment in comments -%}
+    <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>