Limiting search-field styling to search only
- Re-organising search.scss - Rely more on utility-classes instead of component classes - Update relevant specs
This commit is contained in:
parent
43084468ec
commit
f89a8fee9d
|
@ -186,25 +186,20 @@ input[type='checkbox']:hover {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-holder {
|
.search-field-holder,
|
||||||
|
.project-filter-form {
|
||||||
|
flex: 1 0 auto;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
@include media-breakpoint-up(lg) {
|
.search-holder & {
|
||||||
display: flex;
|
|
||||||
align-items: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-field-holder,
|
|
||||||
.project-filter-form {
|
|
||||||
flex: 1 0 auto;
|
|
||||||
position: relative;
|
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
|
||||||
@include media-breakpoint-up(lg) {
|
@include media-breakpoint-up(sm) {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.search-icon {
|
.search-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 10px;
|
left: 10px;
|
||||||
|
@ -218,13 +213,20 @@ input[type='checkbox']:hover {
|
||||||
padding-left: $gl-padding + 15px;
|
padding-left: $gl-padding + 15px;
|
||||||
padding-right: $gl-padding + 15px;
|
padding-right: $gl-padding + 15px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-holder {
|
||||||
|
@include media-breakpoint-up(sm) {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
.btn-search,
|
.btn-search,
|
||||||
.btn-success {
|
.btn-success,
|
||||||
|
.dropdown-menu-toggle {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
|
|
||||||
@include media-breakpoint-up(lg) {
|
@include media-breakpoint-up(sm) {
|
||||||
width: auto;
|
width: auto;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
|
@ -232,21 +234,15 @@ input[type='checkbox']:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown {
|
.dropdown {
|
||||||
margin-bottom: $gl-padding;
|
@include media-breakpoint-up(sm) {
|
||||||
|
|
||||||
@include media-breakpoint-up(lg) {
|
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu-toggle {
|
.dropdown-menu-toggle {
|
||||||
width: 100%;
|
@include media-breakpoint-up(sm) {
|
||||||
margin-top: 5px;
|
width: 180px;
|
||||||
|
|
||||||
@include media-breakpoint-up(lg) {
|
|
||||||
width: 240px;
|
|
||||||
margin-top: 0;
|
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
|
// 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 */
|
/* stylelint-disable property-no-vendor-prefix */
|
||||||
input[type='search']::-webkit-search-decoration,
|
input[type='search']::-webkit-search-decoration,
|
||||||
|
|
|
@ -2,10 +2,10 @@
|
||||||
= hidden_field_tag :group_id, params[:group_id]
|
= hidden_field_tag :group_id, params[:group_id]
|
||||||
- if params[:project_id].present?
|
- if params[:project_id].present?
|
||||||
= hidden_field_tag :project_id, params[:project_id]
|
= hidden_field_tag :project_id, params[:project_id]
|
||||||
.dropdown
|
.dropdown.form-group.mb-lg-0.mx-lg-1
|
||||||
%label{ for: "dashboard_search_group" }
|
%label.d-block{ for: "dashboard_search_group" }
|
||||||
= _("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
|
%span.dropdown-toggle-text
|
||||||
- if @group.present?
|
- if @group.present?
|
||||||
= @group.name
|
= @group.name
|
||||||
|
@ -18,10 +18,10 @@
|
||||||
= dropdown_content
|
= dropdown_content
|
||||||
= dropdown_loading
|
= dropdown_loading
|
||||||
|
|
||||||
.dropdown.project-filter
|
.dropdown.project-filter.form-group.mb-lg-0.mx-lg-1
|
||||||
%label{ for: "dashboard_search_project" }
|
%label.d-block{ for: "dashboard_search_project" }
|
||||||
= _("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
|
%span.dropdown-toggle-text
|
||||||
- if @project.present?
|
- if @project.present?
|
||||||
= @project.full_name
|
= @project.full_name
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
= 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 :snippets, params[:snippets]
|
||||||
= hidden_field_tag :scope, params[:scope]
|
= hidden_field_tag :scope, params[:scope]
|
||||||
|
|
||||||
.search-holder
|
.d-lg-flex.align-items-end
|
||||||
.search-field-holder.form-group
|
.search-field-holder.form-group.mr-lg-1.mb-lg-0
|
||||||
%label{ for: "dashboard_search" }
|
%label{ for: "dashboard_search" }
|
||||||
= _("What are you searching for?")
|
= _("What are you searching for?")
|
||||||
.position-relative
|
.position-relative
|
||||||
|
@ -16,5 +16,5 @@
|
||||||
- unless params[:snippets].eql? 'true'
|
- unless params[:snippets].eql? 'true'
|
||||||
= render 'filter'
|
= render 'filter'
|
||||||
.d-flex-center.flex-column.flex-lg-row
|
.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'
|
= render_if_exists 'search/form_elasticsearch'
|
||||||
|
|
|
@ -22,7 +22,7 @@ describe 'User uses search filters', :js do
|
||||||
|
|
||||||
wait_for_requests
|
wait_for_requests
|
||||||
|
|
||||||
page.within('.search-holder') do
|
page.within('.search-page-form') do
|
||||||
click_link(group.name)
|
click_link(group.name)
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue