Basic layout and options for horizontal filters #893.

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) {

src/views/gutenberg-blocks/blocks/faceted-search/block.json

@@ -216,6 +216,10 @@
         "shouldNotHideFiltersOnMobile": {
             "type": "boolean",
             "default": false
+        },
+        "displayFiltersHorizontally": {
+            "type": "boolean",
+            "default": false
         }
     },
     "supports": {

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 }) {
                                 } 
                             }
                         />
+                        <ToggleControl
+                            label={__('Display filters horizontally', 'tainacan')}
+                            checked={ displayFiltersHorizontally }
+                            onChange={ ( isChecked ) => {
+                                    displayFiltersHorizontally = isChecked;
+                                    setAttributes({ displayFiltersHorizontally: isChecked });
+                                } 
+                            }
+                        />
                     </PanelBody>
 
                     <PanelBody

src/views/gutenberg-blocks/blocks/faceted-search/save.js

@@ -50,7 +50,8 @@ export default function({ attributes }) {
         collectionOrderBy,
         collectionOrderByMeta,
         collectionOrderByType,
-        shouldNotHideFiltersOnMobile
+        shouldNotHideFiltersOnMobile,
+        displayFiltersHorizontally
     } = attributes;
     
     let updatedListType = '' + listType;
@@ -114,7 +115,8 @@ export default function({ attributes }) {
                 data-default-orderby = { updatedListType == 'collection' ? (collectionOrderBy ? collectionOrderBy : 'date') : (orderBy ? orderBy : 'date') }
                 data-default-orderby-meta = { updatedListType == 'collection' ? (collectionOrderByMeta ? collectionOrderByMeta : '') : (orderByMeta ? orderByMeta : '') }
                 data-default-orderby-type = { updatedListType == 'collection' ? (collectionOrderByType ? collectionOrderByType : '') : (orderByType ? orderByType : '') }
-                data-should-not-hide-filters-on-mobile = { shouldNotHideFiltersOnMobile ? shouldNotHideFiltersOnMobile.toString() : 'false' } >
+                data-should-not-hide-filters-on-mobile = { shouldNotHideFiltersOnMobile ? shouldNotHideFiltersOnMobile.toString() : 'false' }
+                data-display-filters-horizontally = { displayFiltersHorizontally ? displayFiltersHorizontally.toString() : 'false' } >
         </main>
     </div>
 };

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 {
 			

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')),
                 }),
             });
 

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' : '')">
             
             <div class="animation-content modal-content">
 
@@ -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 {