feat: Style comment field

src/fellchensammlung/forms.py

@@ -40,7 +40,6 @@ class AdoptionNoticeForm(forms.ModelForm):
         fields = ['name', "group_only", "further_information", "description", "searching_since"]
 
 
-
 class ImageForm(forms.ModelForm):
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
@@ -59,11 +58,19 @@ class ReportForm(forms.ModelForm):
         model = Report
         fields = ('reported_broken_rules', 'comment')
 
+
 class CommentForm(forms.ModelForm):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.helper = FormHelper()
+        self.helper.form_class = 'form-comments'
+        self.helper.add_input(Submit('submit', _('Kommentieren')))
+
     class Meta:
         model = Comment
         fields = ('text',)
 
+
 class ModerationActionForm(forms.ModelForm):
     class Meta:
         model = ModerationAction

src/fellchensammlung/static/fellchensammlung/css/styles.css

@@ -84,7 +84,7 @@ h1, h2 {
     border-radius: 4px;
 }
 
-.header a, form {
+.header a, .header form {
     float: left;
     padding: 5px 12px 5px 12px;
     line-height: 25px;
@@ -383,12 +383,10 @@ h1, h2 {
     padding: 5px;
 }
 
-form {
-    padding: 20px;
-}
-
-.form-group {
-    margin: 30px;
+#form-adoption-notice {
+    .form-group {
+        margin: 30px;
+    }
 }
 
 .detail-adoption-notice-header h1 {
@@ -427,4 +425,21 @@ form {
     padding: 5px;
     background: var(--background-three);
     color: var(--text-two);
+}
+
+.container-comment-form {
+    width: 80%;
+    color: var(--text-one);
+}
+
+textarea {
+    border-radius: 10px;
+    width: 100%;
+    margin: 5px;
+}
+
+.form-comments {
+    .btn {
+        margin: 5px;
+    }
 }

src/fellchensammlung/templates/fellchensammlung/forms/form-comment.html

@@ -1,7 +1,13 @@
 {% load i18n %}
+{% load crispy_forms_tags %}
+<div class="container-comment-form">
+    <p>
+        <b>
+            {% blocktrans %}
+                Als {{ user }} kommentieren
+            {% endblocktrans %}
+        </b>
 
-<form method="post" enctype="multipart/form-data">
-    {% csrf_token %}
-    {{ comment_form.as_p }}
-    <button class="button-report" type="submit">{% translate "Kommentieren" %}</button>
-</form>
+        {% crispy comment_form %}
+    </p>
+</div>

src/fellchensammlung/views.py

@@ -57,7 +57,7 @@ def adoption_notice_detail(request, adoption_notice_id):
             raise PermissionDenied
     else:
         comment_form = CommentForm(instance=adoption_notice)
-    context = {"adoption_notice": adoption_notice, "comment_form": comment_form}
+    context = {"adoption_notice": adoption_notice, "comment_form": comment_form, "user": request.user}
     return render(request, 'fellchensammlung/details/detail_adoption_notice.html', context=context)