update design for bill_update

fet2020/templates/finance/bill_update.html

@@ -6,38 +6,79 @@
 <!-- Main Content -->
 <main class="container mx-auto w-full px-4 my-8 flex-1">
     <h1 class="page-title">Rechnung {{ object.pk }}</h1>
-    <div class="w-full h-full flex-1 flex justify-center items-center">
+
-        <form action="" enctype="multipart/form-data" method="POST" class="w-full max-w-xs sm:max-w-prose sm:px-28 sm:py-4 grid grid-cols-1 gap-y-3 sm:gap-y-6 text-gray-900">
+    <form action="" enctype="multipart/form-data" method="POST" class="multiSectionForm max-w-2xl">
         {% csrf_token %}
         {% include "baseform/non_field_errors.html" %}
 
-            {% include "baseform/select.html" with field=form.bill_creator %}
+        <section>
-
+            <h2>Bankdaten</h2>
-            <hr>
+            <small>Angaben zu den Bankdaten für die Rückerstattung des Rechnungsbetrags.</small>
-            <span class="text-gray-700 dark:text-gray-200">Bankdaten</span>
 
+            <div class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-6">
+                <div class="sm:col-span-3">
                     {% include "baseform/select.html" with field=form.payer %}
+                </div>
+
                 {% if form.name_text.value %}
+                    <div class="sm:col-span-4">
                         {% include "baseform/text.html" with field=form.name_text %}
+                    </div>
                 {% endif %}
                 {% if form.iban_text.value %}
+                    <div class="sm:col-span-3">
                         {% include "baseform/text.html" with field=form.iban_text %}
+                    </div>
                 {% endif %}
                 {% if form.bic_text.value %}
+                    <div class="sm:col-span-3">
                         {% include "baseform/text.html" with field=form.bic_text %}
+                    </div>
                 {% endif %}
+            </div>
+        </section>
+        <section>
+            <h2>Rechnungsdetails</h2>
+            <small>Details zur ursprünglichen bereits bezahlten Rechnung angeben.</small>
 
-            <hr>
+            <div class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-6">
-            <span class="text-gray-700 dark:text-gray-200">Rechnung</span>
+                <div class="sm:col-span-4">
-            
-            {% include "baseform/text.html" with field=form.date %}
                     {% include "baseform/textarea.html" with field=form.invoice %}
+                </div>
+                <div class="col-span-full">
                     {% include "baseform/text.html" with field=form.purpose %}
-            {% include "baseform/text.html" with field=form.amount %}
+                </div>
+                <div class="sm:col-span-3">
+                    {% include "baseform/date.html" with field=form.date %}
+                </div>
+                <div class="sm:col-span-2">
+                    <label>
+                        <span class="text-gray-700 dark:text-gray-200">{{ form.amount.label }}</span>
+                        {% if form.amount.errors %}
+                            <div class="alert alert-danger">
+                                <div class="alert-body">{{ form.amount.errors }}</div>
+                            </div>
+                        {% endif %}
+                        <input
+                            type="number"
+                            name="amount"
+                            value={{ form.amount.value }}
+                            required
+                            disabled
+                            min="0.00"
+                            step="0.01"
+                            placeholder="123,99"
+                            class="mt-1 block w-full rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50"
+                        >
+                    </label>
+                </div>
 
                 {% if form.file_field.value %}
+                <div class="col-span-full">
                     {% include "baseform/checkbox.html" with field=form.only_digital %}
+                </div>
 
+                <div class="col-span-full">
                     <label>
                         <span class="text-gray-700 dark:text-gray-200">Derzeit:</span>
 
@@ -46,25 +87,44 @@
                             class="text-gray-700 dark:text-gray-200 block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50"
                         >{{ form.file_field.value }}</a>
                     </label>
+                </div>
                 {% else %}
+                <div class="col-span-full">
+
                     <span class="text-gray-700 dark:text-gray-200">Keine digitale Rechnung eingereicht.</span>
+                </div>
                 {% endif %}
 
-            <hr>
+            </div>
-            <span class="text-gray-700 dark:text-gray-200">Beschlusslage</span>
+        </section>
+        <section>
+            <h2>Beschlusslage</h2>
+            <small>Informationen zur Beschlusslage dieser Rechnung.</small>
 
+            <div class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-6">
+                <div class="sm:col-span-3">
                     {% include "baseform/select.html" with field=form.affiliation %}
+                </div>
                 {% if form.resolution_text.value %}
+                <div class="sm:col-span-3">
                     {% include "baseform/text.html" with field=form.resolution_text %}
+                </div>
                 {% endif %}
+            </div>
+        </section>
+        <section>
+            <h2>Kommentar</h2>
+            <small>Erfordert etwas zusätzlichen Erklärungsbedarf oder sollen nachträglich Informationen bearbeitet werden?</small>
 
-            <hr>
+            <div class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-6">
+                <div class="col-span-full">
                     {% include "baseform/textarea.html" with field=form.comment %}
-
-            <div class="flex flex-col-reverse sm:flex-row gap-3 justify-end pt-4 sm:pt-0">
-                <input type="submit" class="block btn btn-primary" value="Speichern">
                 </div>
+            </div>
+        </section>
+        <section class="flex justify-end">
+            <button type="submit" class="btn btn-primary w-full sm:w-auto" value="Speichern">Änderung speichern</button>
+        </section>
     </form>
-    </div>
 </main>
 {% endblock %}