diff --git a/app/assets/images/icons.svg b/app/assets/images/icons.svg index 84d68904a..3bd8ae53b 100644 --- a/app/assets/images/icons.svg +++ b/app/assets/images/icons.svg @@ -331,6 +331,10 @@ + + + + diff --git a/app/assets/images/search.svg b/app/assets/images/search.svg new file mode 100644 index 000000000..c8142072b --- /dev/null +++ b/app/assets/images/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 89d385ca0..a45f821b6 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -268,7 +268,9 @@ a#toggle-completed-versions {color:#999;} } .drdn.expanded .drdn-content {display:block;} -.drdn-content .quick-search {margin:8px;} +.drdn-content .quick-search {margin:8px; display: flex; align-items: center;} +.drdn-content .quick-search svg {margin-left: 5px; position: absolute;} +.drdn-content .quick-search input.autocomplete {background: none; padding-left: 24px !important;} .drdn-content .autocomplete {box-sizing: border-box; width:100% !important; height:28px;} .drdn-content .autocomplete:focus {border-color:#5ad;} .drdn-items {max-height:400px; overflow:auto;} @@ -1140,7 +1142,7 @@ input#principal_search, input#user_search {width:90%} .roles-selection label {display:inline-block; width:210px;} input.autocomplete { - background: #fff url(/magnifier.png) no-repeat 2px 50%; padding-left:20px !important; + background: #fff url(/search.svg) no-repeat 2px 50%; padding-left:20px !important; } input.autocomplete.ajax-loading { background-image: url(/loading.gif); diff --git a/app/assets/stylesheets/responsive.css b/app/assets/stylesheets/responsive.css index ea30ab86c..4eff84187 100644 --- a/app/assets/stylesheets/responsive.css +++ b/app/assets/stylesheets/responsive.css @@ -184,9 +184,14 @@ font-size:0.9375rem; font-weight:normal; } + #project-jump .drdn-content svg { + width: 1.25rem; + height: 1.25rem; + } #project-jump .drdn-content .autocomplete { height:40px; font-size:1.25rem; + padding-left: 28px !important; } #project-jump .drdn-content a { padding:8px; @@ -259,21 +264,7 @@ content: '\2261'; } - /* search magnifier icon */ - .search-magnifier { - font-family: var(--fonts-main); - color: #bbb; - - cursor: pointer; - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(45deg); - -o-transform: rotate(45deg); - } - .search-magnifier--flyout { - font-size: 1.5625rem; - line-height: 54px; - position: absolute; z-index: 1; left: 12px; diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index bac8da266..d708019c9 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -610,7 +610,7 @@ module ApplicationHelper :class => (@project.nil? && controller.class.main_menu ? 'selected' : nil)) content = content_tag('div', - content_tag('div', q, :class => 'quick-search') + + content_tag('div', sprite_icon('search', icon_only: true, size: 18) + q, :class => 'quick-search') + content_tag('div', render_projects_for_jump_box(projects, selected: @project), :class => 'drdn-items projects selection') + content_tag('div', all, :class => 'drdn-items all-projects selection'), diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb index 031c847f3..fdd560481 100644 --- a/app/views/layouts/base.html.erb +++ b/app/views/layouts/base.html.erb @@ -27,7 +27,7 @@ diff --git a/config/icon_source.yml b/config/icon_source.yml index a97b4bcb9..92ea716b1 100644 --- a/config/icon_source.yml +++ b/config/icon_source.yml @@ -197,3 +197,5 @@ svg: chevrons-left - name: key svg: key +- name: search + svg: search