Commit e82b989e authored by Kushal Pandya's avatar Kushal Pandya Committed by Annabel Dunstone Gray

Fix secondary nav dropdown menu styling in tablet and mobile screens

parent 59de4e8f
...@@ -363,6 +363,12 @@ ...@@ -363,6 +363,12 @@
background-color: $white-light; background-color: $white-light;
border-top: 0; border-top: 0;
} }
.filter-dropdown-container {
.dropdown {
margin-left: 0;
}
}
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
...@@ -372,16 +378,6 @@ ...@@ -372,16 +378,6 @@
.dropdown-menu { .dropdown-menu {
width: 100%; width: 100%;
} }
.dropdown {
margin-left: 0;
}
.fa-chevron-down {
position: absolute;
right: 10px;
top: 10px;
}
} }
} }
......
...@@ -158,6 +158,10 @@ ...@@ -158,6 +158,10 @@
width: 100%; width: 100%;
} }
.dropdown-menu-toggle {
margin-bottom: 0;
}
form { form {
display: block; display: block;
height: auto; height: auto;
......
- sorted_by = sort_options_hash[@sort] - sorted_by = sort_options_hash[@sort]
.dropdown.inline.prepend-left-10 .dropdown.inline.prepend-left-10
%button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } } %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } }
= sorted_by = sorted_by
= icon('chevron-down') = icon('chevron-down')
%ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
......
- if current_user - if current_user
.dropdown .dropdown
%button.dropdown-toggle{ href: '#', "data-toggle" => "dropdown", 'data-display' => 'static' } %button.dropdown-menu-toggle{ href: '#', "data-toggle" => "dropdown", 'data-display' => 'static' }
= icon('globe') = icon('globe', class: 'mt-1')
%span.light= _("Visibility:") %span.light.ml-3= _("Visibility:")
- if params[:visibility_level].present? - if params[:visibility_level].present?
= visibility_level_label(params[:visibility_level].to_i) = visibility_level_label(params[:visibility_level].to_i)
- else - else
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
spellcheck: false, data: { 'filter-selector' => 'span.namespace-name' } spellcheck: false, data: { 'filter-selector' => 'span.namespace-name' }
.dropdown .dropdown
%button.dropdown-toggle{ type: 'button', 'data-toggle' => 'dropdown' } %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
%span.light sort: %span.light sort:
- if @sort.present? - if @sort.present?
= sort_options_hash[@sort] = sort_options_hash[@sort]
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
= search_field_tag :search, params[:search], { placeholder: s_('TagsPage|Filter by tag name'), id: 'tag-search', class: 'form-control search-text-input input-short', spellcheck: false } = search_field_tag :search, params[:search], { placeholder: s_('TagsPage|Filter by tag name'), id: 'tag-search', class: 'form-control search-text-input input-short', spellcheck: false }
.dropdown .dropdown
%button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown'} } %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown'} }
%span.light %span.light
= tags_sort_options_hash[@sort] = tags_sort_options_hash[@sort]
= icon('chevron-down') = icon('chevron-down')
......
.dropdown.inline.prepend-left-10 .dropdown.inline.prepend-left-10
%button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown' } } %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
%span.light %span.light
- if @sort.present? - if @sort.present?
= milestone_sort_options_hash[@sort] = milestone_sort_options_hash[@sort]
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
- viewing_issues = controller.controller_name == 'issues' || controller.action_name == 'issues' - viewing_issues = controller.controller_name == 'issues' || controller.action_name == 'issues'
.dropdown.inline.prepend-left-10 .dropdown.inline.prepend-left-10
%button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } } %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } }
= sorted_by = sorted_by
= icon('chevron-down') = icon('chevron-down')
%ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
- default_sort_by = sort_value_recently_created - default_sort_by = sort_value_recently_created
.dropdown.inline.js-group-filter-dropdown-wrap.append-right-10 .dropdown.inline.js-group-filter-dropdown-wrap.append-right-10
%button.dropdown-toggle{ type: 'button', 'data-toggle' => 'dropdown' } %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
%span.dropdown-label %span.dropdown-label
= options_hash[default_sort_by] = options_hash[default_sort_by]
= icon('chevron-down') = icon('chevron-down')
......
- sort_title = label_sort_options_hash[@sort] || sort_title_name_desc - sort_title = label_sort_options_hash[@sort] || sort_title_name_desc
.dropdown.inline .dropdown.inline
%button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown' } } %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
= sort_title = sort_title
= icon('chevron-down') = icon('chevron-down')
%ul.dropdown-menu.dropdown-menu-right.dropdown-menu-sort %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-sort
......
---
title: Fix Order By dropdown menu styling in tablet and mobile screens
merge_request: 23446
author:
type: fixed
...@@ -430,10 +430,10 @@ describe 'Filter issues', :js do ...@@ -430,10 +430,10 @@ describe 'Filter issues', :js do
expect_issues_list_count(2) expect_issues_list_count(2)
sort_toggle = find('.filtered-search-wrapper .dropdown-toggle') sort_toggle = find('.filter-dropdown-container .dropdown-menu-toggle')
sort_toggle.click sort_toggle.click
find('.filtered-search-wrapper .dropdown-menu li a', text: 'Created date').click find('.filter-dropdown-container .dropdown-menu li a', text: 'Created date').click
wait_for_requests wait_for_requests
expect(find('.issues-list .issue:first-of-type .issue-title-text a')).to have_content(new_issue.title) expect(find('.issues-list .issue:first-of-type .issue-title-text a')).to have_content(new_issue.title)
......
...@@ -20,7 +20,7 @@ describe "User sorts issues" do ...@@ -20,7 +20,7 @@ describe "User sorts issues" do
end end
it 'keeps the sort option' do it 'keeps the sort option' do
find('button.dropdown-toggle').click find('.filter-dropdown-container button.dropdown-menu-toggle').click
page.within('.content ul.dropdown-menu.dropdown-menu-right li') do page.within('.content ul.dropdown-menu.dropdown-menu-right li') do
click_link('Milestone') click_link('Milestone')
...@@ -40,7 +40,7 @@ describe "User sorts issues" do ...@@ -40,7 +40,7 @@ describe "User sorts issues" do
end end
it "sorts by popularity" do it "sorts by popularity" do
find("button.dropdown-toggle").click find(".filter-dropdown-container button.dropdown-menu-toggle").click
page.within(".content ul.dropdown-menu.dropdown-menu-right li") do page.within(".content ul.dropdown-menu.dropdown-menu-right li") do
click_link("Popularity") click_link("Popularity")
......
...@@ -19,7 +19,7 @@ describe 'User sorts merge requests' do ...@@ -19,7 +19,7 @@ describe 'User sorts merge requests' do
end end
it 'keeps the sort option' do it 'keeps the sort option' do
find('button.dropdown-toggle').click find('.filter-dropdown-container button.dropdown-menu-toggle').click
page.within('.content ul.dropdown-menu.dropdown-menu-right li') do page.within('.content ul.dropdown-menu.dropdown-menu-right li') do
click_link('Milestone') click_link('Milestone')
...@@ -49,7 +49,7 @@ describe 'User sorts merge requests' do ...@@ -49,7 +49,7 @@ describe 'User sorts merge requests' do
it 'separates remember sorting with issues' do it 'separates remember sorting with issues' do
create(:issue, project: project) create(:issue, project: project)
find('button.dropdown-toggle').click find('.filter-dropdown-container button.dropdown-menu-toggle').click
page.within('.content ul.dropdown-menu.dropdown-menu-right li') do page.within('.content ul.dropdown-menu.dropdown-menu-right li') do
click_link('Milestone') click_link('Milestone')
...@@ -70,7 +70,7 @@ describe 'User sorts merge requests' do ...@@ -70,7 +70,7 @@ describe 'User sorts merge requests' do
end end
it 'sorts by popularity' do it 'sorts by popularity' do
find('button.dropdown-toggle').click find('.filter-dropdown-container button.dropdown-menu-toggle').click
page.within('.content ul.dropdown-menu.dropdown-menu-right li') do page.within('.content ul.dropdown-menu.dropdown-menu-right li') do
click_link('Popularity') click_link('Popularity')
......
...@@ -32,7 +32,7 @@ describe 'Issue prioritization' do ...@@ -32,7 +32,7 @@ describe 'Issue prioritization' do
visit project_issues_path(project, sort: 'label_priority') visit project_issues_path(project, sort: 'label_priority')
# Ensure we are indicating that issues are sorted by priority # Ensure we are indicating that issues are sorted by priority
expect(page).to have_selector('.dropdown-toggle', text: 'Label priority') expect(page).to have_selector('.dropdown-menu-toggle', text: 'Label priority')
page.within('.issues-holder') do page.within('.issues-holder') do
issue_titles = all('.issues-list .issue-title-text').map(&:text) issue_titles = all('.issues-list .issue-title-text').map(&:text)
...@@ -70,7 +70,7 @@ describe 'Issue prioritization' do ...@@ -70,7 +70,7 @@ describe 'Issue prioritization' do
sign_in user sign_in user
visit project_issues_path(project, sort: 'label_priority') visit project_issues_path(project, sort: 'label_priority')
expect(page).to have_selector('.dropdown-toggle', text: 'Label priority') expect(page).to have_selector('.dropdown-menu-toggle', text: 'Label priority')
page.within('.issues-holder') do page.within('.issues-holder') do
issue_titles = all('.issues-list .issue-title-text').map(&:text) issue_titles = all('.issues-list .issue-title-text').map(&:text)
......
...@@ -13,7 +13,7 @@ module Spec ...@@ -13,7 +13,7 @@ module Spec
module Features module Features
module SortingHelpers module SortingHelpers
def sort_by(value) def sort_by(value)
find('button.dropdown-toggle').click find('.filter-dropdown-container button.dropdown-menu-toggle').click
page.within('.content ul.dropdown-menu.dropdown-menu-right li') do page.within('.content ul.dropdown-menu.dropdown-menu-right li') do
click_link(value) click_link(value)
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
# #
module SortingHelper module SortingHelper
def sorting_by(value) def sorting_by(value)
find('button.dropdown-toggle').click find('.filter-dropdown-container button.dropdown-menu-toggle').click
page.within('.content ul.dropdown-menu.dropdown-menu-right li') do page.within('.content ul.dropdown-menu.dropdown-menu-right li') do
click_link value click_link value
end end
......
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