Commit 90cd66a5 authored by Pratik Borsadiya's avatar Pratik Borsadiya Committed by Pratik Borsadiya

Fix #27840 - Improve the search bar experience on mobile

parent c5b29ed6
......@@ -48,7 +48,11 @@
}
setOffset(offset = 0) {
if (window.innerWidth > 480) {
this.dropdown.style.left = `${offset}px`;
} else {
this.dropdown.style.left = '0px';
}
}
renderContent(forceShowList = false) {
......
......@@ -26,6 +26,11 @@
.filtered-search-container {
display: -webkit-flex;
display: flex;
@media (max-width: $screen-xs-min) {
-webkit-flex-direction: column;
flex-direction: column;
}
}
.filtered-search-input-container {
......@@ -34,6 +39,20 @@
position: relative;
width: 100%;
@media (max-width: $screen-xs-min) {
-webkit-flex: 1 1 100%;
flex: 1 1 100%;
margin-bottom: 10px;
.dropdown-menu {
width: auto;
left: 0;
right: 0;
max-width: none;
min-width: 100%;
}
}
.form-control {
padding-left: 25px;
padding-right: 25px;
......@@ -79,6 +98,31 @@
overflow: auto;
}
@media (max-width: $screen-xs-min) {
.issues-details-filters {
padding: 0 0 10px;
background-color: $white-light;
border-top: 0;
}
.filter-dropdown-container {
.dropdown-toggle,
.dropdown {
width: 100%;
}
.dropdown {
margin-left: 0;
}
.fa-chevron-down {
position: absolute;
right: 10px;
top: 10px;
}
}
}
%filter-dropdown-item-btn-hover {
background-color: $dropdown-hover-color;
color: $white-light;
......
......@@ -82,7 +82,7 @@
%span.dropdown-label-box{ style: 'background: {{color}}' }
%span.label-title.js-data-value
{{title}}
.pull-right
.pull-right.filter-dropdown-container
= render 'shared/sort_dropdown'
- if @bulk_edit
......
---
title: Enhanced filter issues layout for better mobile experiance
merge_request: 9280
author: Pratik Borsadiya
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment