UI: adapt forms

6 files changed, 78 insertions, 26 deletions

diff --git a/ishtar_common/templates/blocks/bs_form_snippet.html b/ishtar_common/templates/blocks/bs_form_snippet.html
new file mode 100644
index 000000000..8aa6a5333
--- /dev/null
+++ b/ishtar_common/templates/blocks/bs_form_snippet.html
@@ -0,0 +1,40 @@
+{% load i18n %}
+{% if form.non_field_errors %}
+<div class="alert alert-danger" role="alert">
+    {{form.non_field_errors}}
+</div>
+{%endif%}
+
+{% for field in form %}
+{% if not field.is_hidden %}
+{% if forloop.counter0|divisibleby:2 %}
+{% if forloop.counter0 %}
+  </div>{% endif %}
+  <div class="form-row">
+{% endif %}
+    <div class="form-group col-lg-6">
+      {{ field.label_tag }}
+      {{field|safe}}
+      {% if field.errors %}<div class="invalid-feedback">
+        {{ field.errors }}
+      </div>{% endif %}
+      {% if field.help_text %}
+      <small><a data-toggle="collapse" href="#{{field.auto_id}}_help"
+         aria-expanded="false" aria-controls="{{field.auto_id}}_help">
+          {% trans 'help'%}</a></small>
+      <div class="collapse" id="{{field.auto_id}}_help">
+          <div class="card card-body">
+            {{field.help_text}}
+          </div>
+      </div>
+      {% endif %}
+    </div>
+{% else %}{{field}}
+{% if field.errors %}<div class="invalid-feedback">
+    {{ field.errors }}
+</div>{% endif %}
+{% endif %}
+{% if forloop.counter0.last%}
+  </div>
+{% endif %}
+{% endfor %}
diff --git a/ishtar_common/templates/blocks/form_snippet.html b/ishtar_common/templates/blocks/table_form_snippet.html
index 5ee88e25f..5ee88e25f 100644
--- a/ishtar_common/templates/blocks/form_snippet.html
+++ b/ishtar_common/templates/blocks/table_form_snippet.html
diff --git a/ishtar_common/templates/ishtar/blocks/wizard_breadcrumb.html b/ishtar_common/templates/ishtar/blocks/wizard_breadcrumb.html
new file mode 100644
index 000000000..79bca71f1
--- /dev/null
+++ b/ishtar_common/templates/ishtar/blocks/wizard_breadcrumb.html
@@ -0,0 +1,21 @@
+<form action="." method="post">{% csrf_token %}
+    <nav aria-label="breadcrumb" role="navigation">
+        <ol class="breadcrumb">
+            {% for step in previous_steps %}
+            <li class="breadcrumb-item">
+                <button class='change_step' name="form_prev_step"
+                        value="{{forloop.counter0}}">{{step}}</button>
+            </li>
+            {% endfor %}
+            <li class="breadcrumb-item active">
+                <a href='#'>{{current_step_label}}</a>
+            </li>
+            {% for step in next_steps %}
+            <li class="breadcrumb-item">
+                <button class='change_step' name="form_prev_step"
+                        value="{{forloop.counter|add:previous_step_counter}}">{{step}}</button>
+            </li>
+            {% endfor %}
+        </ol>
+    </nav>
+</form>
diff --git a/ishtar_common/templates/ishtar/wizard/confirm_wizard.html b/ishtar_common/templates/ishtar/wizard/confirm_wizard.html
index 7339af9a8..034d6e21a 100644
--- a/ishtar_common/templates/ishtar/wizard/confirm_wizard.html
+++ b/ishtar_common/templates/ishtar/wizard/confirm_wizard.html
@@ -3,14 +3,9 @@
 {% load range %}
 {% block content %}
 <h2>{{wizard_label}}</h2>
-<form action="." method="post">{% csrf_token %}
-<ul id='form_path'>
-{% for step in previous_steps %}
-  <li><button name="form_prev_step" value="{{forloop.counter0}}">{{step}}</button></li>
-{% endfor %}
-  <li class='current'><a href='#'>{{current_step_label}}</a></li>
-</ul>
-</form>
+
+{% include "ishtar/blocks/wizard_breadcrumb.html" %}
+
 <form action="." method="post">{% csrf_token %}
 <div class='form'>
   {% block "warning_informations" %}{% endblock %}
diff --git a/ishtar_common/templates/ishtar/wizard/default_wizard.html b/ishtar_common/templates/ishtar/wizard/default_wizard.html
index 19076b0de..06e8be05a 100644
--- a/ishtar_common/templates/ishtar/wizard/default_wizard.html
+++ b/ishtar_common/templates/ishtar/wizard/default_wizard.html
@@ -6,17 +6,9 @@
 {% block content %}
 {% block wizard_head %}
 <h2>{{wizard_label}}</h2>
-<form action="." method="post">{% csrf_token %}
-<ul id='form_path'>
-{% for step in previous_steps %}
-  <li><button class='change_step' name="form_prev_step" value="{{forloop.counter0}}">{{step}}</button></li>
-{% endfor %}
-  <li class='current'><a href='#'>{{current_step_label}}</a></li>
-{% for step in next_steps %}
-  <li><button class='change_step' name="form_prev_step" value="{{forloop.counter|add:previous_step_counter}}">{{step}}</button></li>
-{% endfor %}
-</ul>
-</form>
+
+{% include "ishtar/blocks/wizard_breadcrumb.html" %}
+
 {% endblock %}
 {% block wizard_form %}
 <form action="." method="post" name='wizard'{% if wizard.form.file_upload %} enctype="multipart/form-data"{% endif %}>{% csrf_token %}
@@ -31,14 +23,12 @@
 <table class='formset'>
   {%if wizard.form.non_form_errors%}<tr class='error'><th colspan='2'>{{wizard.form.non_form_errors}}</th></tr>{%endif%}
   {% for formsetform in wizard.form.forms %}
-  {% table_form formsetform %}
+  {% bs_form formsetform %}
   {% endfor %}
   <tr class='modify'><td colspan="2"><button name="formset_modify" value="{{wizard.steps.current}}">{% trans "Add/Modify" %}</button></td></tr></li>
 </table>
 {% else %}
-{% if not is_search %}<table>{% endif %}
-{% table_form wizard.form %}
-{% if not is_search %}</table>{% endif %}
+  {% bs_form wizard.form %}
 {% endif %}
 {% endblock %}
 <input type="hidden" name="{{ step_field }}" value="{{ step0 }}" />
diff --git a/ishtar_common/templates/ishtar/wizard/search.html b/ishtar_common/templates/ishtar/wizard/search.html
index e5066cf87..89ce860d4 100644
--- a/ishtar_common/templates/ishtar/wizard/search.html
+++ b/ishtar_common/templates/ishtar/wizard/search.html
@@ -5,9 +5,15 @@
 {% endblock %}
 {% block content %}
 <h2>{{wizard_label}}</h2>
-<ul id='form_path'>
-  <li class='current'><a href='#'>{{current_step.form_label}}</a></li>
-</ul>
+
+<nav aria-label="breadcrumb" role="navigation">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item active">
+      <a href='#'>{{current_step.form_label}}</a>
+    </li>
+  </ol>
+</nav>
+
 {% if wizard.form.forms %}
 <div class='form'>
 <div class='top_button'><input type="submit" id="submit_form" value="{% trans "Validate" %}"/></div>