From 0caeba897e75ddaad6c551b9085087a8e1e72449 Mon Sep 17 00:00:00 2001
From: Étienne Loks <etienne.loks@iggdrasil.net>
Date: Thu, 9 Nov 2017 18:01:38 +0100
Subject: UI: adapt forms

---
 .../templates/blocks/bs_form_snippet.html          | 40 ++++++++++++++++++++++
 ishtar_common/templates/blocks/form_snippet.html   | 16 ---------
 .../templates/blocks/table_form_snippet.html       | 16 +++++++++
 .../templates/ishtar/blocks/wizard_breadcrumb.html | 21 ++++++++++++
 .../templates/ishtar/wizard/confirm_wizard.html    | 11 ++----
 .../templates/ishtar/wizard/default_wizard.html    | 20 +++--------
 ishtar_common/templates/ishtar/wizard/search.html  | 12 +++++--
 7 files changed, 94 insertions(+), 42 deletions(-)
 create mode 100644 ishtar_common/templates/blocks/bs_form_snippet.html
 delete mode 100644 ishtar_common/templates/blocks/form_snippet.html
 create mode 100644 ishtar_common/templates/blocks/table_form_snippet.html
 create mode 100644 ishtar_common/templates/ishtar/blocks/wizard_breadcrumb.html

(limited to 'ishtar_common/templates')

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/form_snippet.html
deleted file mode 100644
index 5ee88e25f..000000000
--- a/ishtar_common/templates/blocks/form_snippet.html
+++ /dev/null
@@ -1,16 +0,0 @@
-{% load i18n %}
-  {% if form.non_field_errors %}<tr class='errors'>
-    <td colspan='3'>{{form.non_field_errors}}</td>
-  </tr>{%endif%}
-  {% for field in form %}{% if not field.is_hidden %}
-  <tr{% if field.field.required %} class='required'{% endif %}>
-    <th>{{ field.label_tag }}</th>
-    <td> {{ field.errors }}{{field|safe}}</td>{% if field.help_text %}
-    <td><a href="#{{field.auto_id}}" class="help_display" title="{% trans "Help"%}">?</a></td>
-  </tr>
-  <tr class="help_text" id="{{field.auto_id}}_help">
-    <td colspan="3"><div>{{field.help_text}}</div></td>
-  {%endif%}</tr>{% else %}{{field}}{% if field.errors %}
- <tr class='errors'>
-    <td colspan='3'>{{field.name}} - {{ field.errors }}</td>
-  </tr>{% endif %}{{field|safe}}{% endif %}{% endfor %}
diff --git a/ishtar_common/templates/blocks/table_form_snippet.html b/ishtar_common/templates/blocks/table_form_snippet.html
new file mode 100644
index 000000000..5ee88e25f
--- /dev/null
+++ b/ishtar_common/templates/blocks/table_form_snippet.html
@@ -0,0 +1,16 @@
+{% load i18n %}
+  {% if form.non_field_errors %}<tr class='errors'>
+    <td colspan='3'>{{form.non_field_errors}}</td>
+  </tr>{%endif%}
+  {% for field in form %}{% if not field.is_hidden %}
+  <tr{% if field.field.required %} class='required'{% endif %}>
+    <th>{{ field.label_tag }}</th>
+    <td> {{ field.errors }}{{field|safe}}</td>{% if field.help_text %}
+    <td><a href="#{{field.auto_id}}" class="help_display" title="{% trans "Help"%}">?</a></td>
+  </tr>
+  <tr class="help_text" id="{{field.auto_id}}_help">
+    <td colspan="3"><div>{{field.help_text}}</div></td>
+  {%endif%}</tr>{% else %}{{field}}{% if field.errors %}
+ <tr class='errors'>
+    <td colspan='3'>{{field.name}} - {{ field.errors }}</td>
+  </tr>{% endif %}{{field|safe}}{% endif %}{% endfor %}
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>
-- 
cgit v1.2.3