From 1823562e3d5c1c44a28869d2156dae14943b68eb Mon Sep 17 00:00:00 2001 From: Ihor Masechko Date: Fri, 16 Jan 2026 12:14:18 +0200 Subject: [PATCH 1/3] fix cs filter search on mobile --- website/modules/asset/ui/src/filterModal.js | 12 ++++++++++++ website/modules/asset/ui/src/scss/_cases.scss | 5 ++++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/website/modules/asset/ui/src/filterModal.js b/website/modules/asset/ui/src/filterModal.js index 0cde12ba..c56746bf 100644 --- a/website/modules/asset/ui/src/filterModal.js +++ b/website/modules/asset/ui/src/filterModal.js @@ -85,9 +85,21 @@ export class FilterModal { if (this.tagsFilter) this.modalBody.appendChild(this.tagsFilter); this.modal.classList.add('active'); document.body.style.overflow = 'hidden'; + + if (this.tagsFilter) { + this.tagsFilter.style.maxHeight = 'none'; + this.tagsFilter.style.overflowY = 'visible'; + this.tagsFilter.style.overflowX = 'visible'; + } } close() { + if (this.tagsFilter) { + this.tagsFilter.style.maxHeight = ''; + this.tagsFilter.style.overflowY = ''; + this.tagsFilter.style.overflowX = ''; + } + const elementsToRestore = [ { element: this.clearAll, parent: this.originalParents.clearAll }, { element: this.selectedTags, parent: this.originalParents.selectedTags }, diff --git a/website/modules/asset/ui/src/scss/_cases.scss b/website/modules/asset/ui/src/scss/_cases.scss index 72734137..784bb99f 100644 --- a/website/modules/asset/ui/src/scss/_cases.scss +++ b/website/modules/asset/ui/src/scss/_cases.scss @@ -1274,6 +1274,9 @@ .tags-filter { max-width: none; + max-height: none; + overflow-y: visible; + overflow-x: visible; } &__backdrop { @@ -1295,7 +1298,7 @@ min-width: 300px; background: #fff; z-index: 2; - padding: 0 16px 24px; + padding: 0 16px 60px; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba($black, 0.18); From 7a1ee1212fc7c0a0c1d03a2b0fc7dc8f79113804 Mon Sep 17 00:00:00 2001 From: Ihor Masechko Date: Fri, 16 Jan 2026 13:26:09 +0200 Subject: [PATCH 2/3] fix: improve show more/less button behavior in filter search - Fix button visibility when expanding filters with many items - Hide show less button when search results have 5 or fewer items - Show show less button when search results have more than 5 items - Reset button state correctly when search input is cleared - Fix collapse/expand to show correct number of items during search --- .../ui/src/initCaseStudiesFilterHandler.js | 38 ++++++++++++++----- website/modules/asset/ui/src/scss/_cases.scss | 2 +- .../asset/ui/src/searchInputHandler.js | 31 +++++++++++++-- website/modules/testimonials/index.js | 4 ++ 4 files changed, 60 insertions(+), 15 deletions(-) diff --git a/website/modules/asset/ui/src/initCaseStudiesFilterHandler.js b/website/modules/asset/ui/src/initCaseStudiesFilterHandler.js index abb24fbc..7e1c2516 100644 --- a/website/modules/asset/ui/src/initCaseStudiesFilterHandler.js +++ b/website/modules/asset/ui/src/initCaseStudiesFilterHandler.js @@ -122,8 +122,8 @@ const setupFilterAccessibility = function () { }; // Helper function to collapse tags with animation -const collapseTagsWithAnimation = function (allItems, button, textElement) { - if (!allItems || !button || !textElement) return; +const collapseTagsWithAnimation = function (itemsToProcess, button, textElement) { + if (!itemsToProcess || !button || !textElement) return; // Prevent double-clicking during animation if (button.dataset.animating === 'true') { @@ -137,9 +137,11 @@ const collapseTagsWithAnimation = function (allItems, button, textElement) { textElement.textContent = 'Show more'; // Immediately hide items that should be hidden (no animation delay) - allItems.forEach(function (item, index) { + itemsToProcess.forEach(function (item, index) { if (index >= getDefaultVisibleTagsCount()) { item.classList.add('tag-item--hidden'); + } else { + item.classList.remove('tag-item--hidden'); } }); @@ -150,8 +152,8 @@ const collapseTagsWithAnimation = function (allItems, button, textElement) { }; // Helper function to expand tags with animation -const expandTagsWithAnimation = function (allItems, button, textElement) { - if (!allItems || !button || !textElement) return; +const expandTagsWithAnimation = function (itemsToProcess, button, textElement) { + if (!itemsToProcess || !button || !textElement) return; // Prevent double-clicking during animation if (button.dataset.animating === 'true') { @@ -167,7 +169,7 @@ const expandTagsWithAnimation = function (allItems, button, textElement) { // Show all items with staggered animation for smooth effect let expandCounter = 0; let maxDelay = 0; - allItems.forEach(function (item, index) { + itemsToProcess.forEach(function (item, index) { if (index >= getDefaultVisibleTagsCount()) { const delay = expandCounter * 50; maxDelay = Math.max(maxDelay, delay); @@ -199,13 +201,29 @@ const setupShowMoreHandlers = function () { if (!button) return; const filterContent = button.closest('.filter-content'); - const allItems = filterContent.querySelectorAll('.tag-item'); + const searchInput = filterContent.querySelector('.tag-search'); + const isSearchActive = searchInput && searchInput.value.trim().length > 0; + const textElement = button.querySelector('.tags__show-more--text'); + const allItems = filterContent.querySelectorAll('.tag-item'); + + if (isSearchActive) { + const matchingItems = Array.from(allItems).filter(function (item) { + return item.style.display !== 'none'; + }); - if (button.classList.contains('tags__show-more--expanded')) { - collapseTagsWithAnimation(allItems, button, textElement); + if (button.classList.contains('tags__show-more--expanded')) { + collapseTagsWithAnimation(matchingItems, button, textElement); + } else { + expandTagsWithAnimation(matchingItems, button, textElement); + } } else { - expandTagsWithAnimation(allItems, button, textElement); + const allItemsArray = Array.from(allItems); + if (button.classList.contains('tags__show-more--expanded')) { + collapseTagsWithAnimation(allItemsArray, button, textElement); + } else { + expandTagsWithAnimation(allItemsArray, button, textElement); + } } }; diff --git a/website/modules/asset/ui/src/scss/_cases.scss b/website/modules/asset/ui/src/scss/_cases.scss index 784bb99f..f20a73a9 100644 --- a/website/modules/asset/ui/src/scss/_cases.scss +++ b/website/modules/asset/ui/src/scss/_cases.scss @@ -198,7 +198,7 @@ } ~ .filter-content { - max-height: 1000px; + max-height: 5000px; opacity: 1; transform: translateY(0); padding-bottom: 24px; diff --git a/website/modules/asset/ui/src/searchInputHandler.js b/website/modules/asset/ui/src/searchInputHandler.js index 3c3c2964..9c225901 100644 --- a/website/modules/asset/ui/src/searchInputHandler.js +++ b/website/modules/asset/ui/src/searchInputHandler.js @@ -96,11 +96,34 @@ const toggleShowMoreButtonVisibility = function ( const showMoreButton = container.querySelector('.tags__show-more'); if (showMoreButton) { if (isSearchActive) { - showMoreButton.style.display = 'none'; - } else if (totalTags > defaultVisibleCount) { - showMoreButton.style.display = 'flex'; + const tagItems = container.querySelectorAll('.tag-item'); + let visibleCount = 0; + tagItems.forEach(function (item) { + if (item.style.display !== 'none' && !item.classList.contains('tag-item--hidden')) { + visibleCount += 1; + } + }); + if (visibleCount <= defaultVisibleCount) { + showMoreButton.style.display = 'none'; + } else { + showMoreButton.style.display = 'flex'; + const textElement = showMoreButton.querySelector('.tags__show-more--text'); + if (textElement && visibleCount > defaultVisibleCount) { + showMoreButton.classList.add('tags__show-more--expanded'); + textElement.textContent = 'Show less'; + } + } } else { - showMoreButton.style.display = 'none'; + const textElement = showMoreButton.querySelector('.tags__show-more--text'); + if (textElement) { + showMoreButton.classList.remove('tags__show-more--expanded'); + textElement.textContent = 'Show more'; + } + if (totalTags > defaultVisibleCount) { + showMoreButton.style.display = 'flex'; + } else { + showMoreButton.style.display = 'none'; + } } } }; diff --git a/website/modules/testimonials/index.js b/website/modules/testimonials/index.js index afb038be..b9ecae24 100644 --- a/website/modules/testimonials/index.js +++ b/website/modules/testimonials/index.js @@ -106,6 +106,10 @@ module.exports = { label: 'Organization', name: 'organization', }, + _caseStudy: { + label: 'Related Case Study', + name: '_caseStudy.0.title', + }, }, }, filters: { From f138568543e9fc074eab6941db51187935ecf36a Mon Sep 17 00:00:00 2001 From: Ihor Masechko Date: Fri, 16 Jan 2026 14:52:04 +0200 Subject: [PATCH 3/3] fix: show more/less button behavior in filter search --- .../ui/src/initCaseStudiesFilterHandler.js | 8 +- .../asset/ui/src/searchInputHandler.js | 86 ++++++++++++------- 2 files changed, 62 insertions(+), 32 deletions(-) diff --git a/website/modules/asset/ui/src/initCaseStudiesFilterHandler.js b/website/modules/asset/ui/src/initCaseStudiesFilterHandler.js index 7e1c2516..99e4e01e 100644 --- a/website/modules/asset/ui/src/initCaseStudiesFilterHandler.js +++ b/website/modules/asset/ui/src/initCaseStudiesFilterHandler.js @@ -122,7 +122,11 @@ const setupFilterAccessibility = function () { }; // Helper function to collapse tags with animation -const collapseTagsWithAnimation = function (itemsToProcess, button, textElement) { +const collapseTagsWithAnimation = function ( + itemsToProcess, + button, + textElement, +) { if (!itemsToProcess || !button || !textElement) return; // Prevent double-clicking during animation @@ -201,6 +205,8 @@ const setupShowMoreHandlers = function () { if (!button) return; const filterContent = button.closest('.filter-content'); + if (!filterContent) return; + const searchInput = filterContent.querySelector('.tag-search'); const isSearchActive = searchInput && searchInput.value.trim().length > 0; diff --git a/website/modules/asset/ui/src/searchInputHandler.js b/website/modules/asset/ui/src/searchInputHandler.js index 9c225901..8b899d77 100644 --- a/website/modules/asset/ui/src/searchInputHandler.js +++ b/website/modules/asset/ui/src/searchInputHandler.js @@ -87,6 +87,55 @@ const getDefaultVisibleCount = function (container) { return defaultVisibleCount; }; +const countVisibleItems = function (container) { + const tagItems = container.querySelectorAll('.tag-item'); + let visibleCount = 0; + tagItems.forEach(function (item) { + if ( + item.style.display !== 'none' && + !item.classList.contains('tag-item--hidden') + ) { + visibleCount += 1; + } + }); + return visibleCount; +}; + +const handleSearchActiveState = function ( + showMoreButton, + container, + defaultVisibleCount, +) { + const visibleCount = countVisibleItems(container); + if (visibleCount <= defaultVisibleCount) { + showMoreButton.style.display = 'none'; + } else { + showMoreButton.style.display = 'flex'; + const textElement = showMoreButton.querySelector('.tags__show-more--text'); + if (textElement) { + showMoreButton.classList.add('tags__show-more--expanded'); + textElement.textContent = 'Show less'; + } + } +}; + +const handleSearchInactiveState = function ( + showMoreButton, + totalTags, + defaultVisibleCount, +) { + const textElement = showMoreButton.querySelector('.tags__show-more--text'); + if (textElement) { + showMoreButton.classList.remove('tags__show-more--expanded'); + textElement.textContent = 'Show more'; + } + if (totalTags > defaultVisibleCount) { + showMoreButton.style.display = 'flex'; + } else { + showMoreButton.style.display = 'none'; + } +}; + const toggleShowMoreButtonVisibility = function ( container, isSearchActive, @@ -94,37 +143,12 @@ const toggleShowMoreButtonVisibility = function ( defaultVisibleCount, ) { const showMoreButton = container.querySelector('.tags__show-more'); - if (showMoreButton) { - if (isSearchActive) { - const tagItems = container.querySelectorAll('.tag-item'); - let visibleCount = 0; - tagItems.forEach(function (item) { - if (item.style.display !== 'none' && !item.classList.contains('tag-item--hidden')) { - visibleCount += 1; - } - }); - if (visibleCount <= defaultVisibleCount) { - showMoreButton.style.display = 'none'; - } else { - showMoreButton.style.display = 'flex'; - const textElement = showMoreButton.querySelector('.tags__show-more--text'); - if (textElement && visibleCount > defaultVisibleCount) { - showMoreButton.classList.add('tags__show-more--expanded'); - textElement.textContent = 'Show less'; - } - } - } else { - const textElement = showMoreButton.querySelector('.tags__show-more--text'); - if (textElement) { - showMoreButton.classList.remove('tags__show-more--expanded'); - textElement.textContent = 'Show more'; - } - if (totalTags > defaultVisibleCount) { - showMoreButton.style.display = 'flex'; - } else { - showMoreButton.style.display = 'none'; - } - } + if (!showMoreButton) return; + + if (isSearchActive) { + handleSearchActiveState(showMoreButton, container, defaultVisibleCount); + } else { + handleSearchInactiveState(showMoreButton, totalTags, defaultVisibleCount); } };