summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPhil Hughes <me@iamphill.com>2019-07-15 08:07:53 +0000
committerPhil Hughes <me@iamphill.com>2019-07-15 08:07:53 +0000
commitc29da98f5296d894e8f4e0694bb008169a5bb6a8 (patch)
tree0095aa6424023edbe73af6c412fdfb95b4c57bc5
parent39544c7383a2c619074565518f2445ff10b568c5 (diff)
parentce4ab4110b7580585a2e07669b8067063ae535ce (diff)
downloadgitlab-ce-c29da98f5296d894e8f4e0694bb008169a5bb6a8.tar.gz
Merge branch 'mh/boards-filter-bar' into 'master'
Display boards filter bar on mobile Closes #45864 See merge request gitlab-org/gitlab-ce!30120
-rw-r--r--app/assets/stylesheets/framework/filters.scss53
-rw-r--r--app/views/shared/boards/_show.html.haml3
-rw-r--r--app/views/shared/issuable/_search_bar.html.haml6
-rw-r--r--changelogs/unreleased/mh-boards-filter-bar.yml5
4 files changed, 38 insertions, 29 deletions
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 26cbb7f5c13..5984efd1cf8 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/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 {
- .dropdown-toggle,
- .dropdown,
- .dropdown-menu {
+ .filter-dropdown-container > div {
+ margin: 0;
+
+ > .btn {
+ 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 {
diff --git a/app/views/shared/boards/_show.html.haml b/app/views/shared/boards/_show.html.haml
index 813fccd217b..1be230eedb9 100644
--- a/app/views/shared/boards/_show.html.haml
+++ b/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" }
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
index 3d6c5d29d44..a97ac5e2a2d 100644
--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/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
diff --git a/changelogs/unreleased/mh-boards-filter-bar.yml b/changelogs/unreleased/mh-boards-filter-bar.yml
new file mode 100644
index 00000000000..3e91b5ef443
--- /dev/null
+++ b/changelogs/unreleased/mh-boards-filter-bar.yml
@@ -0,0 +1,5 @@
+---
+title: Display boards filter bar on mobile
+merge_request: 30120
+author:
+type: fixed