kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Fix Sort dropdown reflow issue 

Make Sort dropdown behave the same as filters in narrower
viewports. Adjust dropdowns to fit on the same line in worst-case
scenario ("Oldest created" selected).

Closes #22562

See merge request !9533
This commit is contained in:
Jarkko Tuunanen 2017-02-23 22:24:28 +02:00 committed by Annabel Dunstone Gray
parent 0a58a8c825
commit 01fae38305
5 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/stylesheets/framework/dropdowns.scss
View File

@ -96,7 +96,7 @@
.dropdown-menu-toggle { .dropdown-menu-toggle {
@extend .dropdown-toggle; @extend .dropdown-toggle;
padding-right: 20px; padding-right: 25px;
position: relative; position: relative;
width: 163px; width: 163px;
text-overflow: ellipsis; text-overflow: ellipsis;

15
app/assets/stylesheets/framework/filters.scss
View File

@ -1,5 +1,4 @@
.filter-item { .filter-item {
margin-right: 6px;
vertical-align: top; vertical-align: top;
&.reset-filters { &.reset-filters {
@ -14,6 +13,20 @@
width: 132px; width: 132px;
} }
} }
.filter-item:not(:last-child) {
margin-right: 6px;
}
.sort-filter {
display: inline-block;
float: right;
}
.dropdown-menu-sort {
left: auto;
right: 0;
}
} }
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {

10
app/assets/stylesheets/pages/todos.scss
View File

@ -170,7 +170,11 @@
@media (max-width: $screen-sm-max) { @media (max-width: $screen-sm-max) {
.todos-filters { .todos-filters {
.dropdown-menu-toggle { .dropdown-menu-toggle {
width: 135px; width: 130px;
}
.dropdown-menu-toggle-sort {
width: auto;
} }
} }
} }
@ -200,10 +204,6 @@
} }
.todos-filters { .todos-filters {
.row-content-block {
padding-bottom: 50px;
}
.dropdown-menu-toggle { .dropdown-menu-toggle {
width: 100%; width: 100%;
} }

8
app/views/dashboard/todos/index.html.haml
View File

@ -46,16 +46,16 @@
= hidden_field_tag(:action_id, params[:action_id]) = hidden_field_tag(:action_id, params[:action_id])
= dropdown_tag(todo_actions_dropdown_label(params[:action_id], 'Action'), options: { toggle_class: 'js-action-search js-filter-submit', dropdown_class: 'dropdown-menu-selectable dropdown-menu-action js-filter-submit', = dropdown_tag(todo_actions_dropdown_label(params[:action_id], 'Action'), options: { toggle_class: 'js-action-search js-filter-submit', dropdown_class: 'dropdown-menu-selectable dropdown-menu-action js-filter-submit',
data: { data: todo_actions_options, default_label: 'Action' } }) data: { data: todo_actions_options, default_label: 'Action' } })
.pull-right .filter-item.sort-filter
.dropdown.inline.prepend-left-10 .dropdown
%button.dropdown-toggle{ type: 'button', 'data-toggle' => 'dropdown' } %button.dropdown-menu-toggle.dropdown-menu-toggle-sort{ type: 'button', 'data-toggle' => 'dropdown' }
%span.light %span.light
- if @sort.present? - if @sort.present?
= sort_options_hash[@sort] = sort_options_hash[@sort]
- else - else
= sort_title_recently_created = sort_title_recently_created
= icon('chevron-down') = icon('chevron-down')
%ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-sort %ul.dropdown-menu.dropdown-menu-sort
%li %li
= link_to todos_filter_path(sort: sort_value_priority) do = link_to todos_filter_path(sort: sort_value_priority) do
= sort_title_priority = sort_title_priority

4
changelogs/unreleased/22562-todos-filters.yml Normal file
View File

@ -0,0 +1,4 @@
---
title: Fix Sort dropdown reflow issue
merge_request: 9533
author: Jarkko Tuunanen