From 4509e950fbe35e6f529c4469dfc7802686fce28e Mon Sep 17 00:00:00 2001 From: Étienne Loks Date: Wed, 3 Feb 2016 20:14:12 +0100 Subject: Readjust search fields with flex --- ishtar_common/static/media/style.css | 76 +++++++++++++++++++--- ishtar_common/templates/blocks/JQueryJqGrid.html | 1 - .../templates/blocks/form_flex_snippet.html | 14 ++++ .../templates/ishtar/wizard/default_wizard.html | 4 +- ishtar_common/templates/ishtar/wizard/search.html | 9 ++- ishtar_common/widgets.py | 5 +- ishtar_common/wizards.py | 11 +++- 7 files changed, 98 insertions(+), 22 deletions(-) create mode 100644 ishtar_common/templates/blocks/form_flex_snippet.html (limited to 'ishtar_common') 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 %} - 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 %} + 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 @@ {% else %} - +{% if not is_search %}
{% endif %} {% table_form wizard.form %} -
+{% if not is_search %}{% endif %} {% endif %} {{ 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 @@ -
{% if wizard.form.forms %} +
{%if wizard.form.non_form_errors%}{%endif%} @@ -20,9 +20,8 @@
{{wizard.form.non_form_errors}}
{% else %} - - {{ wizard.form.as_table }} -
-{% endif %} +
+ {{ wizard.form.as_p }}
+{% 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 -- cgit v1.2.3