Style comments

articles/forms.py

@@ -4,6 +4,9 @@ from articles.models import Comment
 
 
 class CommentForm(forms.ModelForm):
+    required_css_class = "required"
+    error_css_class = "error"
+
     class Meta:
         model = Comment
         fields = ["username", "email", "content"]

articles/migrations/0013_auto_20200818_1912.py

@@ -0,0 +1,21 @@
+# Generated by Django 3.1 on 2020-08-18 17:12
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("articles", "0012_auto_20200818_1845"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="comment",
+            name="content",
+            field=models.TextField(
+                help_text="Your comment, limited to 500 characters. No formatting.",
+                max_length=500,
+            ),
+        ),
+    ]

articles/models.py

@@ -105,7 +105,8 @@ class Comment(models.Model):
         ),
     )
     content = models.TextField(
-        max_length=500, help_text="Your comment, limited to 500 characters."
+        max_length=500,
+        help_text="Your comment, limited to 500 characters. No formatting.",
     )
     article = models.ForeignKey(
         Article, on_delete=models.CASCADE, related_name="comments"

articles/static/style.css

@@ -106,7 +106,7 @@ footer {
     border-top: 2px solid var(--background2);
     margin-top: 2em;
     font-size: 80%;
-    color: var(--main3)
+    color: var(--main3);
 }
 
 footer a {
@@ -140,6 +140,57 @@ tr:hover {
     vertical-align: 15%;
 }
 
+form .helptext {
+    font-size: 80%;
+    color: var(--main3);
+}
+
+form table th {
+    vertical-align: top;
+}
+
+form table tr:not(.required) th {
+    font-weight: normal;
+}
+
+form table tr {
+    border-bottom: none;
+}
+
+form {
+    background-color: var(--background2);
+    border-radius: .5ex;
+    padding: 1em;
+}
+
+form button[type=submit] {
+    font-size: 1em;
+    padding: .9ex 1.2ex;
+    border-radius: .8ex;
+    background-color: var(--accent);
+    border: none;
+    color: var(--background);
+    cursor: pointer;
+}
+
+.comment {
+    background-color: var(--background2);
+    border-radius: .5ex;
+    padding: .5em 1em;
+}
+
+.comment + .comment, .comments form {
+    margin-top: 1em;
+}
+
+.comment p {
+    margin: 0;
+}
+
+.comment .metadata {
+    color: var(--main3);
+}
+
 @media (prefers-color-scheme: dark) {
     :root {
         --accent: #226997;

articles/templates/articles/article_detail.html

@@ -13,25 +13,27 @@
     </article>
     <section class="comments">
         <h2>Comments</h2>
-        <form action="{% url 'create-comment' slug=article.slug %}" method="post">
-            {% csrf_token %}
-            {{ comment_form.as_p }}
-            <button type="submit">Submit</button>
-        </form>
         {% for comment in comments %}
             <article class="comment">
                 <p class="metadata">
-                    {{ comment.username }} |
+                    <span class="username">{{ comment.username }}</span> |
                     <time datetime="{{ comment.created_at|date:'c' }}">
                         {{ comment.created_at|date:"DATETIME_FORMAT" }}
                     </time>
                 </p>
                 <p class="content">
-                    {{ comment.content }}
+                    {{ comment.content|linebreaksbr }}
                 </p>
             </article>
         {% empty %}
             No reaction yet, write your own!
         {% endfor %}
+        <form action="{% url 'create-comment' slug=article.slug %}" method="post">
+            {% csrf_token %}
+            <table>
+                {{ comment_form.as_table }}
+            </table>
+            <button type="submit">Submit</button>
+        </form>
     </section>
 {% endblock %}