Skip to content

Commit

Permalink
ref: responsive search form
Browse files Browse the repository at this point in the history
  • Loading branch information
@theus77
theus77 committed Feb 20, 2024
1 parent 5429efe commit 32fa3f4
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 86 deletions.
143 changes: 74 additions & 69 deletions ...admin-ui-bundle/src/Resources/views/bootstrap5/elasticsearch/search-form-filter.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,75 +3,80 @@
<div class="card card-{{ theme_color }} card-outline">
<div id="searchFormBoxBody" class="collapse {% if openSearchForm is defined and openSearchForm %}in{% endif %}" aria-expanded="{% if openSearchForm is not defined or not openSearchForm %}false{%else%}true{% endif %}">
<div class="card-body" >
<div class="row">
{% if form.environments is defined %}
<div class=" col-md-3 col-6">
{{ form_row(form.environments) }}
</div>
{% endif %}
{% if form.contentTypes is defined %}
<div class=" col-md-4 col-6">
{{ form_row(form.contentTypes) }}
</div>
{% endif %}
{% if form.sortBy is defined %}
<div class=" col-md-3 col-6">
{{ form_row(form.sortBy) }}
</div>
{% endif %}
{% if form.sortBy is defined %}
<div class=" col-md-2 col-6">
{{ form_row(form.sortOrder) }}
</div>
{% endif %}
</div>
<div class="row" id="list-of-search-filters" data-prototype="{{ form_row(form.filters.vars.prototype)|e }}" data-index="{{ form.filters|length }}">
<div class="col-12 d-none d-md-block"> {# hide on mobile? (syv) #}
<div class="col-md-2">
<div class="form-group">
<label class="control-label">Boolean clause</label>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Field</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label">Operator</label>
</div>
</div>
<div class="{% if emsco_is_super() %}col-md-3{% else %}col-md-4{% endif %}">
<div class="form-group">
<label class="control-label">Pattern</label>
</div>
</div>
{% if emsco_is_super() %}
<div class="col-md-1">
<div class="form-group">
<label class="control-label">Boost</label>
</div>
</div>
{% endif %}
<div class="col-md-1">
<div class="form-group">
<label class="control-label">&nbsp;</label>
</div>
</div>

{{- form_errors(form) -}}
</div>
{{ form_widget(form.filters) }}
</div>
<div class="row">
{% if form.minimumShouldMatch is defined %}
<div class=" col-md-3 col-6">
{{ form_row(form.minimumShouldMatch) }}
</div>
{% endif %}
</div>
</div>
<div class="row">
{% if form.environments is defined %}
<div class=" col-md-3 col-6">
{{ form_row(form.environments) }}
</div>
{% endif %}
{% if form.contentTypes is defined %}
<div class=" col-md-4 col-6">
{{ form_row(form.contentTypes) }}
</div>
{% endif %}
{% if form.sortBy is defined %}
<div class=" col-md-3 col-6">
{{ form_row(form.sortBy) }}
</div>
{% endif %}
{% if form.sortBy is defined %}
<div class=" col-md-2 col-6">
{{ form_row(form.sortOrder) }}
</div>
{% endif %}
</div>
<div class="row" id="list-of-search-filters" data-prototype="{{ form_row(form.filters.vars.prototype)|e }}" data-index="{{ form.filters|length }}">
<div class=" d-sm-none d-md-block">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label class="control-label">Boolean clause</label>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Field</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label">Operator</label>
</div>
</div>
<div class="{% if emsco_is_super() %}col-md-3{% else %}col-md-4{% endif %}">
<div class="form-group">
<label class="control-label">Pattern</label>
</div>
</div>
{% if emsco_is_super() %}
<div class="col-md-1">
<div class="form-group">
<label class="control-label">Boost</label>
</div>
</div>
{% endif %}
<div class="col-md-1">
<div class="form-group">
<label class="control-label">&nbsp;</label>
</div>
</div>
</div>
</div>
<div>
{{- form_errors(form) -}}
</div>
<div class="row">
{{ form_widget(form.filters) }}
</div>
</div>
<div class="row mt-3">
{% if form.minimumShouldMatch is defined %}
<div class=" col-md-3 col-6">
{{ form_row(form.minimumShouldMatch) }}
</div>
{% endif %}
</div>
</div>

<div class="card-footer">
<div class="form-group">
Expand Down
32 changes: 15 additions & 17 deletions EMS/admin-ui-bundle/src/Resources/views/bootstrap5/form/fields.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -400,36 +400,36 @@


{% block search_filter_row -%}
<div class="filter-container row">
<div class="col-xs-12">
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="filter-container ">
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-4">
<div class="form-group">
<div class="visible-xs-block visible-sm-block">
<div class="d-block d-md-none">
{{ form_label(form.booleanClause) }}
</div>
{{- form_widget(form.booleanClause) -}}
</div>
</div>
<div class="col-md-3 col-sm-5 col-xs-4">
<div class="form-group">
<div class="visible-xs-block visible-sm-block">
<div class="d-block d-md-none">
{{ form_label(form.field) }}
</div>
{{- form_widget(form.field) -}}
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-4">
<div class="form-group">
<div class="visible-xs-block visible-sm-block">
<div class="d-block d-md-none">
{{ form_label(form.operator) }}
</div>
{{- form_widget(form.operator) -}}
</div>
</div>
<div class="clearfix visible-sm-block visible-xs-block"></div>
<div class="d-block d-md-none"></div>
<div class="{% if emsco_is_super() %}col-md-3 col-xs-8{% else %}col-md-4 col-xs-10{% endif %}">
<div class="form-group">
<div class="visible-xs-block visible-sm-block">
<div class="d-block d-md-none">
{{ form_label(form.pattern) }}
</div>
{{- form_widget(form.pattern) -}}
Expand All @@ -438,7 +438,7 @@
{% if emsco_is_super() %}
<div class="col-md-1 col-xs-2">
<div class="form-group">
<div class="visible-xs-block visible-sm-block">
<div class="d-block d-md-none">
{{ form_label(form.boost) }}
</div>
{{- form_widget(form.boost) -}}
Expand All @@ -447,16 +447,14 @@
{% endif %}
<div class="col-md-1 col-xs-2">
<div class="form-group">
<div class="visible-xs-block visible-sm-block">
<div class="d-block d-md-none">
<label class="control-label">&nbsp;</label>
</div>
{# <fieldset class="btn-group">#}
{% if form.vars.name != '0' %}
<a class="btn btn-primary remove-filter form-control" href="#">
<i class="fa fa-trash"></i>
</a>
{% endif %}
{# </fieldset>#}
{% if form.vars.name != '0' %}
<a class="btn btn-primary remove-filter form-control" href="#">
<i class="fa fa-trash"></i>
</a>
{% endif %}
</div>
</div>

Expand Down

0 comments on commit 32fa3f4

Please sign in to comment.