Style comments

This commit is contained in:
Gabriel Augendre 2020-08-18 19:12:47 +02:00
parent 698a5ca30f
commit 63a41918b5
5 changed files with 87 additions and 9 deletions

View file

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

View file

@ -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,
),
),
]

View file

@ -105,7 +105,8 @@ class Comment(models.Model):
), ),
) )
content = models.TextField( 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 = models.ForeignKey(
Article, on_delete=models.CASCADE, related_name="comments" Article, on_delete=models.CASCADE, related_name="comments"

View file

@ -106,7 +106,7 @@ footer {
border-top: 2px solid var(--background2); border-top: 2px solid var(--background2);
margin-top: 2em; margin-top: 2em;
font-size: 80%; font-size: 80%;
color: var(--main3) color: var(--main3);
} }
footer a { footer a {
@ -140,6 +140,57 @@ tr:hover {
vertical-align: 15%; 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) { @media (prefers-color-scheme: dark) {
:root { :root {
--accent: #226997; --accent: #226997;

View file

@ -13,25 +13,27 @@
</article> </article>
<section class="comments"> <section class="comments">
<h2>Comments</h2> <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 %} {% for comment in comments %}
<article class="comment"> <article class="comment">
<p class="metadata"> <p class="metadata">
{{ comment.username }} | <span class="username">{{ comment.username }}</span> |
<time datetime="{{ comment.created_at|date:'c' }}"> <time datetime="{{ comment.created_at|date:'c' }}">
{{ comment.created_at|date:"DATETIME_FORMAT" }} {{ comment.created_at|date:"DATETIME_FORMAT" }}
</time> </time>
</p> </p>
<p class="content"> <p class="content">
{{ comment.content }} {{ comment.content|linebreaksbr }}
</p> </p>
</article> </article>
{% empty %} {% empty %}
No reaction yet, write your own! No reaction yet, write your own!
{% endfor %} {% 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> </section>
{% endblock %} {% endblock %}