Commit 3e517406 authored by Olena Horal-Koretska's avatar Olena Horal-Koretska

Merge branch...

Merge branch '238931-improve-responsive-state-of-board-filtering-bar-when-group-by-dropdown-is-visible' into 'master'

Swimlanes - Fix mobile view of filtering bar

See merge request gitlab-org/gitlab!45226
parents 635c3d8d 4cf5facb
......@@ -355,28 +355,45 @@
background-color: $white;
}
.boards-switcher {
margin: 0 0 10px;
.filtered-search-block .boards-switcher {
@include gl-mr-0;
margin-bottom: $gl-input-padding;
.boards-selector-wrapper,
.dropdown {
display: block;
@include gl-display-block;
}
}
.filter-dropdown-container {
> div {
margin: 0;
@include gl-m-0;
> .btn {
margin: 0 0 10px;
width: 100%;
margin: 0 0 $gl-input-padding;
@include gl-w-full;
}
}
.board-labels-toggle-wrapper {
margin-bottom: $gl-input-padding;
}
.board-swimlanes-toggle-wrapper {
@include gl-h-auto;
margin-bottom: $gl-input-padding;
> span,
> .dropdown,
.gl-dropdown-toggle {
@include gl-w-full;
@include gl-m-0;
}
> .dropdown {
@include gl-mt-2;
}
}
}
.boards-add-list > .btn {
......
---
title: Fix mobile view of filtering bar
merge_request: 45226
author:
type: fixed
......@@ -50,19 +50,19 @@ export default {
<template>
<div
class="board-swimlanes-toggle-wrapper gl-display-flex gl-align-items-center gl-ml-3"
class="board-swimlanes-toggle-wrapper gl-display-md-flex gl-align-items-center gl-ml-3"
data-testid="toggle-swimlanes"
>
<span
class="board-swimlanes-toggle-text gl-white-space-nowrap"
class="board-swimlanes-toggle-text gl-white-space-nowrap gl-font-weight-bold"
data-testid="toggle-swimlanes-label"
>
{{ __('Group by:') }}
{{ __('Group by') }}
</span>
<gl-dropdown
right
:text="dropdownLabel"
toggle-class="gl-ml-2 gl-border-none gl-inset-border-1-gray-200! border-radius-default"
toggle-class="gl-ml-3 gl-border-none gl-inset-border-1-gray-200! border-radius-default"
>
<gl-dropdown-item
:is-check-item="true"
......
......@@ -41,7 +41,7 @@ describe('ToggleEpicsSwimlanes', () => {
});
it('renders "Group by" label', () => {
expect(wrapper.find('[data-testid="toggle-swimlanes-label"]').text()).toEqual('Group by:');
expect(wrapper.find('[data-testid="toggle-swimlanes-label"]').text()).toEqual('Group by');
});
it('renders dropdown with 2 options', () => {
......
......@@ -12699,7 +12699,7 @@ msgstr ""
msgid "Group avatar"
msgstr ""
msgid "Group by:"
msgid "Group by"
msgstr ""
msgid "Group description"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment