diff options
author | Alfredo Sumaran <alfredo@gitlab.com> | 2016-03-25 09:02:22 +0300 |
---|---|---|
committer | Alfredo Sumaran <alfredo@gitlab.com> | 2016-03-25 09:55:46 +0300 |
commit | 9d51f86694458cfbad3d4e92da7f3797947e5f55 (patch) | |
tree | 0e4cd6ee296b77b1e3e17aa29201322217713c09 | |
parent | 8e53cf94e63c5c48f07cb9cd4ce89e2c7dae7ab4 (diff) |
Makes autocomplete dropdown look the same as others
-rw-r--r-- | app/assets/javascripts/gl_dropdown.js.coffee | 2 | ||||
-rw-r--r-- | app/assets/javascripts/search_autocomplete.js.coffee | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/dropdowns.scss | 58 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 7 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/search.scss | 11 | ||||
-rw-r--r-- | app/views/layouts/_search.html.haml | 7 |
6 files changed, 62 insertions, 25 deletions
diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee index 0d967552a74..1810779c40a 100644 --- a/app/assets/javascripts/gl_dropdown.js.coffee +++ b/app/assets/javascripts/gl_dropdown.js.coffee @@ -300,7 +300,7 @@ class GitLabDropdown noResults: -> html = "<li>" - html += "<a href='#' class='dropdown-menu-empty-link is-focused'>" + html += "<a class='dropdown-menu-empty-link is-focused'>" html += "No matching results." html += "</a>" html += "</li>" diff --git a/app/assets/javascripts/search_autocomplete.js.coffee b/app/assets/javascripts/search_autocomplete.js.coffee index 0f033245e09..e6a2990ab5b 100644 --- a/app/assets/javascripts/search_autocomplete.js.coffee +++ b/app/assets/javascripts/search_autocomplete.js.coffee @@ -260,6 +260,6 @@ class @SearchAutocomplete restoreMenu: -> html = "<ul> - <li><a class='is-focused'>Loading...</a></li> + <li><a class='dropdown-menu-empty-link is-focused'>Loading...</a></li> </ul>" @dropdownContent.html(html) diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 8caadda2852..182c06eba66 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -42,7 +42,7 @@ font-size: 15px; text-align: left; border: 1px solid $dropdown-toggle-border-color; - border-radius: 2px; + border-radius: $dropdown-border-radius; outline: 0; text-overflow: ellipsis; white-space: nowrap; @@ -75,12 +75,12 @@ width: 240px; margin-top: 2px; margin-bottom: 0; - padding: 10px; - font-size: 14px; + font-size: 15px; font-weight: normal; + padding: 10px 0; background-color: $dropdown-bg; border: 1px solid $dropdown-border-color; - border-radius: $border-radius-base; + border-radius: $dropdown-border-radius; box-shadow: 0 2px 4px $dropdown-shadow-color; &.is-loading { @@ -101,9 +101,17 @@ li { text-align: left; list-style: none; + padding: 0 10px; } .divider { + height: 1px; + margin: 8px 10px; + padding: 0; + background-color: $dropdown-divider-color; + } + + .separator { width: 100%; height: 1px; margin-top: 8px; @@ -137,6 +145,17 @@ } } } + + .dropdown-header { + color: $dropdown-header-color; + font-size: 13px; + line-height: 22px; + padding: 0 10px 10px; + } + + .separator + .dropdown-header { + padding-top: 2px; + } } .dropdown-menu-paging { @@ -154,6 +173,10 @@ .dropdown-menu-back { display: block; } + + .dropdown-content { + padding: 0 10px; + } } } @@ -218,20 +241,11 @@ } } -.dropdown-header { - padding-left: 5px; - padding-right: 5px; - color: $dropdown-header-color; - font-size: 13px; - line-height: 22px; -} .dropdown-title { position: relative; - margin-bottom: 10px; - padding-left: 30px; - padding-right: 30px; - padding-bottom: 10px; + padding: 0 0 15px; + margin: 0 10px 10px; font-weight: 600; line-height: 1; text-align: center; @@ -257,21 +271,26 @@ } .dropdown-menu-close { - right: 0; + right: 7px; + width: 20px; + height: 20px; + top: -1px; } .dropdown-menu-back { - left: 0; + left: 7px; + top: 2px; } .dropdown-input { position: relative; margin-bottom: 10px; + padding: 0 10px; .fa { position: absolute; top: 10px; - right: 10px; + right: 20px; color: #c7c7c7; font-size: 12px; pointer-events: none; @@ -281,6 +300,9 @@ display: none; cursor: pointer; pointer-events: all; + right: 22px; + top: 9px; + font-size: 14px; } &.has-value { diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 15c2d02f4ac..99307e7de02 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -66,7 +66,7 @@ $header-height: 58px; $fixed-layout-width: 1280px; $gl-avatar-size: 40px; $error-exclamation-point: #e62958; -$border-radius-default: 3px; +$border-radius-default: 2px; $btn-transparent-color: #8f8f8f; $ssh-key-icon-color: #8f8f8f; $ssh-key-icon-size: 18px; @@ -166,6 +166,7 @@ $regular_font: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif /* * Dropdowns */ +$dropdown-border-radius: 2px; $dropdown-width: 300px; $dropdown-bg: #fff; $dropdown-link-color: #555; @@ -178,7 +179,7 @@ $dropdown-header-color: #959494; $dropdown-title-btn-color: #bfbfbf; $dropdown-input-color: #555; $dropdown-input-focus-border: rgb(58, 171, 240); -$dropdown-input-focus-shadow: rgba(#000, .2); +$dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, .4); $dropdown-loading-bg: rgba(#fff, .6); $dropdown-toggle-bg: #fff; @@ -198,6 +199,8 @@ $award-emoji-new-btn-icon-color: #dcdcdc; /* * Search Box */ +$search-input-border-color: $dropdown-input-focus-border; +$search-input-focus-shadow-color: $dropdown-input-focus-shadow; $search-input-width: $dropdown-width; $location-badge-color: #aaa; $location-badge-bg: $gray-normal; diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index e41be4d502a..7525db891fc 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -109,12 +109,23 @@ .dropdown-menu { top: 30px; left: -5px; + padding: 0; + + ul { + padding: 10px 0; + } + } + + .dropdown-content { + max-height: 300px; } } &.search-active { form { @extend .form-control:focus; + border-color: $dropdown-input-focus-border; + box-shadow: 0 0 4px $search-input-focus-shadow-color; } .location-badge { diff --git a/app/views/layouts/_search.html.haml b/app/views/layouts/_search.html.haml index a7783365814..9d4ab9847a8 100644 --- a/app/views/layouts/_search.html.haml +++ b/app/views/layouts/_search.html.haml @@ -16,9 +16,10 @@ = search_field_tag "search", nil, placeholder: 'Search', class: "search-input dropdown-menu-toggle", spellcheck: false, tabindex: "1", autocomplete: 'off', data: { toggle: 'dropdown' } .dropdown-menu.dropdown-select = dropdown_content do - %li - %a.is-focused - Loading... + %ul + %li + %a.is-focused.dropdown-menu-empty-link + Loading... = dropdown_loading %i.search-icon %i.clear-icon.js-clear-input |