From df010e32aaa75c92f5801f5c36301255370b3a9f Mon Sep 17 00:00:00 2001 From: ncounter Date: Thu, 19 Dec 2024 11:15:55 +0100 Subject: [PATCH] Limit the filter content height and scroll --- .../assets/stylesheets/webui/requests.scss | 9 ++++ .../webui/shared/bs_requests/_form.html.haml | 14 +++--- .../bs_requests/_requests_filter.html.haml | 49 +++++++++---------- 3 files changed, 40 insertions(+), 32 deletions(-) diff --git a/src/api/app/assets/stylesheets/webui/requests.scss b/src/api/app/assets/stylesheets/webui/requests.scss index 0f535cb539f..27dc875ecd7 100644 --- a/src/api/app/assets/stylesheets/webui/requests.scss +++ b/src/api/app/assets/stylesheets/webui/requests.scss @@ -97,6 +97,15 @@ display: inline; } +#filters { + .accordion-item { + .scroll-list-wrapper { + overflow-y: scroll; + max-height: 15rem; + } + } +} + @include media-breakpoint-up(sm) { .order-sm-1 { order: 1; diff --git a/src/api/app/views/webui/shared/bs_requests/_form.html.haml b/src/api/app/views/webui/shared/bs_requests/_form.html.haml index 0472ddd0a84..259dc918818 100644 --- a/src/api/app/views/webui/shared/bs_requests/_form.html.haml +++ b/src/api/app/views/webui/shared/bs_requests/_form.html.haml @@ -74,16 +74,16 @@ $(document).on("input", "#stag-proj-search", function(event) { var searchInput = event.target; var filterValue = searchInput.value.toLowerCase(); - var dropdown = document.getElementById("stag-proj-dropdown"); - var dropdownInputFields = dropdown.getElementsByTagName("input"); + var filterContent = document.getElementById("request-filter-stag-proj"); + var filterItems = filterContent.getElementsByClassName("request-filter-stag-proj-item"); - for (i = 1; i < dropdownInputFields.length; i++) { - dropdownInputValue = dropdownInputFields[i].value; + for (i = 0; i < filterItems.length; i++) { + var itemValue = filterItems[i].getElementsByTagName('input')[0].value; - if (dropdownInputValue.toLowerCase().indexOf(filterValue) > -1) { - dropdownInputFields[i].closest(".dropdown-item-text").style.display = ""; + if (itemValue.toLowerCase().indexOf(filterValue) > -1) { + filterItems[i].style.display = ""; } else { - dropdownInputFields[i].closest(".dropdown-item-text").style.display = "none"; + filterItems[i].style.display = "none"; } } }); diff --git a/src/api/app/views/webui/shared/bs_requests/_requests_filter.html.haml b/src/api/app/views/webui/shared/bs_requests/_requests_filter.html.haml index 4da7ddcd270..f282974a792 100644 --- a/src/api/app/views/webui/shared/bs_requests/_requests_filter.html.haml +++ b/src/api/app/views/webui/shared/bs_requests/_requests_filter.html.haml @@ -32,18 +32,16 @@ %b Staging Project .selected-content.small.ms-1 .px-4.pb-2.accordion-collapse.collapse.show#request-filter-stag-proj - .dropdown.form-multi-select{ 'data-name': 'staging projects' } - %button.form-select.text-start#filter-staging-projects-button{ type: 'button', data: { 'bs-toggle': 'dropdown' } } - Select staging project - .dropdown-menu.w-100#stag-proj-dropdown - %input.form-control#stag-proj-search{ placeholder: 'Filter staging project' } - - Project.where.not(staging_workflow_id: nil).each do |sp| - .dropdown-item-text - - checked = selected_filter[:staging_project]&.include?(sp.name) || defined?(project) && project == sp - = render partial: 'webui/shared/check_box', locals: { label: sp.name, - key: "staging_project[#{sp.id}]", name: 'staging_project[]', - value: sp.name, - checked: checked } + .mb-3.ui-front + %input.form-control#stag-proj-search{ placeholder: 'Filter staging project' } + .scroll-list-wrapper + - Project.where.not(staging_workflow_id: nil).each do |sp| + .dropdown-item-text.request-filter-stag-proj-item + - checked = selected_filter[:staging_project]&.include?(sp.name) || defined?(project) && project == sp + = render partial: 'webui/shared/check_box', locals: { label: sp.name, + key: "staging_project[#{sp.id}]", name: 'staging_project[]', + value: sp.name, + checked: checked } .mt-2.mb-2.accordion-item.border-0 .px-3.py-2.accordion-button.no-style{ data: { 'bs-toggle': 'collapse', 'bs-target': '#request-filter-action' }, @@ -102,18 +100,19 @@ html_name: 'creators[]', required: false, with_label: false, data: { source: autocomplete_users_path } } - - if selected_filter[:creators].include?(User.session.login) - .dropdown-item-text - = render partial: 'webui/shared/check_box', locals: { label: "#{User.session.login} (me)", - key: "creators[#{User.session.login}]", name: 'creators[]', - value: User.session.login, - checked: selected_filter[:creators]&.include?(User.session.login) } - - selected_filter[:creators].each do |creator| - - next if creator == User.session.login - .dropdown-item-text - = render partial: 'webui/shared/check_box', locals: { label: creator, - key: "creators[#{creator}]", name: 'creators[]', - value: creator, - checked: selected_filter[:creators]&.include?(creator) } + .scroll-list-wrapper + - if selected_filter[:creators].include?(User.session.login) + .dropdown-item-text + = render partial: 'webui/shared/check_box', locals: { label: "#{User.session.login} (me)", + key: "creators[#{User.session.login}]", name: 'creators[]', + value: User.session.login, + checked: selected_filter[:creators]&.include?(User.session.login) } + - selected_filter[:creators].each do |creator| + - next if creator == User.session.login + .dropdown-item-text + = render partial: 'webui/shared/check_box', locals: { label: creator, + key: "creators[#{creator}]", name: 'creators[]', + value: creator, + checked: selected_filter[:creators]&.include?(creator) } .text-center.mt-4.mb-4 = link_to('Clear', url, class: 'btn btn-light border')