UX: improve FilterOrder box design

This commit is contained in:
Mathieu Jaumotte 2023-07-04 16:42:56 +02:00
parent 1485d1ce7a
commit 3e63b4abf3
4 changed files with 50 additions and 48 deletions

View File

@ -96,6 +96,8 @@ activity_filter:
My activities: Mes échanges (où j'interviens)
Types: Par type d'échange
Jobs: Par métier impliqué
By: Filtrer par
Search: Chercher dans la liste
#timeline
'%user% has done an %activity_type%': '%user% a effectué un échange de type "%activity_type%"'

View File

@ -38,6 +38,9 @@ final class FilterOrderType extends \Symfony\Component\Form\AbstractType
$builder->add('q', SearchType::class, [
'label' => false,
'required' => false,
'attr' => [
'placeholder' => 'activity_filter.Search',
]
]);
}

View File

@ -42,3 +42,15 @@ form {
font-weight: 700;
margin-bottom: .375em;
}
.chill_filter_order {
background: $gray-100; /*
border: 3px dashed $white;
background: repeating-linear-gradient(
-45deg,
$gray-100,
$gray-100 2px,
$white 2px,
$white 6px
); */
}

View File

@ -1,102 +1,87 @@
{{ form_start(form) }}
<div class="chill_filter_order container my-4">
<div class="row">
{% set btnSubmit = 0 %}
<div class="chill_filter_order container-xxl p-5 py-2 my-3">
<div class="row my-2">
{% if form.vars.has_search_box %}
<div class="col-md-12">
<div class="input-group mb-3">
{{ form_widget(form.q)}}
<button type="submit" class="btn btn-chill-l-gray"><i class="fa fa-search"></i></button>
<div class="col-sm-12">
<div class="input-group">
{{ form_widget(form.q) }}
<button type="submit" class="btn btn-misc"><i class="fa fa-search"></i></button>
</div>
</div>
{% endif %}
</div>
{% if form.dateRanges is defined %}
{% set btnSubmit = 1 %}
{% if form.dateRanges|length > 0 %}
{% for dateRangeName, _o in form.dateRanges %}
<div class="row gx-2 justify-content-center items-center">
<div class="row my-2">
{% if form.dateRanges[dateRangeName].vars.label is not same as(false) %}
<div class="col-md-4">
{{ form_label(form.dateRanges[dateRangeName])}}
</div>
{% endif %}
<div class="col-md-7">
<div class="input-group mb-3">
<div class="col-sm-8 pt-2">
<div class="input-group">
<span class="input-group-text">{{ 'chill_calendar.From'|trans }}</span>
{{ form_widget(form.dateRanges[dateRangeName]['from']) }}
<span class="input-group-text">{{ 'chill_calendar.To'|trans }}</span>
{{ form_widget(form.dateRanges[dateRangeName]['to']) }}
</div>
</div>
<div class="col-md-1" style="text-align: right;">
<button type="submit" class="btn btn-misc"><i class="fa fa-filter"></i></button>
</div>
</div>
{% endfor %}
{% endif %}
{% endif %}
{% if form.checkboxes is defined %}
{% set btnSubmit = 1 %}
{% if form.checkboxes|length > 0 %}
{% for checkbox_name, options in form.checkboxes %}
<div class="row gx-0 align-items-center">
<div class="col-md-12">
<div class="row my-2">
<div class="col-sm-4 col-form-label">{{ 'activity_filter.By'|trans }}</div>
<div class="col-sm-8 pt-2">
{% for c in form['checkboxes'][checkbox_name].children %}
<div class="form-check form-check-inline">
{{ form_widget(c) }}
{{ form_label(c) }}
</div>
{% endfor %}
</div>
</div>
{% if loop.last %}
<div class="row gx-0">
<div class="col-md-12">
<ul class="record_actions">
<li>
<button type="submit" class="btn btn-misc"><i class="fa fa-filter"></i></button>
</li>
</ul>
</div>
</div>
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% if form.entity_choices is defined %}
{% set btnSubmit = 1 %}
{% if form.entity_choices |length > 0 %}
{% for checkbox_name, options in form.entity_choices %}
<div class="row gx-0 align-items-center">
<div class="row my-2">
{% if form.entity_choices[checkbox_name].vars.label is not same as(false) %}
<div class="col-md-4">
{{ form_label(form.entity_choices[checkbox_name])}}
</div>
{% endif %}
<div class="col-md-7">
<div class="col-sm-8 pt-2">
{% for c in form['entity_choices'][checkbox_name].children %}
<div class="form-check form-check-inline">
{{ form_widget(c) }}
{{ form_label(c) }}
</div>
{% endfor %}
</div>
<div class="col-md-1 text-right" style="text-align: right;">
<button type="submit" class="btn btn-misc"><i class="fa fa-filter"></i></button>
</div>
</div>
{% endfor %}
{% endif %}
{% endif %}
{% if form.single_checkboxes is defined %}
{% set btnSubmit = 1 %}
{% for name, _o in form.single_checkboxes %}
<div class="row gx-2 align-items-center">
<div class="col-md-7 offset-md-4">
<div class="row my-2">
<div class="col-sm-4 col-form-label">{{ 'activity_filter.By'|trans }}</div>
<div class="col-sm-8 pt-2">
{{ form_widget(form.single_checkboxes[name]) }}
</div>
<div class="col-md-1 text-right" style="text-align: right;">
<button type="submit" class="btn btn-misc"><i class="fa fa-filter"></i></button>
</div>
</div>
{% endfor %}
{% endif %}
{% if btnSubmit == 1 %}
<div class="row my-2">
<button type="submit" class="btn btn-sm btn-misc"><i class="fa fa-fw fa-filter"></i>{{ 'Filter'|trans }}</button>
</div>
{% endif %}
</div>
{% for k,v in otherParameters %}