Mobile updates for search UI

app/assets/stylesheets/pages/search.scss

@@ -154,16 +154,46 @@
 }
 
 .search-holder {
+  @media (min-width: $screen-sm-min) {
     display: -webkit-flex;
     display:         flex;
+  }
 
   .search-field-holder {
     position: relative;
     width: 100%;
+    margin-right: 0;
+
+    @media (min-width: $screen-sm-min) {
+      margin-right: 5px;
+    }
+  }
+
+  .btn-search {
+    width: 100%;
+    margin-top: 5px;
+
+    @media (min-width: $screen-sm-min) {
+      width: auto;
+      margin-top: 0;
+      margin-left: 5px;
+    }
   }
 
-  .dropdown-toggle {
+  .dropdown {
+    @media (min-width: $screen-sm-min) {
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+  }
+
+  .dropdown-menu-toggle {
+    width: 100%;
+    margin-top: 5px;
+
+    @media (min-width: $screen-sm-min) {
       width: 160px;
-    text-align: left;
+      margin-top: 0;
+    }
   }
 }

app/helpers/search_helper.rb

@@ -25,7 +25,7 @@ module SearchHelper
       to = collection.offset_value + collection.length
       count = collection.count
 
-      "Showing #{from} - #{to} of #{count} results for All projects: \"#{@search_term}\""
+      "Showing #{from} - #{to} of #{count} results for \"#{@search_term}\""
     end
   end
 

app/views/search/_filter.html.haml

@@ -2,11 +2,11 @@
   = hidden_field_tag :group_id, params[:group_id]
 - if params[:project_id].present?
   = hidden_field_tag :project_id, params[:project_id]
-.dropdown.append-right-5.prepend-left-5
-  %button.dropdown-toggle.btn.js-search-group-dropdown{ type: "button", data: { toggle: "dropdown" } }
+.dropdown
+  %button.dropdown-menu-toggle.btn.js-search-group-dropdown{ type: "button", data: { toggle: "dropdown" } }
     Group:
     - if @group.present?
-      %strong= @group.name
+      = @group.name
     - else
       Any
     %b.caret
@@ -19,11 +19,11 @@
     = dropdown_content
     = dropdown_loading
 
-.dropdown.project-filter.append-right-5.prepend-left-5
-  %button.dropdown-toggle.btn.js-search-project-dropdown{ type: "button", data: { toggle: "dropdown" } }
+.dropdown.project-filter
+  %button.dropdown-menu-toggle.btn.js-search-project-dropdown{ type: "button", data: { toggle: "dropdown" } }
     Project:
     - if @project.present?
-      %strong= @project.name_with_namespace
+      = @project.name_with_namespace
     - else
       Any
     %b.caret
@@ -35,13 +35,3 @@
     = dropdown_filter("Search projects")
     = dropdown_content
     = dropdown_loading
-    -# .dropdown-content
-    -#   %ul
-    -#     %li
-    -#       = link_to search_filter_path(project_id: nil), class: ("is-active" if !params[:project_id].present?) do
-    -#         Any
-    -#     %li.divider
-    -#     - current_user.authorized_projects.sort_by(&:name_with_namespace).each do |project|
-    -#       %li
-    -#         = link_to search_filter_path(project_id: project.id, group_id: nil), class: ("is-active" if params[:project_id] == project.id.to_s) do
-    -#           = project.name_with_namespace

app/views/search/_form.html.haml

@@ -3,8 +3,8 @@
   = hidden_field_tag :scope, params[:scope]
 
   .search-holder
-    .search-field-holder.append-right-5
+    .search-field-holder
       = search_field_tag :search, params[:search], placeholder: "Search for projects, issues etc", class: "form-control search-text-input", id: "dashboard_search", autofocus: true, spellcheck: false
     - unless params[:snippets].eql? 'true'
       = render 'filter' if current_user
-    = button_tag 'Search', class: "btn btn-success btn-search prepend-left-5"
+    = button_tag 'Search', class: "btn btn-success btn-search"