Fix secondary nav dropdown menu styling in tablet and mobile screens

2018-12-03 15:23:05 +00:00 · 2018-12-03 15:23:05 +00:00 · e82b989ef0
commit e82b989ef0
parent 59de4e8f5f
17 changed files with 36 additions and 31 deletions
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@ -363,6 +363,12 @@
    background-color: $white-light;
    border-top: 0;
  }
+
+  .filter-dropdown-container {
+    .dropdown {
+      margin-left: 0;
+    }
+  }
 }

@include media-breakpoint-down(sm) {
@ -372,16 +378,6 @@
    .dropdown-menu {
      width: 100%;
    }
-
-    .dropdown {
-      margin-left: 0;
-    }
-
-    .fa-chevron-down {
-      position: absolute;
-      right: 10px;
-      top: 10px;
-    }
  }
 }

--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@ -158,6 +158,10 @@
        width: 100%;
      }

+      .dropdown-menu-toggle {
+        margin-bottom: 0;
+      }
+
      form {
        display: block;
        height: auto;
--- a/app/views/admin/runners/_sort_dropdown.html.haml
+++ b/app/views/admin/runners/_sort_dropdown.html.haml
@ -1,7 +1,7 @@
 - sorted_by = sort_options_hash[@sort]

 .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
    = icon('chevron-down')
  %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
--- a/app/views/explore/projects/_filter.html.haml
+++ b/app/views/explore/projects/_filter.html.haml
@ -1,8 +1,8 @@
 - if current_user
  .dropdown
-    %button.dropdown-toggle{ href: '#', "data-toggle" => "dropdown", 'data-display' => 'static' }
-      = icon('globe')
-      %span.light= _("Visibility:")
+    %button.dropdown-menu-toggle{ href: '#', "data-toggle" => "dropdown", 'data-display' => 'static' }
+      = icon('globe', class: 'mt-1')
+      %span.light.ml-3= _("Visibility:")
      - if params[:visibility_level].present?
        = visibility_level_label(params[:visibility_level].to_i)
      - else
--- a/app/views/projects/forks/index.html.haml
+++ b/app/views/projects/forks/index.html.haml
@ -9,7 +9,7 @@
        spellcheck: false, data: { 'filter-selector' => 'span.namespace-name' }

    .dropdown
-      %button.dropdown-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
+      %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
        %span.light sort:
        - if @sort.present?
          = sort_options_hash[@sort]
--- a/app/views/projects/tags/index.html.haml
+++ b/app/views/projects/tags/index.html.haml
@ -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 }

      .dropdown
-        %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown'} }
+        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown'} }
          %span.light
            = tags_sort_options_hash[@sort]
          = icon('chevron-down')
--- a/app/views/shared/_milestones_sort_dropdown.html.haml
+++ b/app/views/shared/_milestones_sort_dropdown.html.haml
@ -1,5 +1,5 @@
 .dropdown.inline.prepend-left-10
-  %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+  %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
    %span.light
    - if @sort.present?
      = milestone_sort_options_hash[@sort]
--- a/app/views/shared/_sort_dropdown.html.haml
+++ b/app/views/shared/_sort_dropdown.html.haml
@ -2,7 +2,7 @@
 - viewing_issues = controller.controller_name == 'issues' || controller.action_name == 'issues'

 .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
    = icon('chevron-down')
  %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
--- a/app/views/shared/groups/_dropdown.html.haml
+++ b/app/views/shared/groups/_dropdown.html.haml
@ -9,7 +9,7 @@
    - default_sort_by = sort_value_recently_created

 .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
      = options_hash[default_sort_by]
    = icon('chevron-down')
--- a/app/views/shared/labels/_sort_dropdown.html.haml
+++ b/app/views/shared/labels/_sort_dropdown.html.haml
@ -1,6 +1,6 @@
 - sort_title = label_sort_options_hash[@sort] || sort_title_name_desc
 .dropdown.inline
-  %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+  %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
    = sort_title
    = icon('chevron-down')
  %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-sort
--- a/changelogs/unreleased/54648-fix-order-by-dropdown-tablet-screens.yml
+++ b/changelogs/unreleased/54648-fix-order-by-dropdown-tablet-screens.yml
@ -0,0 +1,5 @@
+---
+title: Fix Order By dropdown menu styling in tablet and mobile screens
+merge_request: 23446
+author:
+type: fixed
--- a/spec/features/issues/filtered_search/filter_issues_spec.rb
+++ b/spec/features/issues/filtered_search/filter_issues_spec.rb
@ -430,10 +430,10 @@ describe 'Filter issues', :js do

        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

-        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

        expect(find('.issues-list .issue:first-of-type .issue-title-text a')).to have_content(new_issue.title)
--- a/spec/features/issues/user_sorts_issues_spec.rb
+++ b/spec/features/issues/user_sorts_issues_spec.rb
@ -20,7 +20,7 @@ describe "User sorts issues" do
  end

  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
      click_link('Milestone')
@ -40,7 +40,7 @@ describe "User sorts issues" do
  end

  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
      click_link("Popularity")
--- a/spec/features/merge_requests/user_sorts_merge_requests_spec.rb
+++ b/spec/features/merge_requests/user_sorts_merge_requests_spec.rb
@ -19,7 +19,7 @@ describe 'User sorts merge requests' do
  end

  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
      click_link('Milestone')
@ -49,7 +49,7 @@ describe 'User sorts merge requests' do
  it 'separates remember sorting with issues' do
    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
      click_link('Milestone')
@ -70,7 +70,7 @@ describe 'User sorts merge requests' do
    end

    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
        click_link('Popularity')
--- a/spec/features/projects/labels/issues_sorted_by_priority_spec.rb
+++ b/spec/features/projects/labels/issues_sorted_by_priority_spec.rb
@ -32,7 +32,7 @@ describe 'Issue prioritization' do
      visit project_issues_path(project, sort: 'label_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
        issue_titles = all('.issues-list .issue-title-text').map(&:text)
@ -70,7 +70,7 @@ describe 'Issue prioritization' do
      sign_in user
      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
        issue_titles = all('.issues-list .issue-title-text').map(&:text)
--- a/spec/support/helpers/features/sorting_helpers.rb
+++ b/spec/support/helpers/features/sorting_helpers.rb
@ -13,7 +13,7 @@ module Spec
      module Features
        module SortingHelpers
          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
              click_link(value)
--- a/spec/support/helpers/sorting_helper.rb
+++ b/spec/support/helpers/sorting_helper.rb
@ -10,7 +10,7 @@
 #
 module SortingHelper
  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
      click_link value
    end