tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Basic layout and options for horizontal filters #893.

This commit is contained in:
mateuswetah 2024-06-11 13:29:23 -03:00
parent 05bad4e10b
commit 9309c510ab
7 changed files with 75 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/admin/scss/_filters-menu-modal.scss
View File

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

4
src/views/gutenberg-blocks/blocks/faceted-search/block.json
View File

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

12
src/views/gutenberg-blocks/blocks/faceted-search/edit.js
View File

@ -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

6
src/views/gutenberg-blocks/blocks/faceted-search/save.js
View File

@ -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>
};

42
src/views/gutenberg-blocks/blocks/faceted-search/theme-search/scss/_layout.scss
View File

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

3
src/views/gutenberg-blocks/blocks/faceted-search/theme.js
View File

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

10
src/views/gutenberg-blocks/blocks/faceted-search/theme.vue
View File

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