Readjust search fields with flex

7 files changed, 98 insertions, 22 deletions

diff --git a/ishtar_common/static/media/style.css b/ishtar_common/static/media/style.css
index 295057413..a4c62739b 100644
--- a/ishtar_common/static/media/style.css
+++ b/ishtar_common/static/media/style.css
@@ -8,7 +8,7 @@ a.remove,
     background-color:#fff;
 }
 
-div.form {
+div.form, ul.form {
     background-color: #f1f2f6;
 }
 
@@ -412,7 +412,10 @@ div#main_menu > ul > li{
 
 div#content{
     clear:both;
-    margin:190px 200px 70px 200px;
+    margin-top:190px ;
+    margin-bottom: 70px;
+    margin-left: 200px;
+    margin-right: 150px;
     text-align:center;
 }
 
@@ -503,6 +506,47 @@ div.form {
     text-align:center;
 }
 
+ul.form-flex {
+    list-style-type: none;
+    text-align: left;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: flex;
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    -moz-flex-wrap: wrap;
+    flex-wrap: wrap;
+    width: 400px;
+    padding: 0;
+    margin: 0;
+}
+
+
+ul.form-flex li{
+    width: 395px;
+}
+
+@media screen and (min-width: 1051px) {
+    div.form,
+    ul.form-flex {
+        width: 800px;
+    }
+}
+
+@media screen and (min-width: 1400px) {
+    div.form,
+    ul.form-flex {
+        width: 1200px;
+    }
+}
+
+ul.form-flex label {
+    display: inline-block;
+    width: 150px;
+    padding-left: 10px;
+}
+
 .form table{
     padding:0.2em;
     margin-left:auto;
@@ -525,10 +569,24 @@ div.form {
     color:#922;
 }
 
-.form table .required th{
+.form .required label{
     font-weight:bold;
 }
 
+.form p.input{
+    display: inline-block;
+    width: 200px;
+    margin: 5px;
+}
+
+.form p.input input{
+    width: 200px;
+}
+
+.form p.input select{
+    width: 200px;
+}
+
 .form input[readonly=True]{
     background-color:#f1f2f6;
     border:0;
@@ -543,6 +601,10 @@ div.form {
     font-size:0.9em;
 }
 
+ul.form .help_text{
+    width: 400px;
+}
+
 .help_text div{
     background-color:#FFF;
     margin:1em;;
@@ -618,10 +680,6 @@ table.confirm tr.spacer td:last-child{
     background-image:none;
 }
 
-.ui-widget-header {
-    background:none;
-}
-
 .ui-tabs .ui-tabs-nav li a{
     color: #D14;
 }
@@ -977,8 +1035,8 @@ a.remove{
     width:60px;
 }
 
-.widget-parcel{
-    width:60px;
+.form p.input input.widget-parcel{
+    width:85px;
 }
 
 .small, .small input{
diff --git a/ishtar_common/templates/blocks/JQueryJqGrid.html b/ishtar_common/templates/blocks/JQueryJqGrid.html
index bba1ef784..1639c70f2 100644
--- a/ishtar_common/templates/blocks/JQueryJqGrid.html
+++ b/ishtar_common/templates/blocks/JQueryJqGrid.html
@@ -1,5 +1,4 @@
 {% load i18n %}
-</table>
 
 <button id='search_{{name}}' class='submit'>{% trans "Search" %}</button>
 
diff --git a/ishtar_common/templates/blocks/form_flex_snippet.html b/ishtar_common/templates/blocks/form_flex_snippet.html
new file mode 100644
index 000000000..03d8b15f0
--- /dev/null
+++ b/ishtar_common/templates/blocks/form_flex_snippet.html
@@ -0,0 +1,14 @@
+{% load i18n %}
+<ul class='form-flex'>
+  {% if form.non_field_errors %}<li class='errors'>
+    {{form.non_field_errors}}
+  </li>{%endif%}
+  {% for field in form %}{% if not field.is_hidden %}
+  <li{% if field.field.required %} class='required'{% endif %}>
+    {{ field.label_tag }}
+    <p class='input'>{{ field.errors }}{{field|safe}}</p>{% if field.help_text %}
+    <a href="#{{field.auto_id}}" class="help_display" title="{% trans "Help"%}">?</a>
+  <div class="help_text" id="{{field.auto_id}}_help">
+    {{field.help_text}}</div>
+  {%endif%}</li>{% else %}{{field}}{% endif %}{% endfor %}
+</ul>
diff --git a/ishtar_common/templates/ishtar/wizard/default_wizard.html b/ishtar_common/templates/ishtar/wizard/default_wizard.html
index a39037d10..1a17cf32b 100644
--- a/ishtar_common/templates/ishtar/wizard/default_wizard.html
+++ b/ishtar_common/templates/ishtar/wizard/default_wizard.html
@@ -35,9 +35,9 @@
   <tr class='modify'><td colspan="2"><button name="formset_modify" value="{{wizard.steps.current}}">{% trans "Add/Modify" %}</button></td></tr></li>
 </table>
 {% else %}
-<table>
+{% if not is_search %}<table>{% endif %}
 {% table_form wizard.form %}
-</table>
+{% if not is_search %}</table>{% endif %}
 {% endif %}
 <input type="hidden" name="{{ step_field }}" value="{{ step0 }}" />
 {{ previous_fields|safe }}
diff --git a/ishtar_common/templates/ishtar/wizard/search.html b/ishtar_common/templates/ishtar/wizard/search.html
index 5cf96552b..e5066cf87 100644
--- a/ishtar_common/templates/ishtar/wizard/search.html
+++ b/ishtar_common/templates/ishtar/wizard/search.html
@@ -8,8 +8,8 @@
 <ul id='form_path'>
   <li class='current'><a href='#'>{{current_step.form_label}}</a></li>
 </ul>
-<div class='form'>
 {% if wizard.form.forms %}
+<div class='form'>
 <div class='top_button'><input type="submit" id="submit_form" value="{% trans "Validate" %}"/></div>
 <table class='formset'>
   {%if wizard.form.non_form_errors%}<tr class='error'><th colspan='2'>{{wizard.form.non_form_errors}}</th></tr>{%endif%}
@@ -20,9 +20,8 @@
   <tr class='modify'><td colspan="2"><button name="formset_modify" value="{{wizard.steps.current}}">{% trans "Add/Modify" %}</button></td></tr></li>
 </table>
 {% else %}
-<table>
-  {{ wizard.form.as_table }}
-</table>
-{% endif %}
+<div class='form'>
+  {{ wizard.form.as_p }}
 </div>
+{% endif %}
 {% endblock %}
diff --git a/ishtar_common/widgets.py b/ishtar_common/widgets.py
index dc6324b79..688648e10 100644
--- a/ishtar_common/widgets.py
+++ b/ishtar_common/widgets.py
@@ -567,9 +567,10 @@ class JQueryJqGrid(forms.RadioSelect):
         return jq_col_names, extra_cols
 
     def render(self, name, value=None, attrs=None):
-        t = loader.get_template('blocks/form_snippet.html')
+        t = loader.get_template('blocks/form_flex_snippet.html')
         form = self.form()
-        rendered = t.render(Context({'form': form}))
+        rendered = t.render(Context({'form': form,
+                                     'flex': True}))
         dct = {}
         if self.new:
             model_name = self.associated_model._meta.object_name.lower()
diff --git a/ishtar_common/wizards.py b/ishtar_common/wizards.py
index 031498ca3..ffbf9b994 100644
--- a/ishtar_common/wizards.py
+++ b/ishtar_common/wizards.py
@@ -188,9 +188,13 @@ class Wizard(NamedUrlWizardView):
         self.request.session['CURRENT_ACTION'] = self.get_wizard_name()
         step = self.steps.first
         current_step = self.steps.current
-        context.update({'current_step': self.form_list[current_step],
-                        'wizard_label': self.label,
-                        'current_object': self.get_current_object()})
+        dct = {'current_step': self.form_list[current_step],
+               'wizard_label': self.label,
+               'current_object': self.get_current_object(),
+               'is_search': current_step.startswith('selec-')
+               if current_step else False
+               }
+        context.update(dct)
         if step == current_step:
             return context
         previous_steps, next_steps, previous_step_counter = [], [], 0
@@ -988,6 +992,7 @@ class SearchWizard(NamedUrlWizardView):
         self.request.session['CURRENT_ACTION'] = self.get_wizard_name()
         current_step = self.steps.current
         context.update({'current_step': self.form_list[current_step],
+                        'is_search': True,
                         'wizard_label': self.label})
         return context