From bdfa7b731ca22b4c5c4b76ea6d61fdbf7a9538ad Mon Sep 17 00:00:00 2001
From: Gabriel Augendre <gabriel@augendre.info>
Date: Tue, 18 Aug 2020 20:44:51 +0200
Subject: [PATCH] Implement messages framework

---
 articles/static/style.css                     | 55 ++++++++++++++++---
 .../templates/articles/article_detail.html    |  8 ++-
 articles/templates/articles/base.html         |  2 +-
 articles/views/html.py                        |  8 ++-
 4 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/articles/static/style.css b/articles/static/style.css
index 82bb89d..b14f2de 100644
--- a/articles/static/style.css
+++ b/articles/static/style.css
@@ -6,6 +6,12 @@
     --background: #ffffff;
     --background2: #f7f7f7;
     --background3: #d0d0d0;
+    --success-background: #d4edda;
+    --success-text: #155724;
+    --error-background: #f8d7da;
+    --error-text: #721c24;
+    --warning-background: #fff3cd;
+    --warning-text: #856404;
 }
 
 html {
@@ -40,12 +46,6 @@ a {
     border-bottom: .3ex solid var(--accent);
 }
 
-a:hover, a:focus {
-    text-decoration: none;
-    background-color: var(--accent);
-    color: var(--background);
-}
-
 .article-list h2 a {
     border-color: transparent;
 }
@@ -140,8 +140,12 @@ tr:hover {
     vertical-align: 15%;
 }
 
-form .helptext {
+.helptext {
+    color: var(--main3);
     font-size: 80%;
+}
+
+.helptext a {
     color: var(--main3);
 }
 
@@ -173,8 +177,9 @@ form button[type=submit] {
     cursor: pointer;
 }
 
-form table tr.error, .errorlist {
-    color: red;
+form table tr.error, form table tr.error .helptext, .errorlist {
+    color: var(--error-text);
+    background-color: var(--error-background);
 }
 
 .errorlist {
@@ -205,6 +210,32 @@ form table tr.error, .errorlist {
     color: var(--main3);
 }
 
+.messages p {
+    background-color: var(--background2);
+    padding: .5ex 1ex;
+}
+
+.messages .error {
+    background-color: var(--error-background);
+    color: var(--error-text);
+}
+
+.messages .success {
+    background-color: var(--success-background);
+    color: var(--success-text);
+}
+
+.messages .warning {
+    background-color: var(--warning-background);
+    color: var(--warning-text);
+}
+
+a:hover, a:focus {
+    text-decoration: none;
+    background-color: var(--accent);
+    color: var(--background);
+}
+
 @media (prefers-color-scheme: dark) {
     :root {
         --accent: #226997;
@@ -213,6 +244,12 @@ form table tr.error, .errorlist {
         --main3: #b1b1b1;
         --background: #111111;
         --background2: #282828;
+        --success-background: #155724;
+        --success-text: #d4edda;
+        --error-background: #721c24;
+        --error-text: #f8d7da;
+        --warning-background: #856404;
+        --warning-text: #fff3cd;
     }
 
     img {
diff --git a/articles/templates/articles/article_detail.html b/articles/templates/articles/article_detail.html
index 9b0f2d5..38e28fc 100644
--- a/articles/templates/articles/article_detail.html
+++ b/articles/templates/articles/article_detail.html
@@ -19,7 +19,8 @@
                     <span class="username">{{ comment.username }}</span> |
                     <time datetime="{{ comment.created_at|date:'c' }}">
                         {{ comment.created_at|date:"DATETIME_FORMAT" }}
-                    </time> {% include "articles/admin_link_snippet.html" with article=comment %}
+                    </time>
+                    {% include "articles/admin_link_snippet.html" with article=comment %}
                 </p>
                 <p class="content">
                     {{ comment.content|linebreaksbr }}
@@ -34,6 +35,11 @@
                 {{ form.as_table }}
             </table>
             <button type="submit">Submit</button>
+            <p class="helptext">
+                Your comment may be removed if it's not respectful, on topic or spammy.
+                If you feel I've made a mistake with your comment, please
+                <a href="/about-me/">send me a message</a>!
+            </p>
         </form>
     </section>
 {% endblock %}
diff --git a/articles/templates/articles/base.html b/articles/templates/articles/base.html
index a5fa43a..40a7850 100644
--- a/articles/templates/articles/base.html
+++ b/articles/templates/articles/base.html
@@ -31,7 +31,7 @@
 {% if messages %}
     <div class="messages">
         {% for message in messages %}
-            <p>{{ message }}</p>
+            <p class="{{ message.level_tag }}">{{ message|safe }}</p>
         {% endfor %}
     </div>
 {% endif %}
diff --git a/articles/views/html.py b/articles/views/html.py
index 49497d4..d392682 100644
--- a/articles/views/html.py
+++ b/articles/views/html.py
@@ -75,7 +75,8 @@ class ArticleDetailView(FormMixin, generic.DetailView):
 
     def form_invalid(self, form):
         messages.error(
-            self.request, "Your comment couldn't be saved, see the form below."
+            self.request,
+            'Your comment couldn\'t be saved, see <a href="#comment-form">the form below</a>.',
         )
         return super().form_invalid(form)
 
@@ -83,7 +84,10 @@ class ArticleDetailView(FormMixin, generic.DetailView):
         comment = form.save(commit=False)
         comment.article = self.object
         comment.save()
-        messages.success(self.request, "Comment successfully saved.")
+        messages.success(
+            self.request,
+            f'Comment successfully saved, you can check it <a href="#{comment.id}">below</a>.',
+        )
         return super().form_valid(form)
 
     def get_success_url(self):