design improvements

app/community/forms.py

@@ -71,5 +71,5 @@ class CreatePost(FlaskForm):
 
 
 class NewReplyForm(FlaskForm):
-    body = TextAreaField(_l('Body'), render_kw={'placeholder': 'What are your thoughts?', 'rows': 3})
+    body = TextAreaField(_l('Body'), render_kw={'placeholder': 'What are your thoughts?', 'rows': 3}, validators={DataRequired(), Length(min=3, max=5000)})
     submit = SubmitField(_l('Comment'))

app/community/util.py

@@ -4,7 +4,7 @@ from typing import List
 from app import db
 from app.models import Community, File, BannedInstances, PostReply
 from app.utils import get_request
-from sqlalchemy import desc
+from sqlalchemy import desc, text
 
 
 def search_for_community(address: str):
@@ -130,5 +130,5 @@ def get_comment_branch(post_id: int, comment_id: int, sort_by: str) -> List[Post
 
 # The number of replies a post has
 def post_reply_count(post_id) -> int:
-    return db.session.execute('SELECT COUNT(id) as c FROM "post_reply" WHERE post_id = :post_id',
+    return db.session.execute(text('SELECT COUNT(id) as c FROM "post_reply" WHERE post_id = :post_id'),
                               {'post_id': post_id}).scalar()

app/static/structure.css

@@ -361,6 +361,7 @@ fieldset legend {
 .post_list .post_teaser h3 {
   font-size: 120%;
   margin-top: 8px;
+  margin-bottom: 0;
 }
 .post_list .post_teaser .meta_row a, .post_list .post_teaser .main_row a, .post_list .post_teaser .utilities_row a {
   text-decoration: none;
@@ -368,6 +369,12 @@ fieldset legend {
 
 .comments > .comment {
   margin-left: 0;
+  border-top: solid 1px #bbb;
+  margin-right: 8px;
+}
+.comments > .comment:first-child {
+  border-top: none;
+  padding-top: 0;
 }
 
 #replies {
@@ -381,8 +388,9 @@ fieldset legend {
 .voting_buttons {
   float: right;
   display: block;
-  width: 60px;
+  width: 55px;
   padding: 5px;
+  padding-right: 0;
 }
 .voting_buttons div {
   border: solid 1px #0071CE;
@@ -419,7 +427,8 @@ fieldset legend {
 .comment {
   clear: both;
   margin-bottom: 20px;
-  margin-left: 20px;
+  margin-left: 15px;
+  padding-top: 8px;
 }
 .comment .limit_height {
   position: relative;
@@ -460,6 +469,7 @@ fieldset legend {
 .comment .replies {
   margin-top: 15px;
   border-left: solid 1px #ddd;
+  border-top: solid 1px #ddd;
 }
 
 .add_reply .form-control-label {

app/static/structure.scss

@@ -122,6 +122,7 @@ nav, etc which are used site-wide */
     h3 {
       font-size: 120%;
       margin-top: 8px;
+      margin-bottom: 0;
     }
 
     .meta_row, .main_row, .utilities_row {
@@ -138,6 +139,13 @@ nav, etc which are used site-wide */
 
 .comments > .comment {
   margin-left: 0;
+  border-top: solid 1px $grey;
+  margin-right: 8px;
+
+  &:first-child {
+    border-top: none;
+    padding-top: 0;
+  }
 }
 
 #replies {
@@ -151,8 +159,9 @@ nav, etc which are used site-wide */
 .voting_buttons {
   float: right;
   display: block;
-  width: 60px;
+  width: 55px;
   padding: 5px;
+  padding-right: 0;
 
   div {
     border: solid 1px $primary-colour;
@@ -197,7 +206,8 @@ nav, etc which are used site-wide */
 .comment {
   clear: both;
   margin-bottom: 20px;
-  margin-left: 20px;
+  margin-left: 15px;
+  padding-top: 8px;
 
   .limit_height {
     position: relative;
@@ -248,6 +258,7 @@ nav, etc which are used site-wide */
   .replies {
     margin-top: 15px;
     border-left: solid 1px $light-grey;
+    border-top: solid 1px $light-grey;
   }
 }
 

app/static/styles.css

@@ -378,4 +378,13 @@ nav.navbar {
   color: #777;
 }
 
+.comment_author a {
+  font-weight: bold;
+}
+
+.low_score .hide_button a, .low_score .comment_author a {
+  font-weight: normal;
+  color: #777;
+}
+
 /*# sourceMappingURL=styles.css.map */

app/static/styles.scss

@@ -141,4 +141,20 @@ nav.navbar {
   a {
     color: $dark-grey;
   }
+}
+
+.comment_author {
+  a {
+    font-weight: bold;
+  }
+}
+
+.low_score {
+  .hide_button, .comment_author {
+
+    a {
+      font-weight: normal;
+      color: $dark-grey;
+    }
+  }
 }

app/templates/community/_post_full.html

@@ -60,6 +60,5 @@
     <div class="col">
         {{ post.body_html|safe }}
     </div>
-    <hr />
 </div>
 {% endif %}

app/templates/community/_post_teaser.html

@@ -1,9 +1,6 @@
 <div class="post_teaser">
     <div class="row">
         <div class="col col-md-10">
-            <div class="row meta_row small">
-                <div class="col">{{ render_username(post.author) }} · {{ moment(post.posted_at).fromNow() }}</div>
-            </div>
             <div class="row main_row">
                 <div class="col{% if post.image_id %}-8{% endif %}">
                     <h3>
@@ -15,6 +12,7 @@
                             <span class="domain_link">(<a href="/d/{{ post.domain_id }}">{{ post.domain.name }}</a>)</span>
                         {% endif %}
                     </h3>
+                    <span class="small">{{ render_username(post.author) }} · {{ moment(post.posted_at).fromNow() }}</span>
                 </div>
                 {% if post.image_id %}
                     <div class="col-4">

app/templates/community/post.html

@@ -35,14 +35,19 @@
         <div class="row post_replies">
             <div class="col">
                 {% macro render_comment(comment) %}
-                    <div id="comment_{{ comment['comment'].id }}" class="comment">
+                    <div id="comment_{{ comment['comment'].id }}" class="comment {% if comment['comment'].score <= -10 %}low_score{% endif %}">
                         <div class="limit_height">
                             <div class="voting_buttons">
                                 {% with comment=comment['comment'] %}
                                     {% include "community/_voting_buttons.html" %}
                                 {% endwith %}
                             </div>
-                            <div class="hide_button">{% if comment['comment'].score <= -10 %}<a href='#'>[+] show</a>{% else %}<a href='#'>[-] hide</a>{% endif %}
+                            <div class="hide_button">
+                                {% if comment['comment'].score <= -10 %}
+                                    <a href='#'>[+] show</a>
+                                {% else %}
+                                    <a href='#'>[-] hide</a>
+                                {% endif %}
                             </div>
                             <div class="comment_author">
                                 {% if comment['comment'].author.deleted %}
@@ -53,8 +58,7 @@
                                         <img src="{{ comment['comment'].author.avatar_image() }}" alt="Avatar" /></a>
                                     {% endif %}
                                     <a href="/u/{{ comment['comment'].author.link() }}" title="{{ comment['comment'].author.link() }}">
-                                        {% if comment['comment'].score > -10 %}<strong>{% endif %}
+                                            {{ comment['comment'].author.user_name }}</a>
-                                            {{ comment['comment'].author.user_name }}{% if comment['comment'].score > -10 %}</strong>{% endif %}</a>
                                 {% endif %}
                                 {% if comment['comment'].author.id == post.author.id %}<span title="Submitter of original post" aria-label="submitter" class="small">[OP]</span>{% endif %}
                                 <span class="text-muted small">{{ moment(comment['comment'].posted_at).fromNow(refresh=True) }}</span>