Commit f89a8fee authored by Denys Mishunov's avatar Denys Mishunov

Limiting search-field styling to search only

- Re-organising search.scss
- Rely more on utility-classes instead of component classes
- Update relevant specs
parent 43084468
......@@ -186,25 +186,20 @@ input[type='checkbox']:hover {
}
}
.search-holder {
@include media-breakpoint-up(lg) {
display: flex;
align-items: flex-end;
}
.search-field-holder,
.project-filter-form {
.search-field-holder,
.project-filter-form {
flex: 1 0 auto;
position: relative;
.search-holder & {
margin-right: 0;
@include media-breakpoint-up(lg) {
@include media-breakpoint-up(sm) {
margin-right: 5px;
margin-bottom: 0;
}
}
.search-icon {
position: absolute;
left: 10px;
......@@ -218,13 +213,20 @@ input[type='checkbox']:hover {
padding-left: $gl-padding + 15px;
padding-right: $gl-padding + 15px;
}
}
.search-holder {
@include media-breakpoint-up(sm) {
display: flex;
}
.btn-search,
.btn-success {
.btn-success,
.dropdown-menu-toggle {
width: 100%;
margin-top: 5px;
@include media-breakpoint-up(lg) {
@include media-breakpoint-up(sm) {
width: auto;
margin-top: 0;
margin-left: 5px;
......@@ -232,21 +234,15 @@ input[type='checkbox']:hover {
}
.dropdown {
margin-bottom: $gl-padding;
@include media-breakpoint-up(lg) {
@include media-breakpoint-up(sm) {
margin-left: 5px;
margin-right: 5px;
margin-bottom: 0;
}
}
.dropdown-menu-toggle {
width: 100%;
margin-top: 5px;
@include media-breakpoint-up(lg) {
width: 240px;
@include media-breakpoint-up(sm) {
width: 180px;
margin-top: 0;
}
}
......@@ -268,6 +264,25 @@ input[type='checkbox']:hover {
}
}
.search-page-form {
.dropdown-menu-toggle,
.btn-search {
width: 100%;
}
.dropdown-menu-toggle {
@include media-breakpoint-up(lg) {
width: 240px;
}
}
.btn-search {
@include media-breakpoint-up(lg) {
width: auto;
}
}
}
// Disable webkit input icons, link to solution: https://stackoverflow.com/questions/9421551/how-do-i-remove-all-default-webkit-search-field-styling
/* stylelint-disable property-no-vendor-prefix */
input[type='search']::-webkit-search-decoration,
......
......@@ -2,10 +2,10 @@
= hidden_field_tag :group_id, params[:group_id]
- if params[:project_id].present?
= hidden_field_tag :project_id, params[:project_id]
.dropdown
%label{ for: "dashboard_search_group" }
.dropdown.form-group.mb-lg-0.mx-lg-1
%label.d-block{ for: "dashboard_search_group" }
= _("Group")
%button.form-control.dropdown-menu-toggle.js-search-group-dropdown{ type: "button", id: "dashboard_search_group", data: { toggle: "dropdown", group_id: params[:group_id] } }
%button.dropdown-menu-toggle.js-search-group-dropdown.mt-0{ type: "button", id: "dashboard_search_group", data: { toggle: "dropdown", group_id: params[:group_id] } }
%span.dropdown-toggle-text
- if @group.present?
= @group.name
......@@ -18,10 +18,10 @@
= dropdown_content
= dropdown_loading
.dropdown.project-filter
%label{ for: "dashboard_search_project" }
.dropdown.project-filter.form-group.mb-lg-0.mx-lg-1
%label.d-block{ for: "dashboard_search_project" }
= _("Project")
%button.form-control.dropdown-menu-toggle.js-search-project-dropdown{ type: "button", id: "dashboard_search_project", data: { toggle: "dropdown"} }
%button.dropdown-menu-toggle.js-search-project-dropdown.mt-0{ type: "button", id: "dashboard_search_project", data: { toggle: "dropdown"} }
%span.dropdown-toggle-text
- if @project.present?
= @project.full_name
......
= form_tag search_path, method: :get, class: 'js-search-form' do |f|
= form_tag search_path, method: :get, class: 'search-page-form js-search-form' do |f|
= hidden_field_tag :snippets, params[:snippets]
= hidden_field_tag :scope, params[:scope]
.search-holder
.search-field-holder.form-group
.d-lg-flex.align-items-end
.search-field-holder.form-group.mr-lg-1.mb-lg-0
%label{ for: "dashboard_search" }
= _("What are you searching for?")
.position-relative
......@@ -16,5 +16,5 @@
- unless params[:snippets].eql? 'true'
= render 'filter'
.d-flex-center.flex-column.flex-lg-row
= button_tag _("Search"), class: "btn btn-success btn-search form-control"
= button_tag _("Search"), class: "btn btn-success btn-search form-control mt-lg-0 ml-lg-1 align-self-end"
= render_if_exists 'search/form_elasticsearch'
......@@ -22,7 +22,7 @@ describe 'User uses search filters', :js do
wait_for_requests
page.within('.search-holder') do
page.within('.search-page-form') do
click_link(group.name)
end
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment