style: improve ue comment form appearance

core/static/core/accordion.scss

@@ -42,6 +42,7 @@ details.accordion>.accordion-content {
   background: #ffffff;
   color: #333333;
   padding: 1em 2.2em;
+  margin-top: 0;
   border: 1px solid #dddddd;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;

pedagogy/static/pedagogy/css/pedagogy.scss

@@ -108,36 +108,35 @@ $pedagogy-white-text: #f0f0f0;
       }
     }
 
-    #leave_comment_not_allowed {
+    .leave-comment-not-allowed {
       p {
         text-align: center;
         color: red;
       }
     }
 
-    #leave_comment {
-      .leave-comment-grid-container {
-        display: grid;
-        grid-template-columns: 270px auto;
-        grid-template-rows: 100%;
-        grid-template-areas: "stars comment";
+    .leave-comment {
+      .comment-form-content {
+        display: flex;
+        gap: 2em;
 
         @media screen and (max-width: $large-devices) {
-          grid-template-columns: 100%;
-          grid-template-rows: auto auto;
-          grid-template-areas:
-          "stars"
-          "comment";
+          gap: 1em;
+          flex-direction: column;
         }
-
       }
-
       .form-stars {
-        grid-area: stars;
+        flex: 0;
+        min-width: 250px;
+        display: flex;
+        align-content: flex-start;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 1rem 2em;
+        height: unset;
       }
-
       .form-comment {
-        grid-area: comment;
+        flex: 2;
       }
 
       .ui-accordion-header-icon {
@@ -145,8 +144,17 @@ $pedagogy-white-text: #f0f0f0;
         margin-right: 10px;
       }
 
-      .input-stars {
-        margin-top: 20px;
+      input[type="submit"] {
+        display: block;
+        margin-left: auto;
+      }
+
+      summary {
+        background: $pedagogy-orange;
+        color: $pedagogy-white-text;
+        @media screen and (min-width: $large-devices) {
+          clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0);
+        }
       }
     }
 
@@ -370,23 +378,6 @@ $pedagogy-white-text: #f0f0f0;
   }
 }
 
-details.accordion summary {
-
-  background: $pedagogy-orange !important;
-  color: $pedagogy-white-text !important;
-  clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0);
-
-  @media screen and (max-width: $large-devices) {
-    clip-path: none;
-  }
-}
-
-details.accordion>.accordion-content {
-  background-color: $white-color;
-  border-color: $pedagogy-orange;
-  border-right: none;
-}
-
 .buttons {
   display: flex;
   justify-content: flex-end;

pedagogy/templates/pedagogy/fragments/ue_comment_form.jinja

@@ -11,44 +11,39 @@
     hx-disabled-elt="find input[type='submit']"
   >
     {% csrf_token %}
-    <div class="leave-comment-grid-container">
+    {{ form.non_field_errors() }}
+    {{ form.author.errors }}
+    {{ form.ue.errors }}
+
+    {{ form.author }}
+    {{ form.ue }}
+    <div class="comment-form-content">
       <div class="form-stars">
-        {{ form.non_field_errors() }}
-        {{ form.author.errors }}
-        {{ form.ue.errors }}
-
-        {{ form.author }}
-        {{ form.ue }}
-
-        <div class="input-stars">
-          <label for="{{ form.grade_global.id_for_label }}">{{ form.grade_global.label }} :</label>
+        <fieldset>
+          <legend>{{ form.grade_global.label }} :</legend>
           {{ form.grade_global.errors }}
           {{ form.grade_global }}
-        </div>
-
-        <div class="input-stars">
-          <label for="{{ form.grade_utility.id_for_label }}">{{ form.grade_utility.label }} :</label>
+        </fieldset>
+        <fieldset>
+          <legend>{{ form.grade_utility.label }} :</legend>
           {{ form.grade_utility.errors }}
           {{ form.grade_utility }}
-        </div>
-
-        <div class="input-stars">
-          <label for="{{ form.grade_interest.id_for_label }}">{{ form.grade_interest.label }} :</label>
+        </fieldset>
+        <fieldset>
+          <legend>{{ form.grade_interest.label }} :</legend>
           {{ form.grade_interest.errors }}
           {{ form.grade_interest }}
-        </div>
-
-        <div class="input-stars">
-          <label for="{{ form.grade_teaching.id_for_label }}">{{ form.grade_teaching.label }} :</label>
+        </fieldset>
+        <fieldset>
+          <legend>{{ form.grade_teaching.label }} :</legend>
           {{ form.grade_teaching.errors }}
           {{ form.grade_teaching }}
-        </div>
-
-        <div class="input-stars">
-          <label for="{{ form.grade_work_load.id_for_label }}">{{ form.grade_work_load.label }} :</label>
+        </fieldset>
+        <fieldset>
+          <legend>{{ form.grade_work_load.label }} :</legend>
           {{ form.grade_work_load.errors }}
           {{ form.grade_work_load }}
-        </div>
+        </fieldset>
       </div>
       <div class="form-comment">
         <label for="{{ form.comment.id_for_label }}">{{ form.comment.label }} :</label>
@@ -56,9 +51,7 @@
         {{ form.comment }}
       </div>
     </div>
-    <div class="buttons">
-      <input type="submit" value="{% trans %}Comment{% endtrans %}" />
-    </div>
+    <p><input type="submit" class="btn btn-blue"/></p>
   </form>
 
   {% if form.is_creation %}

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

@@ -1,10 +0,0 @@
-{% 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>
-  <br>
-{% endif %}
-
-{% if not object.has_user_already_commented(user) and user.has_perm("pedagogy.add_uecomment") %}
-  {{ add_comment_form }}
-{% endif %}

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

@@ -1,9 +1,18 @@
+{# A few hx-partials for swapping a few parts of the main ue_detail.jinja #}
+
 <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" %}
+  {% 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>
+    <br>
+  {% elif user.has_perm("pedagogy.add_uecomment") %}
+    {{ add_comment_form }}
+  {% endif %}
 </hx-partial>
 
 <hx-partial id="comments" hx-swap="innerMorph">

pedagogy/templates/pedagogy/ue_detail.jinja

@@ -73,11 +73,17 @@
       </section>
     </div>
 
-
     <br>
 
     <div id="comment-form">
-      {% include "pedagogy/fragments/ue_detail/form.jinja" %}
+      {% 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>
+        <br>
+      {% elif user.has_perm("pedagogy.add_uecomment") %}
+        {{ add_comment_form }}
+      {% endif %}
     </div>
 
     <div id="comments">