Limit the filter content height and scroll

openSUSE · Dec 19, 2024 · df010e3 · df010e3
1 parent f3f10b1
commit df010e3
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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')