From 6d1cf9084b3938b9a3d24035a717f81d2491c8f4 Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Sat, 20 Apr 2024 07:48:48 +0200
Subject: [PATCH] feat: Add crispy forms

---
 .../static/fellchensammlung/css/styles.css     |  8 ++++++++
 .../forms/form_add_adoption.html               | 18 +++++++++++-------
 src/notfellchen/settings.py                    |  5 +++++
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/fellchensammlung/static/fellchensammlung/css/styles.css b/src/fellchensammlung/static/fellchensammlung/css/styles.css
index aebb343..2beea4b 100644
--- a/src/fellchensammlung/static/fellchensammlung/css/styles.css
+++ b/src/fellchensammlung/static/fellchensammlung/css/styles.css
@@ -366,4 +366,12 @@ h1 {
 .tags {
     margin-left: auto;
     padding: 5px;
+}
+
+form {
+    padding: 20px;
+}
+
+.form-group {
+    margin: 30px;
 }
\ No newline at end of file
diff --git a/src/fellchensammlung/templates/fellchensammlung/forms/form_add_adoption.html b/src/fellchensammlung/templates/fellchensammlung/forms/form_add_adoption.html
index 15717b0..50900e8 100644
--- a/src/fellchensammlung/templates/fellchensammlung/forms/form_add_adoption.html
+++ b/src/fellchensammlung/templates/fellchensammlung/forms/form_add_adoption.html
@@ -1,15 +1,19 @@
 {% extends "fellchensammlung/base_generic.html" %}
 {% load i18n %}
+{% load crispy_forms_tags %}
 
 {% block content %}
-  <h1>{% translate "Vermitteln" %}</h1>
-    {% blocktranslate %}
-    Bitte mach dich zunächst mit unseren Regeln vertraut. Dann trage hier die ersten Informationen ein.
-    Du bekommst in einem weiteren Schritt die Möglichkeit einzelne Tiere zu deiner Vermittlung hinzuzufügen und Fotos hochzuladen.
-    {% endblocktranslate %}
-    <form method = "post" enctype="multipart/form-data">
+    <h1>{% translate "Vermitteln" %}</h1>
+    <p>
+        {% blocktranslate %}
+            Bitte mach dich zunächst mit unseren Regeln vertraut. Dann trage hier die ersten Informationen ein.
+            Du bekommst in einem weiteren Schritt die Möglichkeit einzelne Tiere zu deiner Vermittlung hinzuzufügen und
+            Fotos hochzuladen.
+            </p>
+        {% endblocktranslate %}
+    <form method="post" class="card" enctype="multipart/form-data">
         {% csrf_token %}
-        {{ form.as_p }}
+        {{ form | crispy}}
         <button type="submit">{% translate "Weiter" %}</button>
     </form>
 {% endblock %}
\ No newline at end of file
diff --git a/src/notfellchen/settings.py b/src/notfellchen/settings.py
index 15eb508..bdfb07f 100644
--- a/src/notfellchen/settings.py
+++ b/src/notfellchen/settings.py
@@ -144,6 +144,8 @@ INSTALLED_APPS = [
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'fontawesomefree',
+    'crispy_forms',
+    "crispy_bootstrap4",
 ]
 
 MIDDLEWARE = [
@@ -240,6 +242,9 @@ LANGUAGES = (
     ('de', _('German')),
 )
 
+CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap4"
+CRISPY_TEMPLATE_PACK = 'bootstrap4'
+
 # Default primary key field type
 # https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field