From 63a41918b5c9b5c18986f392810d20419688f594 Mon Sep 17 00:00:00 2001 From: Gabriel Augendre Date: Tue, 18 Aug 2020 19:12:47 +0200 Subject: [PATCH] Style comments --- articles/forms.py | 3 ++ .../migrations/0013_auto_20200818_1912.py | 21 ++++++++ articles/models.py | 3 +- articles/static/style.css | 53 ++++++++++++++++++- .../templates/articles/article_detail.html | 16 +++--- 5 files changed, 87 insertions(+), 9 deletions(-) create mode 100644 articles/migrations/0013_auto_20200818_1912.py diff --git a/articles/forms.py b/articles/forms.py index 01e56f0..9d8877b 100644 --- a/articles/forms.py +++ b/articles/forms.py @@ -4,6 +4,9 @@ from articles.models import Comment class CommentForm(forms.ModelForm): + required_css_class = "required" + error_css_class = "error" + class Meta: model = Comment fields = ["username", "email", "content"] diff --git a/articles/migrations/0013_auto_20200818_1912.py b/articles/migrations/0013_auto_20200818_1912.py new file mode 100644 index 0000000..e42f9f7 --- /dev/null +++ b/articles/migrations/0013_auto_20200818_1912.py @@ -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, + ), + ), + ] diff --git a/articles/models.py b/articles/models.py index b64953a..936c374 100644 --- a/articles/models.py +++ b/articles/models.py @@ -105,7 +105,8 @@ class Comment(models.Model): ), ) 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, on_delete=models.CASCADE, related_name="comments" diff --git a/articles/static/style.css b/articles/static/style.css index 2535c22..3b66fbc 100644 --- a/articles/static/style.css +++ b/articles/static/style.css @@ -106,7 +106,7 @@ footer { border-top: 2px solid var(--background2); margin-top: 2em; font-size: 80%; - color: var(--main3) + color: var(--main3); } footer a { @@ -140,6 +140,57 @@ tr:hover { 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) { :root { --accent: #226997; diff --git a/articles/templates/articles/article_detail.html b/articles/templates/articles/article_detail.html index a7b3af1..172aba2 100644 --- a/articles/templates/articles/article_detail.html +++ b/articles/templates/articles/article_detail.html @@ -13,25 +13,27 @@

Comments

-
- {% csrf_token %} - {{ comment_form.as_p }} - -
{% for comment in comments %}

- {{ comment.content }} + {{ comment.content|linebreaksbr }}

{% empty %} No reaction yet, write your own! {% endfor %} +
+ {% csrf_token %} + + {{ comment_form.as_table }} +
+ +
{% endblock %}