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) {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.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
|
||||
|
|
|
@ -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 :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
|
||||
|
||||
|
|
Loading…
Reference in New Issue