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>

pedagogy/templates/pedagogy/macros.jinja

@@ -1,5 +1,4 @@
 {% macro display_star(grade) -%}
-
   {% if grade >= 0 %}
     {% for i in range(5) %}
       {% if i <= grade %}
@@ -8,9 +7,7 @@
         <span class="fa-solid fa-star pedagogy star-not-checked grade-with-star"></span>
       {% endif %}
     {% endfor %}
-    <span class="pedagogy grade-without-star">{{ grade }}/5</span>
   {% else %}
     <span class="grade-text"> {% trans %} not rated {% endtrans %} </span>
   {% endif %}
-
 {%- endmacro %}

pedagogy/templates/pedagogy/ue_detail.jinja

@@ -1,91 +1,87 @@
+{% extends "core/base.jinja" %}
 {% from "pedagogy/macros.jinja" import display_star %}
 
-{% if is_fragment %}
 
-  <hx-partial id="ue-grade">
-    {% include "pedagogy/fragments/ue_details/grade.jinja" %}
-  </hx-partial>
+{% block additional_css %}
+  <link rel="stylesheet" href="{{ static('pedagogy/css/pedagogy.scss') }}">
+{% endblock %}
 
-  <hx-partial id="comment-form">
-    {% include "pedagogy/fragments/ue_details/form.jinja" %}
-  </hx-partial>
+{% block title %}
+  {% trans %}UE Details{% endtrans %}
+{% endblock %}
 
-  <hx-partial id="comments" hx-swap="innerMorph">
-    {% include "pedagogy/fragments/ue_details/comments.jinja" %}
-  </hx-partial>
-
-{% else %}
-  {% extends "core/base.jinja" %}
-
-  {% block additional_css %}
-    <link rel="stylesheet" href="{{ static('pedagogy/css/pedagogy.scss') }}">
-  {% endblock %}
-
-  {% block title %}
-    {% trans %}UE Details{% endtrans %}
-  {% endblock %}
-
-  {% block content %}
-
-    <div class="pedagogy">
-      <div id="ue_detail">
-        <button onclick='(function(){
-                         // If comes from the guide page, go back with history
-                         if (document.referrer.replace(/\?(.+)/gm,"").endsWith(`{{ url("pedagogy:guide") }}`)){
-                         window.history.back();
-                         return;
-                         }
-                         // Simply goes to the guide page
-                         window.location.href = `{{ url("pedagogy:guide") }}`;
-                         })()' hidden>{% trans %}Back{% endtrans %}</button>
-
-        <h1>{{ object.code }} - {{ object.title }}</h1>
-        <br>
-        <div class="ue-quick-info-container">
-          <div class="hours-cm">
-            <b>{% trans %}CM: {% endtrans %}</b>{{ object.hours_CM }}
+{% block content %}
+  <h1>{{ object.code }}</h1>
+  <h2 class="margin-bottom">{{ object.title }}</h2>
+  <div class="pedagogy" id="ue_detail">
+    <div class="ue-infos">
+      <div class="infos-column">
+        <aside class="info-container">
+          <div class="info-container-item">
+            <div>{% trans %}Category{% endtrans %}</div>
+            <div>{{ object.credit_type }}</div>
           </div>
-          <div class="hours-td">
-            <b>{% trans %}TD: {% endtrans %}</b>{{ object.hours_TD }}
+          <div class="info-container-item">
+            <div>{% trans %}Credits{% endtrans %}</div>
+            <div>{{ object.credits }}</div>
           </div>
-          <div class="hours-tp">
-            <b>{% trans %}TP: {% endtrans %}</b>{{ object.hours_TP }}
+          <hr>
+          <div class="info-container-item">
+            <div>Cours magistraux</div>
+            <div>{{ object.hours_CM }}h</div>
           </div>
-          <div class="hours-te">
-            <b>{% trans %}TE: {% endtrans %}</b>{{ object.hours_TE }}
+          <div class="info-container-item">
+            <div>Travaux dirigés</div>
+            <div>{{ object.hours_TD }}h</div>
           </div>
-          <div class="hours-the">
-            <b>{% trans %}THE: {% endtrans %}</b>{{ object.hours_THE }}
+          <div class="info-container-item">
+            <div>Travaux pratiques</div>
+            <div>{{ object.hours_TP }}h</div>
           </div>
-
-          <div class="department">
-            {{ object.department }}
+          <div class="info-container-item">
+            <div>Travail hors encadrement</div>
+            <div>{{ object.hours_THE }}h</div>
           </div>
-          <div class="credit-type">
-            {{ object.credit_type }}
+          <div class="info-container-item">
+            <div>Cours magistraux</div>
+            <div>{{ object.hours_TE }}h</div>
           </div>
-          <div class="semester">
-            {{ object.get_semester_display() }}
+          <hr>
+          <div class="info-container-item">
+            <div>{% trans %}Availability{% endtrans %}</div>
+            <div>{{ object.get_semester_display() }}</div>
           </div>
-        </div>
-
-        <br>
-
-        <div id="ue-grade">
-          {% include "pedagogy/fragments/ue_details/grade.jinja" %}
-        </div>
-
-        <br>
-
-        <div id="comment-form">
-          {% include "pedagogy/fragments/ue_details/form.jinja" %}
-        </div>
-
-        <div id="comments">
-          {% include "pedagogy/fragments/ue_details/comments.jinja" %}
-        </div>
-
+          <hr>
+          <div class="info-container-item">
+            <div>{% trans %}Manager{% endtrans %}</div>
+            <div>{{ object.manager }}</div>
+          </div>
+        </aside>
+        <aside class="info-container" id="ue-grade">
+          {% include "pedagogy/fragments/ue_detail/grade.jinja" %}
+        </aside>
       </div>
+      <section class="ue-main-infos">
+        <h3>{% trans %}Objectives{% endtrans %}</h3>
+        <p>{{ object.objectives|markdown }}</p>
+        <h3>{% trans %}Program{% endtrans %}</h3>
+        <p>{{ object.program|markdown }}</p>
+        <h3>{% trans %}Earned skills{% endtrans %}</h3>
+        <p>{{ object.skills|markdown }}</p>
+        <h3>{% trans %}Key concepts{% endtrans %}</h3>
+        <p>{{ object.key_concepts|markdown }}</p>
+      </section>
     </div>
-  {% endblock %}
-{% endif %}
+
+
+    <br>
+
+    <div id="comment-form">
+      {% include "pedagogy/fragments/ue_detail/form.jinja" %}
+    </div>
+
+    <div id="comments">
+      {% include "pedagogy/fragments/ue_detail/comments.jinja" %}
+    </div>
+  </div>
+{% endblock %}