diff --git a/src/views/admin/scss/_filters-menu-modal.scss b/src/views/admin/scss/_filters-menu-modal.scss index 6786848bf..e02e599ad 100644 --- a/src/views/admin/scss/_filters-menu-modal.scss +++ b/src/views/admin/scss/_filters-menu-modal.scss @@ -36,6 +36,12 @@ } } + &.horizontal-filters { + .modal-content { + padding: var(--tainacan-container-padding) var(--tainacan-one-column); + } + } + @media screen and (max-width: 768px) { &:not(.filters-menu-modal) { diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/block.json b/src/views/gutenberg-blocks/blocks/faceted-search/block.json index 1da71581f..b1c2b4128 100644 --- a/src/views/gutenberg-blocks/blocks/faceted-search/block.json +++ b/src/views/gutenberg-blocks/blocks/faceted-search/block.json @@ -216,6 +216,10 @@ "shouldNotHideFiltersOnMobile": { "type": "boolean", "default": false + }, + "displayFiltersHorizontally": { + "type": "boolean", + "default": false } }, "supports": { diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/edit.js b/src/views/gutenberg-blocks/blocks/faceted-search/edit.js index 4636efb80..af26d684a 100644 --- a/src/views/gutenberg-blocks/blocks/faceted-search/edit.js +++ b/src/views/gutenberg-blocks/blocks/faceted-search/edit.js @@ -77,7 +77,8 @@ export default function({ attributes, setAttributes, isSelected, clientId }) { collectionOrderBy, collectionOrderByMeta, collectionOrderByType, - shouldNotHideFiltersOnMobile + shouldNotHideFiltersOnMobile, + displayFiltersHorizontally } = attributes; // Gets blocks props from hook @@ -519,6 +520,15 @@ export default function({ attributes, setAttributes, isSelected, clientId }) { } } /> + { + displayFiltersHorizontally = isChecked; + setAttributes({ displayFiltersHorizontally: isChecked }); + } + } + /> + data-should-not-hide-filters-on-mobile = { shouldNotHideFiltersOnMobile ? shouldNotHideFiltersOnMobile.toString() : 'false' } + data-display-filters-horizontally = { displayFiltersHorizontally ? displayFiltersHorizontally.toString() : 'false' } > }; \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/scss/_layout.scss b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/scss/_layout.scss index 01cac3658..0a97a0cad 100644 --- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/scss/_layout.scss +++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/scss/_layout.scss @@ -94,6 +94,10 @@ bottom: 0; transition: top ease-in 0.75s, bottom ease-in 0.75s, position ease-in 0.75s; + &.horizontal-filters { + max-width: 100%; + } + @media screen and (max-width: 768px) { padding: 0; z-index: 99999; @@ -125,6 +129,12 @@ .modal-close { display: none; } + + &.horizontal-filters { + -webkit-flex: 0 1 100%; + -ms-flex: 0 1 100%; + flex: 0 1 100%; + } } } @@ -156,6 +166,38 @@ } } + &.has-horizontal-filters { + .items-list-area { + max-width: 100%; + } + #filters-modal.horizontal-filters:not(.modal) { + overflow: visible; + + .modal-content, + .filters-components-list { + overflow: visible; + } + + .filters-components-list { + margin-bottom: 0; + + & > div { + display: inline-block; + vertical-align: text-top; + } + .filter-item-forms { + width: 200px; + min-width: 200px; + break-inside: avoid; + display: inline-block; + vertical-align: text-top; + padding-right: 1.5em; + margin-bottom: 12px; + } + } + } + } + @media screen and (max-width: 768px) { &.is-filters-menu-open { diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme.js b/src/views/gutenberg-blocks/blocks/faceted-search/theme.js index 7ca288fbf..aa179c9a8 100644 --- a/src/views/gutenberg-blocks/blocks/faceted-search/theme.js +++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme.js @@ -131,7 +131,8 @@ export default (element) => { filtersAsModal: isParameterTrue(getDataAttribute(blockElement, 'filters-as-modal')), showInlineViewModeOptions: isParameterTrue(getDataAttribute(blockElement, 'show-inline-view-mode-options')), showFullscreenWithViewModes: isParameterTrue(getDataAttribute(blockElement, 'show-fullscreen-with-view-modes')), - shouldNotHideFiltersOnMobile: isParameterTrue(getDataAttribute(blockElement, 'should-not-hide-filters-on-mobile')) + shouldNotHideFiltersOnMobile: isParameterTrue(getDataAttribute(blockElement, 'should-not-hide-filters-on-mobile')), + displayFiltersHorizontally: isParameterTrue(getDataAttribute(blockElement, 'display-filters-horizontally')), }), }); diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme.vue index 63adc07a0..a4d0f757e 100644 --- a/src/views/gutenberg-blocks/blocks/faceted-search/theme.vue +++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme.vue @@ -412,7 +412,7 @@ id="filters-modal" ref="filters-modal" role="region" - :class="'tainacan-modal tainacan-form filters-menu' + (filtersAsModal ? ' filters-menu-modal' : '')"> + :class="'tainacan-modal tainacan-form filters-menu' + (displayFiltersHorizontally ? ' horizontal-filters' : '')">
@@ -452,7 +452,7 @@ :auto-focus="filtersAsModal" :trap-focus="filtersAsModal" full-screen - :custom-class="'tainacan-modal tainacan-form filters-menu' + (filtersAsModal ? ' filters-menu-modal' : '')" + :custom-class="'tainacan-modal tainacan-form filters-menu' + (filtersAsModal ? ' filters-menu-modal' : '') + (displayFiltersHorizontally ? ' horizontal-filters' : '')" :can-cancel="hideHideFiltersButton || !filtersAsModal ? ['x', 'outside'] : ['x', 'escape', 'outside']" :close-button-aria-label="$i18n.get('close')"> @@ -775,7 +775,8 @@ filtersAsModal: false, showInlineViewModeOptions: false, showFullscreenWithViewModes: false, - shouldNotHideFiltersOnMobile: false + shouldNotHideFiltersOnMobile: false, + displayFiltersHorizontally: false }, data() { return { @@ -828,6 +829,7 @@ }), wrapperClasses() { return { + 'has-horizontal-filters': this.displayFiltersHorizontally, 'is-filters-menu-open': !this.hideFilters && this.isFiltersModalActive && !this.openAdvancedSearch, 'is-filters-menu-fixed-at-top': this.isFiltersListFixedAtTop, 'is-filters-menu-fixed-at-bottom': this.isFiltersListFixedAtBottom, @@ -1963,7 +1965,7 @@ } &:last-child { - margin-right: auto; + margin-right: 0; } .label {