diff options
author | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-02-27 18:04:38 +0000 |
---|---|---|
committer | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-02-27 18:04:38 +0000 |
commit | 95c60dba46b59dfd731c0775c469ad7df2ded045 (patch) | |
tree | f2a08d27c81d2489dae527373bbac7879585f875 /app/assets | |
parent | e44fa122a45350d7852f302081c390d311341228 (diff) | |
parent | 90cd66a51d7f40e980f4934e2e1a717983b5e4fe (diff) | |
download | gitlab-ce-95c60dba46b59dfd731c0775c469ad7df2ded045.tar.gz |
Merge branch '27840-improve-search-bar-experience' into 'master'
Fix #27840 - Improve the search bar experience on mobile
Closes #27840
See merge request !9280
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 | 6 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/filters.scss | 46 |
2 files changed, 50 insertions, 2 deletions
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 index fbc72a3001a..dd565da507e 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 +++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js.es6 @@ -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) { diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index e3da467a27c..d2be8dc7a39 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -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 |