style: improve ue detail infos appearance

pedagogy/static/pedagogy/css/pedagogy.scss

@@ -9,44 +9,18 @@ $pedagogy-light-blue: #caf0ff;
 $pedagogy-white-text: #f0f0f0;
 
 .pedagogy {
-  &.star-not-checked {
+  .star-not-checked {
-    color: #f7f7f7;
+    color: lightgray;
     margin-bottom: 0;
     margin-top: 0;
   }
 
-  &.star-checked {
+  .star-checked {
     color: $pedagogy-orange;
     margin-bottom: 0;
     margin-top: 0;
   }
 
-  &.grade-without-star {
-    display: none;
-  }
-
-  @media screen and (max-width: $large-devices) {
-    &.star-not-checked {
-      margin-left: 5px;
-      margin-right: 5px;
-    }
-
-    &.star-checked {
-      margin-left: 5px;
-      margin-right: 5px;
-    }
-  }
-
-  @media screen and (max-width: $small-devices) {
-    &.grade-without-star {
-      display: block;
-    }
-
-    &.grade-with-star {
-      display: none;
-    }
-  }
-
   #ue-list {
     font-size: 1.1em;
 
@@ -64,12 +38,10 @@ $pedagogy-white-text: #f0f0f0;
   }
 
   #search_form {
-
     .radio-guide fieldset {
       input[type="checkbox"] {
         display: none;
       }
-
       margin-top: 10px;
       margin-bottom: 0;
       color: white;
@@ -85,58 +57,65 @@ $pedagogy-white-text: #f0f0f0;
     }
   }
 
-  #ue_detail {
+  &#ue_detail {
-    color: #062f38;
+    .ue-infos {
-
+      display: flex;
-    .ue-quick-info-container {
+      gap: 2em;
+      flex-direction: row;
+      @media screen and (max-width: 700px) {
+        flex-direction: column;
+      }
+    }
+    .infos-column {
+      display: flex;
+      flex-direction: column;
+      gap: 1em;
+      min-width: 300px;
+    }
+    .info-container {
+      // Darken the background color just enough to make this part
+      // stand out a little, while not being too perceptible
+      background: darken($white-color, 1%);
       display: grid;
-      grid-template-columns: 20% 20% 20% 20% auto;
+      grid-template-columns: 1fr 1fr;
-      grid-template-rows: auto auto;
+      border-radius: 5px;
-      grid-template-areas:
+      padding: .75rem 1rem ;
-      "hours-cm hours-td hours-tp hours-te hours-the"
+      grid-gap: .5rem;
-      "department credit-type semester . .";
+      @include shadow;
+
+      .info-container-item {
+        display: grid;
+        grid-column: span 2;
+        grid-template-rows: subgrid;
+        grid-template-columns: subgrid;
+        grid-column-gap: 1rem;
+
+        div {
+          display: flex;
+          align-items: center;
+        }
+
+        :first-child {
+          justify-content: right;
+          text-align: right;
+        }
+      }
+
+      hr {
+        grid-column: span 2;
+        width: 50%;
+        margin: auto;
+      }
     }
 
-    .department {
+    #leave_comment_not_allowed {
-      grid-area: department;
-    }
-
-    .credit-type {
-      grid-area: credit-type;
-    }
-
-    .semester {
-      grid-area: semester;
-    }
-
-    .hours-cm {
-      grid-area: hours-cm;
-    }
-
-    .hours-td {
-      grid-area: hours-td;
-    }
-
-    .hours-tp {
-      grid-area: hours-tp;
-    }
-
-    .hours-te {
-      grid-area: hours-te;
-    }
-
-    .hours-the {
-      grid-area: hours-the;
-    }
-
-    .leave-comment-not-allowed {
       p {
         text-align: center;
         color: red;
       }
     }
 
-    .leave-comment {
+    #leave_comment {
       .leave-comment-grid-container {
         display: grid;
         grid-template-columns: 270px auto;
@@ -171,42 +150,6 @@ $pedagogy-white-text: #f0f0f0;
       }
     }
 
-    .ue-details-container {
-      display: grid;
-      grid-template-columns: 150px 130px auto;
-      grid-template-rows: 156px 1fr;
-      grid-template-areas:
-      "grade grade-stars ue-infos"
-      ". . ue-infos";
-
-      @media screen and (max-width: $large-devices) {
-        grid-template-columns: 50% 50%;
-        grid-template-rows: auto auto;
-        grid-template-areas:
-        "grade grade-stars"
-        "ue-infos ue-infos";
-      }
-    }
-
-    .grade {
-      grid-area: grade;
-      color: $pedagogy-white-text;
-      background-color: $pedagogy-blue;
-      padding-right: 10px;
-
-      >p {
-        text-align: right;
-        font-weight: bold;
-      }
-    }
-
-    .grade-stars {
-      grid-area: grade-stars;
-      color: $pedagogy-white-text;
-      background-color: $pedagogy-blue;
-      font-weight: bold;
-    }
-
     .ue-infos {
       grid-area: ue-infos;
       padding-left: 10px;

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"
+          <form
-                hx-post="{{ url('pedagogy:comment_delete', comment_id=comment.id) }}"
+            class="action"
-                hx-confirm='{% trans obj=object %}Are you sure you want to delete "{{ obj }}"?{% endtrans %}'
+            hx-post="{{ url('pedagogy:comment_delete', comment_id=comment.id) }}"
-                hx-swap="outerHTML"
+            hx-confirm='{% trans obj=object %}Are you sure you want to delete "{{ obj }}"?{% endtrans %}'
-                hx-target="#comment-{{ comment.id }}"
+            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">
+{% block additional_css %}
-    {% include "pedagogy/fragments/ue_details/grade.jinja" %}
+  <link rel="stylesheet" href="{{ static('pedagogy/css/pedagogy.scss') }}">
-  </hx-partial>
+{% endblock %}
 
-  <hx-partial id="comment-form">
+{% block title %}
-    {% include "pedagogy/fragments/ue_details/form.jinja" %}
+  {% trans %}UE Details{% endtrans %}
-  </hx-partial>
+{% endblock %}
 
-  <hx-partial id="comments" hx-swap="innerMorph">
+{% block content %}
-    {% include "pedagogy/fragments/ue_details/comments.jinja" %}
+  <h1>{{ object.code }}</h1>
-  </hx-partial>
+  <h2 class="margin-bottom">{{ object.title }}</h2>
-
+  <div class="pedagogy" id="ue_detail">
-{% else %}
+    <div class="ue-infos">
-  {% extends "core/base.jinja" %}
+      <div class="infos-column">
-
+        <aside class="info-container">
-  {% block additional_css %}
+          <div class="info-container-item">
-    <link rel="stylesheet" href="{{ static('pedagogy/css/pedagogy.scss') }}">
+            <div>{% trans %}Category{% endtrans %}</div>
-  {% endblock %}
+            <div>{{ object.credit_type }}</div>
-
-  {% 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 }}
           </div>
-          <div class="hours-td">
+          <div class="info-container-item">
-            <b>{% trans %}TD: {% endtrans %}</b>{{ object.hours_TD }}
+            <div>{% trans %}Credits{% endtrans %}</div>
+            <div>{{ object.credits }}</div>
           </div>
-          <div class="hours-tp">
+          <hr>
-            <b>{% trans %}TP: {% endtrans %}</b>{{ object.hours_TP }}
+          <div class="info-container-item">
+            <div>Cours magistraux</div>
+            <div>{{ object.hours_CM }}h</div>
           </div>
-          <div class="hours-te">
+          <div class="info-container-item">
-            <b>{% trans %}TE: {% endtrans %}</b>{{ object.hours_TE }}
+            <div>Travaux dirigés</div>
+            <div>{{ object.hours_TD }}h</div>
           </div>
-          <div class="hours-the">
+          <div class="info-container-item">
-            <b>{% trans %}THE: {% endtrans %}</b>{{ object.hours_THE }}
+            <div>Travaux pratiques</div>
+            <div>{{ object.hours_TP }}h</div>
           </div>
-
+          <div class="info-container-item">
-          <div class="department">
+            <div>Travail hors encadrement</div>
-            {{ object.department }}
+            <div>{{ object.hours_THE }}h</div>
           </div>
-          <div class="credit-type">
+          <div class="info-container-item">
-            {{ object.credit_type }}
+            <div>Cours magistraux</div>
+            <div>{{ object.hours_TE }}h</div>
           </div>
-          <div class="semester">
+          <hr>
-            {{ object.get_semester_display() }}
+          <div class="info-container-item">
+            <div>{% trans %}Availability{% endtrans %}</div>
+            <div>{{ object.get_semester_display() }}</div>
           </div>
-        </div>
+          <hr>
-
+          <div class="info-container-item">
-        <br>
+            <div>{% trans %}Manager{% endtrans %}</div>
-
+            <div>{{ object.manager }}</div>
-        <div id="ue-grade">
+          </div>
-          {% include "pedagogy/fragments/ue_details/grade.jinja" %}
+        </aside>
-        </div>
+        <aside class="info-container" id="ue-grade">
-
+          {% include "pedagogy/fragments/ue_detail/grade.jinja" %}
-        <br>
+        </aside>
-
-        <div id="comment-form">
-          {% include "pedagogy/fragments/ue_details/form.jinja" %}
-        </div>
-
-        <div id="comments">
-          {% include "pedagogy/fragments/ue_details/comments.jinja" %}
-        </div>
-
       </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 %}

pedagogy/views.py

@@ -88,16 +88,19 @@ class UEDetailView(
 
     model = UE
     pk_url_kwarg = "ue_id"
-    template_name = "pedagogy/ue_detail.jinja"
     permission_required = "pedagogy.view_ue"
-    fragments = {
+    fragments = {"add_comment_form": UECommentCreateView}
-        "add_comment_form": UECommentCreateView,
+
-    }
+    def get_template_names(self) -> list[str]:
+        is_fragment = self.request.headers.get("HX-Request", False)
+        return (
+            ["pedagogy/fragments/ue_detail/ue_detail.jinja"]
+            if is_fragment
+            else ["pedagogy/ue_detail.jinja"]
+        )
 
     def get_fragment_data(self):
-        return {
+        return {"add_comment_form": {"ue_id": self.object.id}}
-            "add_comment_form": {"ue_id": self.object.id},
-        }
 
     def get_context_data(self, **kwargs):
         return super().get_context_data(**kwargs) | {