styled discussion area after adding date and minimised space occupied…

… by comments (#340)

Approved  by @sammy1997 and @sakshi1499. Reviewed by @poojithansl and @vaibhavi24.

systers_portal/static/css/style.css

@@ -584,6 +584,15 @@ table.decoration-none  tr a {
   padding-top: 25px;
 }
 
+.glyphicon {
+  float: right;
+  color: black;
+}
+
+.glyphicon-pencil {
+  right: 10px;
+}
+
 .map-container {
   height:400px;
   padding-right: 15px;
@@ -606,6 +615,7 @@ table.decoration-none  tr a {
   word-wrap: break-word;
   margin-bottom: 40px;
 }
+
 /* Commentbox CSS
 ------------------------------------------------- */
 .comment-box{
@@ -615,6 +625,20 @@ table.decoration-none  tr a {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 1.0em;
   line-height: 1.0em;
+}
+
+.edit .delete {
+    background-color: #fff;
+    color: black;
+    padding: 10px;
+    border: none;
+    cursor: pointer;
+    float: right;
+}
+
+.commentbox .details{
+  text-decoration: none;
+
 /*  webkit-text-size-adjust: 100%;*/
 }
 

systers_portal/templates/meetup/meetup.html

@@ -48,15 +48,16 @@ <h3>Discussion Area</h3>
     </div>
   {% endif %}
   {% for comment in comments %}
-    <div class="box-container pt25">
-      <a href="{{ comment.author.get_absolute_url }}">{{ comment.author}}</a>
-      <div class="box-body">
-        <pre class="comment-box">{{ comment.body }}</pre>
-      </div>
+    <div class="box-container pt25 commentbox">
+      <a href="{{ comment.author.get_absolute_url }}"><strong>{{ comment.author}}</strong></a>
+      <a class="details">commented on {{ comment.date_created}}</a>
       {% if user == comment.author.user %}
-        <a href="{% url 'edit_meetup_comment' meetup_location.slug meetup.slug comment.id %}">edit</a>
-        <a href="{% url 'delete_meetup_comment' meetup_location.slug meetup.slug comment.id %}">delete</a>
+           <a class="delete" href="{% url 'delete_meetup_comment' meetup_location.slug meetup.slug comment.id %}"><span class="glyphicon glyphicon-trash"></span></a>
+           <a class="edit" href="{% url 'edit_meetup_comment' meetup_location.slug meetup.slug comment.id %}"><span class="glyphicon glyphicon-pencil"></span></a>
       {% endif %}
+        <div class="box-body">
+        <p>{{ comment.body }}</p>
+      </div>
     </div>
   {% endfor %}
 {% endblock %}

systers_portal/templates/meetup/support_request.html

@@ -38,15 +38,16 @@ <h3>Discussion Area</h3>
     </div>
   {% endif %}
   {% for comment in comments %}
-    <div class="box-container pt25">
-      <a href="{{ comment.author.get_absolute_url }}">{{ comment.author}}</a>
-      <div class="box-body">
-        <pre class="comment-box">{{ comment.body }}</pre>
-      </div>
+    <div class="box-container pt25 commentbox">
+      <a href="{{ comment.author.get_absolute_url }}"><strong>{{ comment.author}}</strong></a>
+      <a class="details">commented on {{ comment.date_created}}</a>
       {% if user == comment.author.user %}
-        <a href="{% url 'edit_support_request_comment' meetup_location.slug meetup.slug support_request.pk comment.id %}">edit</a>
-        <a href="{% url 'delete_support_request_comment' meetup_location.slug meetup.slug support_request.pk comment.id %}">delete</a>
+           <a class="delete" href="{% url 'delete_meetup_comment' meetup_location.slug meetup.slug comment.id %}"><span class="glyphicon glyphicon-trash"></span></a>
+           <a class="edit" href="{% url 'edit_meetup_comment' meetup_location.slug meetup.slug comment.id %}"><span class="glyphicon glyphicon-pencil"></span></a>
       {% endif %}
+        <div class="box-body">
+        <p>{{ comment.body }}</p>
+      </div>
     </div>
   {% endfor %}
-{% endblock %}
+{% endblock %}