Implement messages framework

This commit is contained in:
Gabriel Augendre 2020-08-18 20:44:51 +02:00
parent 2bb8855da9
commit bdfa7b731c
4 changed files with 60 additions and 13 deletions

View file

@ -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 {

View file

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

View file

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

View file

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