Improve form person layout

1 files changed, 80 insertions, 51 deletions

diff --git a/ishtar_common/templates/ishtar/wizard/wizard_person.html b/ishtar_common/templates/ishtar/wizard/wizard_person.html
index 85bbfc75e..072528c0b 100644
--- a/ishtar_common/templates/ishtar/wizard/wizard_person.html
+++ b/ishtar_common/templates/ishtar/wizard/wizard_person.html
@@ -1,59 +1,88 @@
 {% extends "ishtar/wizard/default_wizard.html" %}
 {% load i18n range table_form %}
 {% block form_detail %}
+{% if form.non_field_errors %}
+<div class="alert alert-danger" role="alert">
+  {{form.non_field_errors}}
+</div>
+{% endif %}
 
-<table class='formset'>
-  <caption>{% trans "Identity" %}</caption>
-  {% table_field wizard.form.title %}
-  {% table_field wizard.form.surname 1 %}
-  {% table_field wizard.form.name 1 %}
-  {% table_field wizard.form.raw_name %}
-  {% table_field wizard.form.email %}
-  {% table_field wizard.form.attached_to %}
-</table>
+{% for hidden in form.hidden_fields %}
+{{hidden}}
+{% if hidden.errors %}<div class="invalid-feedback">
+  {{ hidden.errors }}
+</div>{% endif %}
+{% endfor %}
 
-<hr class='spacer'/>
-<table class='formset table-form'>
-  <caption>{% trans "Phone" %}</caption>
-  <tr>
-    <th>{% trans "Phone type" %}</th>
-    <th>{% trans "Number" %}</th>
-  </tr>
-  <tr>
-    <td>{{ wizard.form.phone_desc.errors }}{{wizard.form.phone_desc|safe}}</td>
-    <td>{{ wizard.form.phone.errors }}{{wizard.form.phone|safe}}</td>
-  </tr>
-  <tr>
-    <td>{{ wizard.form.phone_desc2.errors }}{{wizard.form.phone_desc2|safe}}</td>
-    <td>{{ wizard.form.phone2.errors }}{{wizard.form.phone2|safe}}</td>
-  </tr>
-  <tr>
-    <td>{{ wizard.form.phone_desc3.errors }}{{wizard.form.phone_desc3|safe}}</td>
-    <td>{{ wizard.form.phone3.errors }}{{wizard.form.phone3|safe}}</td>
-  </tr>
-  <tr>
-    <td>{% trans "Mobile phone" %}</td>
-    <td>{{ wizard.form.mobile_phone.errors }}{{wizard.form.mobile_phone|safe}}</td>
-  </tr>
-</table>
-<hr class='spacer'/>
+<div class="card">
+  <div class="card-header">
+    {% trans "Identity" %}
+  </div>
+  <div class="card-body form-row">
+    {% bs_field wizard.form.title %}
+    {% bs_field wizard.form.surname 1 %}
+    {% bs_field wizard.form.name 1 %}
+    {% bs_field wizard.form.raw_name %}
+    {% bs_field wizard.form.email %}
+    {% bs_field wizard.form.attached_to %}
+  </div>
+</div>
 
-<table class='formset'>
-  <caption>{% trans "Business address" %}</caption>
-  {% table_field wizard.form.address %}
-  {% table_field wizard.form.address_complement %}
-  {% table_field wizard.form.postal_code %}
-  {% table_field wizard.form.town %}
-  {% table_field wizard.form.country %}
-</table>
-<hr class='spacer'/>
-<table class='formset'>
-  <caption>{% trans "Other address" %}</caption>
-  {% table_field wizard.form.alt_address 0 'Address' %}
-  {% table_field wizard.form.alt_address_complement 0 'Address complement' %}
-  {% table_field wizard.form.alt_postal_code 0 'Postal code' %}
-  {% table_field wizard.form.alt_town 0 'Town' %}
-  {% table_field wizard.form.alt_country 0 'Country' %}
-</table>
+<div class="card">
+  <div class="card-header">
+    {% trans "Phone" %}
+  </div>
+  <div class="card-body form-row">
+    <table class='table table-striped'>
+      <tr>
+        <th>{% trans "Phone type" %}</th>
+        <th>{% trans "Number" %}</th>
+      </tr>
+      <tr>
+        <td>{{ wizard.form.phone_desc.errors }}{{wizard.form.phone_desc|safe}}</td>
+        <td>{{ wizard.form.phone.errors }}{{wizard.form.phone|safe}}</td>
+      </tr>
+      <tr>
+        <td>{{ wizard.form.phone_desc2.errors }}{{wizard.form.phone_desc2|safe}}</td>
+        <td>{{ wizard.form.phone2.errors }}{{wizard.form.phone2|safe}}</td>
+      </tr>
+      <tr>
+        <td>{{ wizard.form.phone_desc3.errors }}{{wizard.form.phone_desc3|safe}}</td>
+        <td>{{ wizard.form.phone3.errors }}{{wizard.form.phone3|safe}}</td>
+      </tr>
+      <tr>
+        <td>{% trans "Mobile phone" %}</td>
+        <td>{{ wizard.form.mobile_phone.errors }}{{wizard.form.mobile_phone|safe}}</td>
+      </tr>
+    </table>
+  </div>
+</div>
+
+
+<div class="card">
+  <div class="card-header">
+    {% trans "Business address" %}
+  </div>
+  <div class="card-body form-row">
+  {% bs_field wizard.form.address %}
+  {% bs_field wizard.form.address_complement %}
+  {% bs_field wizard.form.postal_code %}
+  {% bs_field wizard.form.town %}
+  {% bs_field wizard.form.country %}
+  </div>
+</div>
+
+<div class="card">
+  <div class="card-header">
+    {% trans "Other address" %}
+  </div>
+  <div class="card-body form-row">
+  {% bs_field wizard.form.alt_address 0 'Address' %}
+  {% bs_field wizard.form.alt_address_complement 0 'Address complement' %}
+  {% bs_field wizard.form.alt_postal_code 0 'Postal code' %}
+  {% bs_field wizard.form.alt_town 0 'Town' %}
+  {% bs_field wizard.form.alt_country 0 'Country' %}
+  </div>
+</div>
 
 {% endblock %}