From f80248d1a281fb0206a5993bb4ee134dc7351acf Mon Sep 17 00:00:00 2001
From: imperosol <thgirod@hotmail.com>
Date: Mon, 14 Sep 2026 11:48:01 +0200
Subject: [PATCH] style: improve ue comments appearance

---
 pedagogy/static/pedagogy/css/pedagogy.scss    | 246 +++---------------
 .../fragments/ue_detail/comments.jinja        | 173 +++++++-----
 .../fragments/ue_detail/ue_detail.jinja       |  11 +-
 pedagogy/templates/pedagogy/ue_detail.jinja   |   9 +-
 4 files changed, 158 insertions(+), 281 deletions(-)

diff --git a/pedagogy/static/pedagogy/css/pedagogy.scss b/pedagogy/static/pedagogy/css/pedagogy.scss
index 04a0d8fc..b7597d17 100644
--- a/pedagogy/static/pedagogy/css/pedagogy.scss
+++ b/pedagogy/static/pedagogy/css/pedagogy.scss
@@ -1,11 +1,7 @@
 @import "core/static/core/devices";
 @import "core/static/core/colors";
 
-
-$pedagogy-blue: #1bb9ea;
 $pedagogy-orange: #ea7900;
-$pedagogy-hover-blue: #0e97ce;
-$pedagogy-light-blue: #caf0ff;
 $pedagogy-white-text: #f0f0f0;
 
 .pedagogy {
@@ -108,13 +104,6 @@ $pedagogy-white-text: #f0f0f0;
       }
     }
 
-    .leave-comment-not-allowed {
-      p {
-        text-align: center;
-        color: red;
-      }
-    }
-
     .leave-comment {
       .comment-form-content {
         display: flex;
@@ -163,216 +152,57 @@ $pedagogy-white-text: #f0f0f0;
       padding-left: 10px;
     }
 
-    .comment-container {
-      display: grid;
-      grid-template-columns: 300px auto;
-      grid-template-rows: auto auto auto;
-      grid-template-areas:
-      "grade-block comment"
-      "grade-block info"
-      "comment-end-bar comment-end-bar";
-      margin-bottom: 30px;
-      margin-top: 10px;
+    .comment {
+      padding: 15px;
+      margin: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      background: $primary-neutral-light-color;
+      border-radius: 5px;
+      border: 1px darken($secondary-neutral-light-color, 10%) solid;
 
-      @media screen and (max-width: $large-devices) {
-        grid-template-columns: auto;
-        grid-template-rows: auto auto auto auto;
-        grid-template-areas:
-        "grade-block"
-        "comment"
-        "info"
-        "comment-end-bar";
+      &.reported {
+        border: #fc8181 1px solid;
       }
 
-      .grade-block {
-        grid-area: grade-block;
-        width: 300px;
+      .comment-header {
+        display: flex;
+        gap: 20px;
 
-        display: grid;
-        grid-template-columns: 150px 150px;
-        grid-template-rows: 156px auto;
-        grid-template-areas:
-        "grade-type grade-stars"
-        "grade-extension grade-extension";
-        grid-gap: 15px;
-
-        clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30px, 270px 0);
-        align-items: start;
-
-        background-color: $pedagogy-blue;
-
-        @media screen and (max-width: $large-devices) {
-          grid-template-columns: 50% auto;
-          grid-template-rows: auto;
-          grid-template-areas: "grade-type grade-stars";
-          width: auto;
-          clip-path: none;
-          align-content: space-evenly;
-          align-items: end;
+        img {
+          width: 50px;
+          height: 50px;
+          border-radius: 50%;
         }
 
-        .grade-extension {
-          grid-area: grade-extension;
-          background-color: $pedagogy-blue;
+        .comment-metadata {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
         }
 
-        .grade-type {
-          grid-area: grade-type;
-
-          >p {
-            color: $pedagogy-white-text;
-            font-weight: bold;
-            text-align: right;
-          }
-        }
-
-        .grade-stars {
-          grid-area: grade-stars;
+        .comment-options {
+          flex: 2;
+          display: flex;
+          justify-content: right;
+          gap: 15px;
         }
       }
 
-      .comment {
-        grid-area: comment;
-
-        display: grid;
-        grid-template-columns: auto;
-        grid-template-rows: auto auto;
-        grid-template-areas:
-        "anchor"
-        "markdown";
-
-        @media screen and (max-width: $large-devices) {
-          border-left: solid;
-          border-right: solid;
-          border-color: $pedagogy-blue;
-        }
-
-        .anchor {
-          grid-area: anchor;
-          text-align: right;
-          margin-right: 15px;
-        }
-
-        .markdown {
-          grid-area: markdown;
-
-          min-height: 139px;
-          margin-top: 0;
-          margin-right: 0;
-          padding: 10px;
-          text-align: justify;
-          overflow: auto;
-        }
+      .comment-stars {
+        display: flex;
+        justify-content: space-evenly;
+        flex-wrap: wrap;
+        gap: 1em 2em;
+        padding: 1.5em;
+        border-top: 0.0625rem grey dotted;
+        border-bottom: 0.0625rem grey dotted;
       }
 
-      .info {
-        grid-area: info;
-        padding-bottom: 10px;
-
-        @media screen and (max-width: $large-devices) {
-          border-left: solid;
-          border-right: solid;
-          border-color: $pedagogy-blue;
-        }
-
-        .status-reported {
-          color: red;
-          float: left;
-          padding-left: 10px;
-        }
-
-        .action {
-          float: right;
-          margin-top: 0;
-        }
-      }
-
-      .comment-end-bar {
-        grid-area: comment-end-bar;
-
-        display: grid;
-        grid-template-columns: 33% auto auto;
-        grid-template-rows: 2.5em;
-        grid-template-areas: "author date report";
-
-        background-color: $pedagogy-blue;
-        margin-top: -1px;
-
-        @media screen and (max-width: $large-devices) {
-          grid-template-columns: auto;
-          grid-template-rows: auto auto auto;
-          grid-template-areas:
-          "report"
-          "date"
-          "author";
-          margin-top: 0;
-          text-align: center;
-        }
-
-        .author {
-          grid-area: author;
-
-          padding-top: 6px;
-          padding-left: 20px;
-
-          background-color: $pedagogy-orange;
-          clip-path: polygon(0 10px, 0 100%, 350px 200%, 300px 10px);
-
-          @media screen and (max-width: $large-devices) {
-            clip-path: none;
-            padding: 0;
-            padding-bottom: 7px;
-          }
-
-          a {
-            color: $pedagogy-white-text;
-            font-weight: bold;
-          }
-
-          a:hover {
-            color: $pedagogy-hover-blue;
-          }
-        }
-
-        .date {
-          grid-area: date;
-          color: $pedagogy-white-text;
-
-          @media screen and (max-width: $large-devices) {
-            padding-bottom: 7px;
-          }
-        }
-
-        .report {
-          grid-area: report;
-          justify-self: right;
-          padding-right: 30px;
-          padding-left: 30px;
-
-          a {
-            color: $pedagogy-white-text;
-            cursor: pointer;
-          }
-
-          a:hover {
-            color: $pedagogy-hover-blue;
-          }
-
-          @media screen and (max-width: $large-devices) {
-            text-align: center;
-            justify-self: inherit;
-            padding-bottom: 7px;
-            background-color: $white-color;
-
-            border-left: solid;
-            border-right: solid;
-            border-color: $pedagogy-blue;
-
-            a {
-              color: $black-color;
-            }
-          }
-        }
+      .comment-content {
+        text-align: justify;
+        padding: .5em 20px 1em;
       }
     }
   }
diff --git a/pedagogy/templates/pedagogy/fragments/ue_detail/comments.jinja b/pedagogy/templates/pedagogy/fragments/ue_detail/comments.jinja
index 6cf63bf3..85ca5dad 100644
--- a/pedagogy/templates/pedagogy/fragments/ue_detail/comments.jinja
+++ b/pedagogy/templates/pedagogy/fragments/ue_detail/comments.jinja
@@ -8,83 +8,122 @@
 
 <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>
+    <article
+      id="comment-{{ comment.id }}"
+      class="comment {% if comment.is_reported %}reported{% endif %}"
+    >
+      {% if comment.is_reported %}
+        <div class="alert alert-red">
+          <div class="alert-main">
+            <h5 class="alert-title margin-bottom">
+              {% trans %}This comment has been reported{% endtrans %}
+            </h5>
+            <p>{% trans %}It will be hidden until moderated.{% endtrans %}</p>
+            {% if user.has_perm("pedagogy.view_uecommentreport") %}
+              {% for report in comment.reports.all() %}
+                <div class="markdown margin-bottom">
+                  <blockquote>
+                    <em>{{ report.reporter.get_display_name() }}</em>
+                    {{ report.reason|markdown }}
+                  </blockquote>
+                </div>
+              {% endfor %}
+            {% endif %}
+          </div>
+          {% if user.has_perm("pedagogy.delete_uecomment") %}
+            <div class="alert-aside">
+              <a
+                href="{{ url("pedagogy:comment_delete", comment_id=comment.id) }}"
+                class="btn btn-red"
+              >
+                <i class="fa fa-trash"></i>{% trans %}Delete{% endtrans %}
+              </a>
+              <a href="{{ url("pedagogy:moderation") }}" class="btn btn-green">
+                <i class="fa fa-check"></i>{% trans %}Moderate{% endtrans %}
+              </a>
+            </div>
+          {% endif %}
         </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>
+      {% endif %}
+      <div class="comment-header">
+        <img
+          {% if comment.author.avatar_pict %}
+            src="{{ comment.author.avatar_pict.get_download_url() }}"
+          {% elif comment.author.profile_pict %}
+            src="{{ comment.author.profile_pict.get_download_url() }}"
+          {% else %}
+            src="{{ static("core/img/unknown.jpg") }}"
+          {% endif %}
+          alt="{% trans %}Profile{% endtrans %}"
+        />
+        <div class="comment-metadata">
+          <a href="{{ comment.author.get_absolute_url() }}">
+            <strong>{{ comment.author.get_display_name() }}</strong>
+          </a>
+          <time datetime="{{ comment.publish_date.isoformat(timespec="seconds") }}">
+            {{ comment.publish_date|localtime|date(DATETIME_FORMAT) }}
+            {{ comment.publish_date|localtime|time(DATETIME_FORMAT) }}
+          </time>
         </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>
+        <div class="comment-options">
+          {% if user.can_edit(comment) %}
             <a
+              class="clickable"
+              hx-get="{{ url('pedagogy:comment_update', comment_id=comment.id) }}"
+              hx-swap="outerHTML"
+              hx-target="#comment-{{ comment.id }}"
+              tooltip="{% trans %}Edit{% endtrans %}"
+            >
+              <i class="fa fa-pencil edit-action"></i>
+            </a>
+          {% endif %}
+          {% if not comment.is_reported %}
+            <a
+              class="clickable"
               hx-get="{{ url('pedagogy:comment_report', comment_id=comment.id) }}"
               hx-swap="outerHTML"
               hx-target="#comment-{{ comment.id }}"
+              tooltip="{% trans %}Report{% endtrans %}"
             >
-              {% trans %}Report this comment{% endtrans %}
+              <i class="fa fa-exclamation delete-action"></i>
             </a>
-          </p>
+          {% endif %}
+          {% if user.has_perm("pedagogy.delete_uecomment") %}
+            <a
+              href="{{ url("pedagogy:comment_delete", comment_id=comment.id) }}"
+              tooltip="{% trans %}Delete{% endtrans %}"
+            >
+              <i class="fa fa-trash-can delete-action"></i>
+            </a>
+          {% endif %}
+        </div>
+      </div>
+      <div class="comment-stars">
+        <div>
+          <span>{% trans %}Global grade{% endtrans %}</span>
+          <span>{{ display_star(comment.grade_global) }}</span>
+        </div>
+        <div>
+          <span>{% trans %}Utility{% endtrans %}</span>
+          <span>{{ display_star(comment.grade_utility) }}</span>
+        </div>
+        <div>
+          <span>{% trans %}Interest{% endtrans %}</span>
+          <span>{{ display_star(comment.grade_interest) }}</span>
+        </div>
+        <div>
+          <span>{% trans %}Teaching{% endtrans %}</span>
+          <span>{{ display_star(comment.grade_teaching) }}</span>
+        </div>
+        <div>
+          <span>{% trans %}Workload{% endtrans %}</span>
+          <span>{{ display_star(comment.grade_work_load) }}</span>
         </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>
+      <div class="comment-content">
+        {{ comment.comment|markdown }}
+      </div>
+    </article>
   {%- endfor -%}
 </section>
diff --git a/pedagogy/templates/pedagogy/fragments/ue_detail/ue_detail.jinja b/pedagogy/templates/pedagogy/fragments/ue_detail/ue_detail.jinja
index 5f82c6d6..8c038be9 100644
--- a/pedagogy/templates/pedagogy/fragments/ue_detail/ue_detail.jinja
+++ b/pedagogy/templates/pedagogy/fragments/ue_detail/ue_detail.jinja
@@ -1,14 +1,19 @@
 {# A few hx-partials for swapping a few parts of the main ue_detail.jinja #}
 
+{% from "pedagogy/macros.jinja" import display_star %}
+
 <hx-partial id="ue-grade">
   {% include "pedagogy/fragments/ue_detail/grade.jinja" %}
 </hx-partial>
 
 <hx-partial id="comment-form">
   {% if object.has_user_already_commented(user) %}
-    <div class="leave-comment-not-allowed">
-      <p>{% trans %}You already posted a comment on this UE. If you want to comment again, please modify or delete your previous comment.{% endtrans %}</p>
-    </div>
+    <em>
+      {% trans trimmed %}
+        You already posted a comment on this UE.
+        If you want to comment again, please modify or delete your previous comment.
+      {% endtrans %}
+    </em>
     <br>
   {% elif user.has_perm("pedagogy.add_uecomment") %}
     {{ add_comment_form }}
diff --git a/pedagogy/templates/pedagogy/ue_detail.jinja b/pedagogy/templates/pedagogy/ue_detail.jinja
index b1aeea3c..ed19657a 100644
--- a/pedagogy/templates/pedagogy/ue_detail.jinja
+++ b/pedagogy/templates/pedagogy/ue_detail.jinja
@@ -77,9 +77,12 @@
 
     <div id="comment-form">
       {% if object.has_user_already_commented(user) %}
-        <div class="leave-comment-not-allowed">
-          <p>{% trans %}You already posted a comment on this UE. If you want to comment again, please modify or delete your previous comment.{% endtrans %}</p>
-        </div>
+        <em>
+          {% trans trimmed %}
+            You already posted a comment on this UE.
+            If you want to comment again, please modify or delete your previous comment.
+          {% endtrans %}
+        </em>
         <br>
       {% elif user.has_perm("pedagogy.add_uecomment") %}
         {{ add_comment_form }}