diff --git a/widgets/recipe-center/recipe-center.css b/widgets/recipe-center/recipe-center.css index c6527aea..7eb8f9de 100644 --- a/widgets/recipe-center/recipe-center.css +++ b/widgets/recipe-center/recipe-center.css @@ -141,6 +141,8 @@ } .recipe-center .controls { + padding-top: var(--spacing-800); + padding-bottom: var(--spacing-800); grid-area: controls; } } @@ -508,3 +510,11 @@ grid-area: pagination; } } + +/* Suppress results when user has not applied filters or search */ +.recipe-center.suppress-results .info, +.recipe-center.suppress-results .facets, +.recipe-center.suppress-results .results, +.recipe-center.suppress-results .pagination { + display: none; +} diff --git a/widgets/recipe-center/recipe-center.js b/widgets/recipe-center/recipe-center.js index d3996200..6b5f55eb 100644 --- a/widgets/recipe-center/recipe-center.js +++ b/widgets/recipe-center/recipe-center.js @@ -458,6 +458,19 @@ function updateURL(filterConfig) { window.history.pushState({ filterConfig }, '', newURL); } +/** + * Returns true if the user has applied any filters or entered a fulltext query. + * @param {Object} filterConfig - Current filter configuration + * @returns {boolean} + */ +function hasActiveFilters(filterConfig) { + return Object.keys(filterConfig).some((key) => { + if (key === 'page' || key === 'sort') return false; + if (key === 'fulltext') return filterConfig[key] && filterConfig[key].trim().length > 0; + return !!filterConfig[key]; + }); +} + /** * Builds complete recipe listing with filtering, sorting, and search functionality. * @param {HTMLElement} container - Container element to transform into a recipe listing @@ -860,9 +873,18 @@ function buildRecipeFiltering(container, config = {}, placeholders = {}) { populateDropdown(courseSelect, facets.course, 'course', filterConfig); populateDropdown(recipeTypeSelect, facets['recipe-type'], 'recipe-type', filterConfig); - displayResults(results, page); - displayPagination(totalResults, page); - displayFacets(facets, filterConfig); + const showResults = hasActiveFilters(filterConfig); + if (showResults) { + container.classList.remove('suppress-results'); + displayResults(results, page); + displayPagination(totalResults, page); + displayFacets(facets, filterConfig); + } else { + container.classList.add('suppress-results'); + resultsElement.innerHTML = ''; + if (paginationElement) paginationElement.innerHTML = ''; + displayFacets(facets, filterConfig); + } // Update URL with current filter state if (updateURLState) {