From 3e95053652d8b7584ae18a66ea0c07512f5b2e0b Mon Sep 17 00:00:00 2001
From: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
Date: Fri, 26 Apr 2024 06:03:38 -0300
Subject: [PATCH] [UI] Fix filters on contact details weren't usable on mobile
 (#13687)

* added label + removed placeholder + aligned column

* same as before but for audit log

* fix css for audit log

* final fix for mobile

---------

Co-authored-by: John Linhart <admin@escope.cz>
---
 app/bundles/LeadBundle/Assets/css/lead.css    |  2 +-
 .../Resources/views/Auditlog/_list.html.twig  | 52 ++++++++++---------
 .../Timeline/_list_filter_form.html.twig      | 16 +++---
 3 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/app/bundles/LeadBundle/Assets/css/lead.css b/app/bundles/LeadBundle/Assets/css/lead.css
index 5032e571990..0bf1a06398b 100644
--- a/app/bundles/LeadBundle/Assets/css/lead.css
+++ b/app/bundles/LeadBundle/Assets/css/lead.css
@@ -160,7 +160,7 @@ ul.tag-cloud li {
 
 .history-search{
     overflow: visible!important;
-    min-height: 53px;
+    min-height: 95px;
 }
 
 .timeline-icon {
diff --git a/app/bundles/LeadBundle/Resources/views/Auditlog/_list.html.twig b/app/bundles/LeadBundle/Resources/views/Auditlog/_list.html.twig
index b25b32aa211..25c3962366f 100644
--- a/app/bundles/LeadBundle/Resources/views/Auditlog/_list.html.twig
+++ b/app/bundles/LeadBundle/Resources/views/Auditlog/_list.html.twig
@@ -11,30 +11,34 @@
     </div>
     {% if events.types is defined and events.types is iterable %}
         <div class="history-search panel-footer text-muted">
-            <div class="col-sm-5">
-                <select name="includeEvents[]" multiple="multiple" class="form-control bdr-w-0" data-placeholder="{{ 'mautic.lead.lead.filter.bundles.include.placeholder'|trans }}">
-                    {% for typeKey, typeName in events.types %}
-                        <option value="{{ typeKey }}" {% if typeKey in events.filters.includeEvents %}selected{% endif %}>
-                            {{- typeName -}}
-                        </option>
-                    {% endfor %}
-                </select>
-            </div>
-            <div class="col-sm-5">
-                <select name="excludeEvents[]" multiple="multiple" class="form-control bdr-w-0" data-placeholder="{{ 'mautic.lead.lead.filter.bundles.exclude.placeholder'|trans }}">
-                    {% for typeKey, typeName in events.types %}
-                        <option value="{{ typeKey }}" {% if typeKey in events.filters.excludeEvents %}selected{% endif %}>
-                            {{- typeName -}}
-                        </option>
-                    {% endfor %}
-                </select>
-            </div>
-            <div class="col-sm-2">
-                <a class="btn btn-default btn-block" href="{{ url('mautic_contact_auditlog_export_action', {'leadId': lead.id}) }}" data-toggle="download">
-                    <span>
-                        <i class="fa fa-download"></i> <span class="hidden-xs hidden-sm">{{ 'mautic.core.export'|trans }}</span>
-                    </span>
-                </a>
+            <div class="row">
+                <div class="col-sm-5 mna-3">
+                    <label class="pt-lg">{{ 'mautic.lead.lead.filter.bundles.include.placeholder'|trans }}</label>
+                    <select name="includeEvents[]" multiple="multiple" class="form-control bdr-w-0"">
+                        {% for typeKey, typeName in events.types %}
+                            <option value="{{ typeKey }}" {% if typeKey in events.filters.includeEvents %}selected{% endif %}>
+                                {{- typeName -}}
+                            </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                <div class="col-sm-5 mna-3">
+                    <label class="pt-lg">{{ 'mautic.lead.lead.filter.bundles.exclude.placeholder'|trans }}</label>
+                    <select name="excludeEvents[]" multiple="multiple" class="form-control bdr-w-0">
+                        {% for typeKey, typeName in events.types %}
+                            <option value="{{ typeKey }}" {% if typeKey in events.filters.excludeEvents %}selected{% endif %}>
+                                {{- typeName -}}
+                            </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                <div class="col-sm-2 mt-lg">
+                    <a class="btn btn-default btn-block mt-lg" href="{{ url('mautic_contact_auditlog_export_action', {'leadId': lead.id}) }}" data-toggle="download">
+                        <span>
+                            <i class="fa fa-download"></i> <span>{{ 'mautic.core.export'|trans }}</span>
+                        </span>
+                    </a>
+                </div>
             </div>
         </div>
     {% endif %}
diff --git a/app/bundles/LeadBundle/Resources/views/Timeline/_list_filter_form.html.twig b/app/bundles/LeadBundle/Resources/views/Timeline/_list_filter_form.html.twig
index 36adcbe812a..03131a0f904 100644
--- a/app/bundles/LeadBundle/Resources/views/Timeline/_list_filter_form.html.twig
+++ b/app/bundles/LeadBundle/Resources/views/Timeline/_list_filter_form.html.twig
@@ -7,8 +7,9 @@
     {% if events.types is defined and events.types is iterable %}
         <div class="history-search panel-footer text-muted">
             <div class="row">
-                <div class="col-sm-5">
-                    <select name="includeEvents[]" multiple="multiple" class="form-control bdr-w-0" data-placeholder="{{ 'mautic.lead.lead.filter.bundles.include.placeholder'|trans }}">
+                <div class="col-sm-5 mna-3">
+                <label class="pt-lg">{{ 'mautic.lead.lead.filter.bundles.include.placeholder'|trans }}</label>
+                    <select name="includeEvents[]" multiple="multiple" class="form-control bdr-w-0">
                         {% for typeKey, typeName in events.types %}
                             <option value="{{ typeKey|e }}" {% if typeKey in events.filters.includeEvents %}selected{% endif %}>
                                 {{ typeName }}
@@ -16,8 +17,9 @@
                         {% endfor %}
                     </select>
                 </div>
-                <div class="col-sm-5">
-                    <select name="excludeEvents[]" multiple="multiple" class="form-control bdr-w-0" data-placeholder="{{ 'mautic.lead.lead.filter.bundles.exclude.placeholder'|trans }}">
+                <div class="col-sm-5 mna-3">
+                <label class="pt-lg">{{ 'mautic.lead.lead.filter.bundles.exclude.placeholder'|trans }}</label>
+                    <select name="excludeEvents[]" multiple="multiple" class="form-control bdr-w-0">
                         {% for typeKey, typeName in events.types %}
                             <option value="{{ typeKey|e }}" {% if typeKey in events.filters.excludeEvents %}selected{% endif %}>
                                 {{ typeName }}
@@ -25,10 +27,10 @@
                         {% endfor %}
                     </select>
                 </div>
-                <div class="col-sm-2">
-                    <a class="btn btn-default btn-block" href="{{ url('mautic_contact_timeline_export_action', {'leadId': lead.id}) }}" data-toggle="download">
+                <div class="col-sm-2 mt-lg">
+                    <a class="btn btn-default btn-block mt-lg" href="{{ url('mautic_contact_timeline_export_action', {'leadId': lead.id}) }}" data-toggle="download">
                         <span>
-                            <i class="fa fa-download"></i> <span class="hidden-xs hidden-sm">{{ 'mautic.core.export'|trans }}</span>
+                            <i class="fa fa-download"></i> <span>{{ 'mautic.core.export'|trans }}</span>
                         </span>
                     </a>
                 </div>