Merge branch '27840-improve-search-bar-experience' into 'master'
Fix #27840 - Improve the search bar experience on mobile Closes #27840 See merge request !9280
This commit is contained in:
commit
95c60dba46
|
@ -48,7 +48,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
setOffset(offset = 0) {
|
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) {
|
renderContent(forceShowList = false) {
|
||||||
|
|
|
@ -26,6 +26,11 @@
|
||||||
.filtered-search-container {
|
.filtered-search-container {
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
@media (max-width: $screen-xs-min) {
|
||||||
|
-webkit-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.filtered-search-input-container {
|
.filtered-search-input-container {
|
||||||
|
@ -34,6 +39,20 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
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 {
|
.form-control {
|
||||||
padding-left: 25px;
|
padding-left: 25px;
|
||||||
padding-right: 25px;
|
padding-right: 25px;
|
||||||
|
@ -79,6 +98,31 @@
|
||||||
overflow: auto;
|
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 {
|
%filter-dropdown-item-btn-hover {
|
||||||
background-color: $dropdown-hover-color;
|
background-color: $dropdown-hover-color;
|
||||||
color: $white-light;
|
color: $white-light;
|
||||||
|
@ -148,4 +192,4 @@
|
||||||
|
|
||||||
.filter-dropdown-loading {
|
.filter-dropdown-loading {
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
}
|
}
|
|
@ -82,7 +82,7 @@
|
||||||
%span.dropdown-label-box{ style: 'background: {{color}}' }
|
%span.dropdown-label-box{ style: 'background: {{color}}' }
|
||||||
%span.label-title.js-data-value
|
%span.label-title.js-data-value
|
||||||
{{title}}
|
{{title}}
|
||||||
.pull-right
|
.pull-right.filter-dropdown-container
|
||||||
= render 'shared/sort_dropdown'
|
= render 'shared/sort_dropdown'
|
||||||
|
|
||||||
- if @bulk_edit
|
- if @bulk_edit
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: Enhanced filter issues layout for better mobile experiance
|
||||||
|
merge_request: 9280
|
||||||
|
author: Pratik Borsadiya
|
Loading…
Reference in New Issue