Fix comment list and form UI.

Author: TontonSancho

colander/templates/comment/form.html

@@ -3,20 +3,20 @@
 
 {% if comment_form %}
   <div class="card bg-secondary-light border-secondary">
-    <div class="card-body">
+    <form method="post" action="{% url "create_comment_view" %}" class="row align-items-end g-2">
+    <div class="card-body pb-0 pt-2">
       <h6>Post new comment (supports Markdown)</h6>
-      <form method="post" action="{% url "create_comment_view" %}" class="row align-items-end g-2">
         {% csrf_token %}
-        <div class="col">
+        <div>
 {#          <small id="hint_id_content" class="form-text text-muted">Write your comment and click on save.</small>#}
           <textarea name="content" cols="20" rows="3" class="textarea form-control" required="" id="id_content"
                     data-lt-tmp-id="lt-620893" spellcheck="false" data-gramm="false"></textarea>
           <input type="hidden" value="{{ elt_id }}" name="commented_object">
         </div>
-        <div class="col-md-1 text-center">
-          <button class="btn btn-primary" type="submit">{% translate "Save" %}</button>
-        </div>
-      </form>
     </div>
+    <div class="card-footer bg-transparent border-0 m-0 small text-end">
+      <button class="btn btn-primary btn-sm" type="submit">{% translate "Save" %}</button>
+    </div>
+    </form>
   </div>
 {% endif %}

colander/templates/comment/list_item.html

@@ -25,17 +25,19 @@
     </form>
   </div>
   <div class="card-footer bg-transparent border-0 m-0 p-0 small text-muted row">
-    <div class="col fst-italic">
+    <div class="col-10 fst-italic">
       Posted {{ comment.created_at|timesince }} ago
     </div>
-    <div class="col-1 text-end btn-group mb-1" role="group">
-      <a href="#" comment-id="{{ comment.id }}" class="update-comment-btn btn btn-sm btn-primary text-white">
-        <i class="nf nf-fa-pencil"></i>
-      </a>
-      <a href="{% url "delete_comment_view" pk=comment.id %}" class="delete-comment-btn btn btn-sm btn-danger text-white"
-         is="vue:ConfirmButton">
-        <i class="nf nf-fa-trash"></i>
-      </a>
+    <div class="col-2 text-end">
+      <div class="btn-group mb-1" role="group">
+        <a href="#" comment-id="{{ comment.id }}" class="update-comment-btn btn btn-sm btn-primary text-white">
+          <i class="nf nf-fa-pencil"></i>
+        </a>
+        <a href="{% url "delete_comment_view" pk=comment.id %}" class="delete-comment-btn btn btn-sm btn-danger text-white"
+           is="vue:ConfirmButton">
+          <i class="nf nf-fa-trash"></i>
+        </a>
+      </div>
     </div>
   </div>
 </div>

colander/templates/helpers/entity_comments.html

@@ -3,14 +3,14 @@
 <div class="col-12 mt-4">
   <div class="row">
     <h5>{% translate "Comments" %}</h5>
-    <div class="col-6">
+    <div class="col-lg-6 col-md-12">
     {% for comment in entity.sorted_comments %}
       {% include "comment/list_item.html" %}
     {% empty %}
       {% translate "No comment" %}
     {% endfor %}
     </div>
-    <div class="col-6">
+    <div class="col-lg-6 col-md-12">
       {% include "comment/form.html" with elt_id=entity.id %}
     </div>
   </div>