From 536b4634eb275332d2932983e451b85809554438 Mon Sep 17 00:00:00 2001
From: CruiseDevice
Date: Fri, 24 Apr 2020 20:46:53 +0530
Subject: Improve post comments UI

---
 yaksh/static/yaksh/css/custom.css        |  4 +++
 yaksh/templates/yaksh/post_comments.html | 55 +++++++++++++++++---------------
 2 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/yaksh/static/yaksh/css/custom.css b/yaksh/static/yaksh/css/custom.css
index 6687c4b..3979e3e 100644
--- a/yaksh/static/yaksh/css/custom.css
+++ b/yaksh/static/yaksh/css/custom.css
@@ -113,4 +113,8 @@ body, .dropdown-menu {
 .post_image, .comment_image {
     width: 50%;
     height: 50%;
+}
+
+.description {
+    font-size: 16px;
 }
\ No newline at end of file
diff --git a/yaksh/templates/yaksh/post_comments.html b/yaksh/templates/yaksh/post_comments.html
index 97d6eec..57dbe26 100644
--- a/yaksh/templates/yaksh/post_comments.html
+++ b/yaksh/templates/yaksh/post_comments.html
@@ -10,11 +10,11 @@
         <a class="btn btn-primary" href="{% url "yaksh:course_forum" post.course.id %}">Back to Posts</a>
         <br>
         <br>
-        <div class="card">
-            <div class="card-header">
-                <h3>{{post.title}}</h3>
+        <div class="card mb-2 border-dark">
+            <div class="card-header text-white bg-dark py-2 px-3">
+                {{post.title}}
                 <br>
-                <small>
+                <small class="">
                     <strong>{{post.creator.username}}</strong>
                     {{post.created_at|naturaltime}}
                     {% if user.profile.is_moderator %}<a href="{% url "yaksh:hide_post" post.course.id post.uid %}" class="pull-right btn btn-danger">Delete</a>{% endif %}
@@ -22,36 +22,39 @@
 
             </div>
             <div class="card-body">
-                <div>{{post.description}}</div>
+                <p class="description">{{post.description}}</p>
                 {% if post.image %}
                     <a href="{{post.image.url}}" target="_blank">
-                        <img src="{{post.image.url}}" class="post_image" alt="">
+                        <center><img src="{{post.image.url}}" class="post_image thumbnail" alt=""></center>
                     </a>
                 {% endif %}
             </div>
         </div>
         <br>
-        <div class="card">
-            {% if comments %}
-                <div class="card-header">Comments:</div>
-                {% for comment in comments %}
-                    <div class="card-body">
-                        {% if comment.image %}
-                            <a href="{{comment.image.url}}" target="_blank">
-                                <img src="{{comment.image.url}}" class='comment_image'>
-                            </a>
-                        {% endif %}
-                        <div>{{comment.description}}</div>
-                        <small class="pull-right">
-                            by: <strong>{{comment.creator.username}} </strong>. {{comment.created_at|naturaltime}}
-                            {% if user.profile.is_moderator %}<a href="{% url "yaksh:hide_comment" post.course.id comment.uid %}" class="btn btn-danger">Delete</a>{% endif %}
-                        </small>
+        {% if comments %}
+            {% for comment in comments %}
+                <div class="card mb-2">
+                    <div class="card-body p-3">
+                        <div class="row mb-3">
+                            <div class="col-6">
+                                <strong class="text-muted">{{comment.creator.username}}</strong>
+                            </div>
+                            <div class="col-6 text-right">
+                                <small class="text-muted">{{comment.created_at}} {% if user.profile.is_moderator %} <a href="{% url "yaksh:hide_comment" post.course.id comment.uid %}" class="btn btn-danger">Delete</a>{% endif %}</small>
+                            </div>
+                        </div>
+                        <p class="description">{{comment.description}}</p>
+                        <div>
+                            {% if comment.image %}
+                                <a href="{{comment.image.url}}" target="_blank">
+                                    <center><img src="{{comment.image.url}}" class="comment_image thumbnail" alt=""></center>
+                                </a>
+                            {% endif %}
+                        </div>
                     </div>
-                {% endfor %}
-            {% else %}
-                    No comments on this post.
-            {% endif %}
-        </div>
+                </div>
+            {% endfor %}
+        {% endif %}
         <br>
         <div>
             <form action="{% url "yaksh:post_comments" post.course.id post.uid %}" method="POST" enctype='multipart/form-data'>
-- 
cgit