Display boards filter bar on mobile

app/assets/stylesheets/framework/filters.scss

@@ -9,14 +9,14 @@
     float: right;
     margin-right: 0;
 
-    @include media-breakpoint-down(xs) {
+    @include media-breakpoint-down(sm) {
       float: none;
     }
   }
 }
 
 .filters-section {
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     display: inline-block;
   }
 }
@@ -37,7 +37,7 @@
   }
 }
 
-@include media-breakpoint-down(xs) {
+@include media-breakpoint-down(sm) {
   .filter-item {
     display: block;
     margin: 0 0 10px;
@@ -50,12 +50,6 @@
 }
 
 .filtered-search-wrapper {
-  display: flex;
-
-  @include media-breakpoint-down(xs) {
-    flex-direction: column;
-  }
-
   .tokens-container {
     display: flex;
     flex: 1;
@@ -186,7 +180,7 @@
   border: 1px solid $border-color;
   background-color: $white-light;
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     flex: 1 1 auto;
     margin-bottom: 10px;
   }
@@ -259,7 +253,7 @@
   max-width: 280px;
   overflow: auto;
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     width: auto;
     left: 0;
     right: 0;
@@ -311,7 +305,7 @@
 .filtered-search-history-dropdown {
   width: 40%;
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     left: 0;
     right: 0;
     max-width: none;
@@ -341,35 +335,46 @@
 }
 
 .filter-dropdown-container {
-  display: flex;
-
   .dropdown-toggle {
     line-height: 22px;
   }
 }
 
-@include media-breakpoint-down(xs) {
+@include media-breakpoint-down(sm) {
   .issues-details-filters {
-    padding: 0 0 10px;
+    padding-top: 0;
+    padding-bottom: 0;
     background-color: $white-light;
     border-top: 0;
   }
 
-  .filter-dropdown-container {
+  .boards-switcher {
+    margin: 0 0 10px;
+
+    .boards-selector-wrapper,
     .dropdown {
-      margin-left: 0;
+      display: block;
     }
   }
-}
 
-@include media-breakpoint-down(sm) {
+  .filter-dropdown-container > div {
-  .filter-dropdown-container {
+    margin: 0;
-    .dropdown-toggle,
+
-    .dropdown,
+    > .btn {
-    .dropdown-menu {
+      margin: 0 0 10px;
       width: 100%;
     }
   }
+
+  .boards-add-list > .btn {
+    text-align: left;
+
+    > svg {
+      position: absolute;
+      top: 11px;
+      right: 6px;
+    }
+  }
 }
 
 .droplab-dropdown .dropdown-menu .filter-dropdown-item {

app/views/shared/boards/_show.html.haml

@@ -14,8 +14,7 @@
   %script#js-board-promotion{ type: "text/x-template" }= render_if_exists "shared/promotions/promote_issue_board"
 
 #board-app.boards-app.position-relative{ "v-cloak" => "true", data: board_data, ":class" => "{ 'is-compact': detailIssueVisible }" }
-  .d-none.d-sm-none.d-md-block
+  = render 'shared/issuable/search_bar', type: :boards, board: board
-    = render 'shared/issuable/search_bar', type: :boards, board: board
 
   .boards-list.w-100.py-3.px-2.text-nowrap
     .boards-app-loading.w-100.text-center{ "v-if" => "loading" }

app/views/shared/issuable/_search_bar.html.haml

@@ -4,7 +4,7 @@
 - user_can_admin_list = board && can?(current_user, :admin_list, board.parent)
 
 .issues-filters{ class: ("w-100" if type == :boards_modal) }
-  .issues-details-filters.filtered-search-block.d-flex{ class: block_css_class, "v-pre" => type == :boards_modal }
+  .issues-details-filters.filtered-search-block.d-flex.flex-column.flex-md-row{ class: block_css_class, "v-pre" => type == :boards_modal }
     - if type == :boards
       = render_if_exists "shared/boards/switcher", board: board
     = form_tag page_filter_path, method: :get, class: 'filter-form js-filter-form w-100' do
@@ -13,7 +13,7 @@
       - if @can_bulk_update
         .check-all-holder.d-none.d-sm-block.hidden
           = check_box_tag "check-all-issues", nil, false, class: "check-all-issues left"
-      .issues-other-filters.filtered-search-wrapper
+      .issues-other-filters.filtered-search-wrapper.d-flex.flex-column.flex-md-row
         .filtered-search-box
           - if type != :boards_modal && type != :boards
             = dropdown_tag(custom_icon('icon_history'),
@@ -147,7 +147,7 @@
 
           %button.clear-search.hidden{ type: 'button' }
             = icon('times')
-        .filter-dropdown-container
+        .filter-dropdown-container.d-flex.flex-column.flex-md-row
           - if type == :boards
             .js-board-config{ data: { can_admin_list: user_can_admin_list, has_scope: board.scoped? } }
             - if user_can_admin_list

changelogs/unreleased/mh-boards-filter-bar.yml

@@ -0,0 +1,5 @@
+---
+title: Display boards filter bar on mobile
+merge_request: 30120
+author:
+type: fixed