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

Adds option to define filters inline width.

This commit is contained in:
mateuswetah 2024-06-14 10:44:00 -03:00
parent 1b1b2aa38d
commit 8d6475ef04
9 changed files with 38 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/css/tainacan-gutenberg-block-faceted-search.css
View File

@ -72,7 +72,7 @@
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control.horizontal-filters .filters .fake-filter {
margin: 6px 12px;
display: inline-flex;
width: 16.666%; }
width: var(--tainacan-filters-inline-width, 272px); }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters {
flex: 0 1 var(--tainacan-filter-menu-width-theme, 20%);
display: flex;

2
src/assets/css/tainacan-gutenberg-block-faceted-search.css.map
View File

File diff suppressed because one or more lines are too long

3
src/views/admin/scss/_custom_variables.scss
View File

@ -74,6 +74,9 @@
// Filter Menu Width when not a modal
--tainacan-filter-menu-width-theme: #{$filter-menu-width-theme};
// Each filter width when in horizontal panel
--tainacan-filters-inline-width: #{$filters-inline-width};
// One column is 1/24% and it is used a lot in the horizontal space distribution
--tainacan-one-column: #{$one-column};

1
src/views/admin/scss/_variables.scss
View File

@ -145,6 +145,7 @@ $sidebar-width: 3.0em;
$subheader-height: 2.35em;
$filter-menu-width: 16.666666667%;
$filter-menu-width-theme: 20%;
$filters-inline-width: 272px;
$page-height: calc(100vh - 5.35em);
// Overall Pages padding:

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

@ -224,6 +224,10 @@
"hideColllapseAllFiltersButton": {
"type": "boolean",
"default": false
},
"filtersInlineWidth": {
"type": "number",
"default": 272
}
},
"supports": {

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

@ -79,7 +79,8 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
collectionOrderByType,
shouldNotHideFiltersOnMobile,
displayFiltersHorizontally,
hideColllapseAllFiltersButton
hideColllapseAllFiltersButton,
filtersInlineWidth
} = attributes;
// Gets blocks props from hook
@ -600,13 +601,24 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
setAttributes( { baseFontSize: newFontSize } );
} }
/>
<RangeControl
label={ __('Filters Area Width (%)', 'tainacan') }
value={ filtersAreaWidth }
onChange={ ( width ) => setAttributes( { filtersAreaWidth: width } ) }
min={ 10 }
max={ 40 }
/>
{ !displayFiltersHorizontally && !filtersAsModal ?
<RangeControl
label={ __('Filters Area Width (%)', 'tainacan') }
value={ filtersAreaWidth }
onChange={ ( width ) => setAttributes( { filtersAreaWidth: width } ) }
min={ 10 }
max={ 40 }
/>
: null }
{ displayFiltersHorizontally ?
<RangeControl
label={ __('Filters Inline Width (px)', 'tainacan') }
value={ filtersInlineWidth }
onChange={ ( width ) => setAttributes( { filtersInlineWidth: width } ) }
min={ 100 }
max={ 800 }
/>
: null }
</PanelBody>
<PanelBody
title={__('Colors', 'tainacan')}
@ -846,6 +858,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
style={{
'--tainacan-background-color': backgroundColor,
'--tainacan-filter-menu-width-theme': filtersAreaWidth + '%',
'--tainacan-filters-inline-width': filtersInlineWidth + 'px',
'--tainacan-input-color': inputColor,
'--tainacan-input-background-color': inputBackgroundColor,
'--tainacan-input-border-color': inputBorderColor,

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

@ -51,7 +51,8 @@ export default function({ attributes }) {
collectionOrderByMeta,
collectionOrderByType,
shouldNotHideFiltersOnMobile,
displayFiltersHorizontally
displayFiltersHorizontally,
filtersInlineWidth
} = attributes;
let updatedListType = '' + listType;
@ -70,6 +71,7 @@ export default function({ attributes }) {
'--tainacan-base-font-size': baseFontSize + 'px',
'--tainacan-background-color': backgroundColor,
'--tainacan-filter-menu-width-theme': filtersAreaWidth + '%',
'--tainacan-filters-inline-width': filtersInlineWidth + 'px',
'--tainacan-input-color': inputColor,
'--tainacan-input-background-color': inputBackgroundColor,
'--tainacan-input-border-color': inputBorderColor,

2
src/views/gutenberg-blocks/blocks/faceted-search/style.scss
View File

@ -78,7 +78,7 @@
.fake-filter {
margin: 6px 12px;
display: inline-flex;
width: 16.666%;
width: var(--tainacan-filters-inline-width, 272px);
}
}
}

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

@ -190,11 +190,11 @@
}
.filter-item-forms {
width: 100%;
min-width: 272px;
min-width: var(--tainacan-filters-inline-width, 272px);
break-inside: avoid;
display: inline-block;
vertical-align: text-top;
margin-bottom: 12px;
margin-bottom: 1rem;
}
@media screen and (min-width: 769px) {
@ -202,7 +202,7 @@
margin-right: 2.25em;
}
.filter-item-forms {
width: 272px;
width: var(--tainacan-filters-inline-width, 272px);
}
.filter-item-forms:not(:last-child) {
margin-right: 2.25em;