Implement messages framework

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 {
+form table tr.error, form table tr.error .helptext, .errorlist {
-    color: red;
+    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 {

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 %}

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 %}

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):