Commit 95c60dba authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

Merge branch '27840-improve-search-bar-experience' into 'master'

Fix #27840 - Improve the search bar experience on mobile

Closes #27840

See merge request !9280
parents e44fa122 90cd66a5
Pipeline #6715301 failed with stages
in 93 minutes and 34 seconds
......@@ -48,7 +48,11 @@
}
setOffset(offset = 0) {
this.dropdown.style.left = `${offset}px`;
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;
......@@ -148,4 +192,4 @@
.filter-dropdown-loading {
padding: 8px 16px;
}
}
\ No newline at end of file
......@@ -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