[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>
mautic · Apr 26, 2024 · 3e95053 · 3e95053
1 parent ba7529c
commit 3e95053
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 32 deletions.
diff --git 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
@@ -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
@@ -7,28 +7,30 @@
     {% 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 }}
                             </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 }}">
+                <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 }}
                             </option>
                         {% 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>