From f89a8fee9d98b9d28d09123496c971fcc5949fff Mon Sep 17 00:00:00 2001 From: Denys Mishunov Date: Fri, 2 Aug 2019 23:59:29 +0200 Subject: [PATCH] Limiting search-field styling to search only - Re-organising search.scss - Rely more on utility-classes instead of component classes - Update relevant specs --- app/assets/stylesheets/pages/search.scss | 61 ++++++++++++------- app/views/search/_filter.html.haml | 12 ++-- app/views/search/_form.html.haml | 8 +-- .../search/user_uses_search_filters_spec.rb | 2 +- 4 files changed, 49 insertions(+), 34 deletions(-) diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 16efaba2799..58e46cfb70f 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -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, diff --git a/app/views/search/_filter.html.haml b/app/views/search/_filter.html.haml index 6495eaedee7..bee4aff605f 100644 --- a/app/views/search/_filter.html.haml +++ b/app/views/search/_filter.html.haml @@ -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 diff --git a/app/views/search/_form.html.haml b/app/views/search/_form.html.haml index 46756390538..4c4f3e0298b 100644 --- a/app/views/search/_form.html.haml +++ b/app/views/search/_form.html.haml @@ -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' diff --git a/spec/features/search/user_uses_search_filters_spec.rb b/spec/features/search/user_uses_search_filters_spec.rb index f5cda15b38a..fbd7da3c643 100644 --- a/spec/features/search/user_uses_search_filters_spec.rb +++ b/spec/features/search/user_uses_search_filters_spec.rb @@ -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