From d139efcfa18ab7363af34450b20ff98e4ce912ce Mon Sep 17 00:00:00 2001 From: octavioamu Date: Tue, 4 Feb 2020 19:06:40 -0300 Subject: [PATCH 1/2] fix search css and js bugs --- app/assets/v2/css/search.css | 209 +++++-------------- app/assets/v2/js/search.js | 24 ++- app/dashboard/templates/dashboard/users.html | 1 - 3 files changed, 70 insertions(+), 164 deletions(-) diff --git a/app/assets/v2/css/search.css b/app/assets/v2/css/search.css index d8cd8b2fafe..4bcaa6535bf 100644 --- a/app/assets/v2/css/search.css +++ b/app/assets/v2/css/search.css @@ -1,206 +1,101 @@ -:root { - --color-search: 37, 232, 153; - --badge-bg: #d6fbeb; - --badge-text: #00a55e; - --link-color: #3e00ff; - --badge-blue-bg: #e7f0fa; - --badge-blue-text: #6587ae; -} -.select2-results{ - max-height: 1100px; +.select2-container--gc-search .select2-results__options { + max-height: 70vh; overflow-y: scroll; } -.navbar-nav .select2-selection__placeholder{ + +.select2-container--gc-search .select2-selection__placeholder{ color: white; } -.navbar-nav .select2{ - height: 14px; -} -.select2-container--search .select2-dropdown{ - width: 300px !important; - left: -300px !important; -} -.select2-container--search .element-search-result img{ - max-width: 50px; - max-height: 50px; - border-radius: 25px; - float: left; -} -.navbar-nav .select2-container--search .select2-selection.select2-selection--single{ - border: none !important; - float: right; - font-size: 14px; - margin-top: 5px; -} -#search_container{ - width: 20px; - margin-left: 25px; - margin-right: -10px; -} -.navbar-nav .nav-link.search__icon { - position: relative; - font-size: 18px; - color: white; +.select2-container.select2-container--gc-search .select2-selection--single .select2-selection__rendered { + display: block; + padding: .5rem 1rem; } -.nav-line { - color: #666666; - font-size: 12px; - font-weight: normal; +.select2-container--gc-search .select2-dropdown{ + /* width: 300px !important; */ + /* left: -300px !important; */ + min-width: 300px; +} +@media (min-width: 768px) { + .select2-container--gc-search .select2-dropdown{ + /* width: 300px !important; */ + left: -250px !important; + } } -.search__icon.dropdown-toggle::after { - content: none; +.select2-container--gc-search .search-result__description img{ + max-width: 50px; + max-height: 50px; + float: left; + margin-top: 6px; } -.search-box { - width: 500px; - max-width: calc(100vw - 2em); - background-color: #ffffff; +.select2-container--gc-search .select2-selection.select2-selection--single{ + border: none !important; } -.search-box__form { - padding: 1em; +#search_container{ + display: flex; + align-items: center; } -.select2-results__option { +.select2-container--gc-search .select2-results__option { color: #212529; display: flex; align-items: center; border-bottom: 1px solid #e7f0fa; + border-left: 5px solid transparent; } -.select2-results__option:nth-child(even) { +.select2-container--gc-search .select2-results__option:nth-child(even) { background-color: #f9f9f9; } -.select2-results__option:hover, -.select2-results__option.selected { + +.select2-container--gc-search .select2-results__option:not(.select2-results__message):hover, +.select2-container--gc-search .select2-results__option.selected { background-color: #fafafa; color: #5d666f; cursor: pointer; text-decoration: none; - border: none; - border-left: 5px solid #3E00FF; + /* border: none; */ + border-left-color: #3E00FF; } -.select2-results__option a { +.select2-container--gc-search .select2-results__option a { margin-bottom: 0; text-decoration: none; } -.search__link { - color: var(--link-color); - font-size: 0.75rem; -} - -.search__header { - display: flex; - justify-content: space-between; - border-bottom: 1px solid #d8d8d8; - padding-bottom: 0.8em; -} - -.search__title { - font-size: 0.87rem; - font-weight: 600; -} - -.search-result { +.select2-container--gc-search .search-result { max-height: 328px; - overflow-y: auto; + overflow-y: hidden; padding: 0; position: relative; z-index: 1; } -.search-result__item { - font-size: 12px; - display: flex; - align-items: center; - border-bottom: 1px solid #d8d8d8; - padding: 1em 0; - animation: animateElement linear 0.3s; - animation-iteration-count: 1; -} - -.search-result__title { - color: #000000; - font-size: 14px; - font-weight: normal; -} - -.search-result__description { +.select2-container--gc-search .search-result__description { color: #666666; font-size: 12px; font-weight: normal; } -.search__avatar { +.select2-container--gc-search .search__avatar { flex-shrink: 0; border-radius: 50px; width: 36px; height: 36px; margin-right: 1em; -} - -@keyframes BadgePulse { - 0% { - -moz-box-shadow: 0 0 0 0 rgba(37, 232, 153, 0.4); - -webkit-box-shadow: 0 0 0 0 rgba(37, 232, 153, 0.4); - box-shadow: 0 0 0 0 rgba(37, 232, 153, 0.4); - } - - 70% { - -moz-box-shadow: 0 0 0 10px rgba(37, 232, 153, 0); - -webkit-box-shadow: 0 0 0 10px rgba(37, 232, 153, 0); - box-shadow: 0 0 0 10px rgba(37, 232, 153, 0); - } - - 100% { - -moz-box-shadow: 0 0 0 20px rgba(37, 232, 153, 0); - -webkit-box-shadow: 0 0 0 20px rgba(37, 232, 153, 0); - box-shadow: 0 0 0 20px rgba(37, 232, 153, 0); - } -} - -@keyframes animateElement { - 0% { - opacity: 0; - transform: translate(0px, -10px); - } - 100% { - opacity: 1; - transform: translate(0px, 0px); - } -} - -.has-search .form-control { - padding-right: 2.375rem; -} - -.has-search .form-control-feedback { - position: absolute; - z-index: 2; - display: block; - width: 2.375rem; - height: 2.375rem; - line-height: 2.375rem; - text-align: center; - pointer-events: none; - color: #aaa; -} + float: left; -.nav-item { - font-size: 10px; - font-weight: 800; } -.search-result__description .tag { +.select2-container--gc-search .search-result__description .tag { display: inline-block; } -.select2-results__option .tag { +.select2-container--gc-search .select2-results__option .tag { background-color: #E7F0FA; color: #6700FF; padding: 5px 10px; @@ -209,9 +104,19 @@ font-size: 12px; } -.select2-results__option:hover .tag, -.select2-results__option.selected .tag{ +.select2-container--gc-search .select2-results__option:hover .tag, +.select2-container--gc-search .select2-results__option.selected .tag{ background-color: #6700FF; color: #E7F0FA; - -} \ No newline at end of file +} + +.select2-container--gc-search.select2-container--open .select2-dropdown { + border-radius: 4px; + box-shadow: 0 1rem 3rem rgba(0,0,0,.175); +} + +.select2-container--gc-search .select2-search--dropdown .select2-search__field { + border: 1px solid #c5c5c5; + padding: 0.6em; + border-radius: 3px; +} diff --git a/app/assets/v2/js/search.js b/app/assets/v2/js/search.js index c4dcf8c4e1e..0fb3fab9c7c 100644 --- a/app/assets/v2/js/search.js +++ b/app/assets/v2/js/search.js @@ -27,9 +27,11 @@ function search(elem) { }, cache: true }, - theme: 'search', - placeholder: '', + theme: 'gc-search', + placeholder: '', allowClear: true, + + // dropdownAutoWidth: true, minimumInputLength: 3, escapeMarkup: function(markup) { return markup; @@ -91,7 +93,7 @@ $('document').ready(function() { e.preventDefault(); }); - $(document).on ('click', '.element-search-result', function() { + $(document).on ('click', '.select2-container--gc-search .element-search-result', function() { document.location.href = $(this).data('url'); }); @@ -99,36 +101,36 @@ $('document').ready(function() { minimumResultsForSearch: 20 }); - $('.select2-search').select2({}); + // $('.select2-search').select2({}); // listen for keyups in both input widget AND dropdown - $('body').on('keyup', '.select2,.select2-dropdown', function(e) { + $('body').on('keyup', '.select2-container--gc-search', function(e) { var KEYS = { UP: 38, DOWN: 40, ENTER: 13 }; - var $sel = $('.select2.select2-container--open'); + var $sel = $('.select2-container--gc-search.select2-container--open'); if ($sel.length) { var target; if (e.keyCode === KEYS.DOWN && !e.altKey) { - target = $('.select2-results__option.selected'); + target = $('.select2-container--gc-search .select2-results__option.selected'); if (!target.length) { - target = $('.select2-results__option:first-child'); + target = $('.select2-container--gc-search .select2-results__option:first-child'); } else if (target.next().length) { target.removeClass('selected'); target = target.next(); } target.addClass('selected'); } else if (e.keyCode === KEYS.UP) { - target = $('.select2-results__option.selected'); + target = $('.select2-container--gc-search .select2-results__option.selected'); if (!target.length) { - target = $('.select2-results__option:first-child'); + target = $('.select2-container--gc-search .select2-results__option:first-child'); } else if (target.prev().length) { target.removeClass('selected'); target = target.prev(); } target.addClass('selected'); } else if (e.keyCode === KEYS.ENTER) { - target = $('.select2-results__option.selected'); + target = $('.select2-container--gc-search .select2-results__option.selected'); var url = target.find('.search-result').data('url'); if (target && url) { diff --git a/app/dashboard/templates/dashboard/users.html b/app/dashboard/templates/dashboard/users.html index 75d0b0e8978..df1a6e9a378 100644 --- a/app/dashboard/templates/dashboard/users.html +++ b/app/dashboard/templates/dashboard/users.html @@ -25,7 +25,6 @@ - From d46575d83463acacfe35bc15985889e443390bf5 Mon Sep 17 00:00:00 2001 From: octavioamu Date: Wed, 5 Feb 2020 02:52:52 -0300 Subject: [PATCH 2/2] cleanup code --- app/assets/v2/css/search.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/app/assets/v2/css/search.css b/app/assets/v2/css/search.css index 4bcaa6535bf..5d13b344883 100644 --- a/app/assets/v2/css/search.css +++ b/app/assets/v2/css/search.css @@ -13,13 +13,11 @@ } .select2-container--gc-search .select2-dropdown{ - /* width: 300px !important; */ - /* left: -300px !important; */ min-width: 300px; } + @media (min-width: 768px) { .select2-container--gc-search .select2-dropdown{ - /* width: 300px !important; */ left: -250px !important; } } @@ -58,7 +56,6 @@ color: #5d666f; cursor: pointer; text-decoration: none; - /* border: none; */ border-left-color: #3E00FF; }