Commit 52fd1b08 authored by Clement Ho's avatar Clement Ho

Add vertical scrolling for dropdowns

parent 9f1c19ce
...@@ -74,6 +74,11 @@ ...@@ -74,6 +74,11 @@
} }
.filter-dropdown { .filter-dropdown {
max-height: 215px;
overflow-x: scroll;
}
.filter-dropdown-item {
.btn { .btn {
border: none; border: none;
width: 100%; width: 100%;
...@@ -103,3 +108,7 @@ ...@@ -103,3 +108,7 @@
flex-direction: column; flex-direction: column;
} }
} }
.hint-dropdown {
width: 250px;
}
...@@ -16,8 +16,8 @@ ...@@ -16,8 +16,8 @@
= icon('filter') = icon('filter')
%button.clear-search.hidden{ type: 'button' } %button.clear-search.hidden{ type: 'button' }
= icon('times') = icon('times')
%ul#js-dropdown-hint.dropdown-menu{ 'data-dynamic' => true } %ul#js-dropdown-hint.dropdown-menu.hint-dropdown{ 'data-dynamic' => true }
%li.filter-dropdown %li.filter-dropdown-item
%button.btn.btn-link %button.btn.btn-link
%i.fa{ 'class': '{{icon}}'} %i.fa{ 'class': '{{icon}}'}
%span.js-filter-hint %span.js-filter-hint
...@@ -25,8 +25,8 @@ ...@@ -25,8 +25,8 @@
%span.js-filter-tag.dropdown-light-content %span.js-filter-tag.dropdown-light-content
{{tag}} {{tag}}
#js-dropdown-author.dropdown-menu{ 'data-dropdown' => true } #js-dropdown-author.dropdown-menu{ 'data-dropdown' => true }
%ul{ 'data-dynamic' => true } %ul.filter-dropdown{ 'data-dynamic' => true }
%li.filter-dropdown %li.filter-dropdown-item
%button.btn.btn-link.dropdown-user %button.btn.btn-link.dropdown-user
%img.avatar.avatar-inline{ 'data-src': '{{avatar_url}}', width: '30' } %img.avatar.avatar-inline{ 'data-src': '{{avatar_url}}', width: '30' }
.dropdown-user-details .dropdown-user-details
...@@ -36,12 +36,12 @@ ...@@ -36,12 +36,12 @@
@{{username}} @{{username}}
#js-dropdown-assignee.dropdown-menu{ 'data-dropdown' => true } #js-dropdown-assignee.dropdown-menu{ 'data-dropdown' => true }
%ul %ul
%li.filter-dropdown %li.filter-dropdown-item
%button.btn.btn-link %button.btn.btn-link
No assignee No assignee
%li.divider %li.divider
%ul{ 'data-dynamic' => true } %ul.filter-dropdown{ 'data-dynamic' => true }
%li.filter-dropdown %li.filter-dropdown-item
%button.btn.btn-link.dropdown-user %button.btn.btn-link.dropdown-user
%img.avatar.avatar-inline{ 'data-src': '{{avatar_url}}', width: '30' } %img.avatar.avatar-inline{ 'data-src': '{{avatar_url}}', width: '30' }
.dropdown-user-details .dropdown-user-details
...@@ -51,22 +51,22 @@ ...@@ -51,22 +51,22 @@
@{{username}} @{{username}}
#js-dropdown-milestone.dropdown-menu{ 'data-dropdown' => true } #js-dropdown-milestone.dropdown-menu{ 'data-dropdown' => true }
%ul %ul
%li.filter-dropdown %li.filter-dropdown-item
%button.btn.btn-link %button.btn.btn-link
No milestone No milestone
%li.divider %li.divider
%ul{ 'data-dynamic' => true } %ul.filter-dropdown{ 'data-dynamic' => true }
%li.filter-dropdown %li.filter-dropdown-item
%button.btn.btn-link %button.btn.btn-link
{{title}} {{title}}
#js-dropdown-label.dropdown-menu{ 'data-dropdown' => true } #js-dropdown-label.dropdown-menu{ 'data-dropdown' => true }
%ul %ul
%li.filter-dropdown %li.filter-dropdown-item
%button.btn.btn-link %button.btn.btn-link
No label No label
%li.divider %li.divider
%ul{ 'data-dynamic' => true } %ul.filter-dropdown{ 'data-dynamic' => true }
%li.filter-dropdown %li.filter-dropdown-item
%button.btn.btn-link %button.btn.btn-link
%span.dropdown-label-box{ 'style': 'background: {{color}}'} %span.dropdown-label-box{ 'style': 'background: {{color}}'}
{{title}} {{title}}
......
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