diff --git a/src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/filter-category/filter-category.scss b/src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/filter-category/filter-category.scss index 34ec4e9f3..34cc64b45 100644 --- a/src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/filter-category/filter-category.scss +++ b/src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/filter-category/filter-category.scss @@ -49,17 +49,19 @@ } &__category-target { - @include helper-effect-transition(max-height); - overflow: hidden; - max-height: rem(10000); - opacity: 1; + @include helper-effect-transition(grid-template-rows); + display: grid; + grid-template-rows: 1fr; &--hidden { - max-height: 0; - opacity: 0; + grid-template-rows: 0fr; } } + &__category-target-inner { + overflow: hidden; + } + &__category-toggle-button { color: $setting-color-gray-3; @include helper-effect-transition(transform); diff --git a/src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/filter-category/filter-category.twig b/src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/filter-category/filter-category.twig index ac89385ac..cca98662f 100644 --- a/src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/filter-category/filter-category.twig +++ b/src/Pyz/Yves/CatalogPage/Theme/default/components/molecules/filter-category/filter-category.twig @@ -29,7 +29,7 @@ {% endif %} {% endfor %} - {% if quantity > 0 %} + {% if quantity > 0 or (quantity == 0 and data.isEmptyCategoryFilterValueVisible) %} {% if data.filterPath is not empty %} {% set currentUrl = url(data.filterPath, {categoryPath: (app.request.attributes.get('categoryPath'))}) %} {% else %} @@ -52,6 +52,7 @@ {% set targetCategoryClassName = config.jsName ~ '__category-target-' ~ categoryNamePrepared %} {% set targetTogglerClassName = config.jsName ~ '__toggler-target-' ~ categoryNamePrepared %} {% set classToToggle = config.name ~ '__category-target' %} + {% set categoryTargetInner = config.name ~ '__category-target-inner' %} {% set classToToggleModifier = classToToggle ~ '--hidden' %} {% set toggleButtonClassName = config.name ~ '__category-toggle-button' %} @@ -99,16 +100,18 @@ {% if hasChildren %}
- {% include molecule('filter-category', 'CatalogPage') with { - data: { - filter: data.filter, - filterPath: data.filterPath, - categories: categoryNode.children, - levelMenu: data.levelMenu + 1, - parentJsName: data.parentJsName, - isEmptyCategoryFilterValueVisible: data.isEmptyCategoryFilterValueVisible, - }, - } only %} +
+ {% include molecule('filter-category', 'CatalogPage') with { + data: { + filter: data.filter, + filterPath: data.filterPath, + categories: categoryNode.children, + levelMenu: data.levelMenu + 1, + parentJsName: data.parentJsName, + isEmptyCategoryFilterValueVisible: data.isEmptyCategoryFilterValueVisible, + }, + } only %} +
{% endif %}