From 93c9a87a68d10105e022b56293709c5e40f15a6b Mon Sep 17 00:00:00 2001
From: Gabriel Augendre <gabriel@augendre.info>
Date: Thu, 20 Aug 2020 08:31:52 +0200
Subject: [PATCH] Add style for form as p

---
 articles/static/style.css                     | 21 ++++++++++++++++---
 .../templates/articles/article_detail.html    |  6 +++---
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/articles/static/style.css b/articles/static/style.css
index b14f2de..db622bd 100644
--- a/articles/static/style.css
+++ b/articles/static/style.css
@@ -140,15 +140,25 @@ tr:hover {
     vertical-align: 15%;
 }
 
+form p .helptext::before {
+    content: "\A";
+    white-space: pre;
+}
+
 .helptext {
     color: var(--main3);
     font-size: 80%;
+    font-weight: normal;
 }
 
 .helptext a {
     color: var(--main3);
 }
 
+form .required {
+    font-weight: bold;
+}
+
 form table th {
     vertical-align: top;
 }
@@ -167,6 +177,10 @@ form {
     padding: 1em;
 }
 
+form, form p {
+    line-height: normal;
+}
+
 form button[type=submit] {
     font-size: 1em;
     padding: .9ex 1.2ex;
@@ -177,7 +191,7 @@ form button[type=submit] {
     cursor: pointer;
 }
 
-form table tr.error, form table tr.error .helptext, .errorlist {
+form .error, form .error .helptext, .errorlist {
     color: var(--error-text);
     background-color: var(--error-background);
 }
@@ -186,10 +200,11 @@ form table tr.error, form table tr.error .helptext, .errorlist {
     margin-top: 0;
     list-style-type: none;
     padding-left: 0;
+    margin-bottom: 0;
 }
 
-.errorlist.nonfield {
-    margin-bottom: 0;
+.errorlist + .error {
+    margin-top: 0;
 }
 
 .comment {
diff --git a/articles/templates/articles/article_detail.html b/articles/templates/articles/article_detail.html
index caa74b9..703ffec 100644
--- a/articles/templates/articles/article_detail.html
+++ b/articles/templates/articles/article_detail.html
@@ -31,9 +31,9 @@
         {% endfor %}
         <form id="comment-form" action="{% url 'create-comment' slug=article.slug %}" method="post">
             {% csrf_token %}
-            <table>
-                {{ form.as_table }}
-            </table>
+{#            <table>#}
+                {{ form.as_p }}
+{#            </table>#}
             <button type="submit">Submit</button>
             <p class="helptext">
                 Your comment may not be approved if it's not respectful, on topic or spammy.