Adds option for adjusting grid margin.
This commit is contained in:
parent
59e8c0d850
commit
6f3049bed0
|
@ -225,12 +225,14 @@
|
|||
justify-content: center; }
|
||||
.wp-block-tainacan-items-list ul.items-list.items-list-without-margin,
|
||||
.wp-block-tainacan-items-list ul.items-list-edit.items-list-without-margin {
|
||||
grid-template-columns: repeat(auto-fill, 185px) !important;
|
||||
grid-template-columns: repeat(auto-fill, 185px);
|
||||
justify-content: center !important;
|
||||
grid-template-rows: auto !important; }
|
||||
.wp-block-tainacan-items-list ul.items-list.items-list-without-margin li,
|
||||
.wp-block-tainacan-items-list ul.items-list-edit.items-list-without-margin li {
|
||||
margin: 0;
|
||||
margin-top: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
height: 185px !important; }
|
||||
.wp-block-tainacan-items-list ul.items-list.items-list-without-margin li img,
|
||||
.wp-block-tainacan-items-list ul.items-list-edit.items-list-without-margin li img {
|
||||
|
@ -261,8 +263,7 @@
|
|||
height: auto;
|
||||
width: 185px;
|
||||
min-width: 185px;
|
||||
padding: 0px;
|
||||
margin-bottom: 10px; }
|
||||
padding: 0px; }
|
||||
.wp-block-tainacan-items-list ul.items-list.items-layout-grid li.item-list-item a.item-without-title span,
|
||||
.wp-block-tainacan-items-list ul.items-list-edit.items-layout-grid li.item-list-item a.item-without-title span {
|
||||
display: none; }
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -207,7 +207,7 @@ registerBlockType('tainacan/items-list', {
|
|||
<li
|
||||
key={ item.id }
|
||||
className="item-list-item"
|
||||
style={{ marginTop: layout == 'grid' ? gridMargin + 'px' : ''}}>
|
||||
style={{ marginBottom: layout == 'grid' ? gridMargin + 'px' : ''}}>
|
||||
<IconButton
|
||||
onClick={ () => removeItemOfId(item.id) }
|
||||
icon="no-alt"
|
||||
|
@ -461,7 +461,11 @@ registerBlockType('tainacan/items-list', {
|
|||
|
||||
setAttributes({
|
||||
content: (
|
||||
<ul className={'items-list items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')}>{ selectedItemsHTML }</ul>
|
||||
<ul
|
||||
style={{ gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + (showName ? 220 : 185)) + 'px)' : 'inherit' }}
|
||||
className={'items-list items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')}>
|
||||
{ selectedItemsHTML }
|
||||
</ul>
|
||||
),
|
||||
selectedItemsHTML: selectedItemsHTML
|
||||
});
|
||||
|
@ -833,7 +837,7 @@ registerBlockType('tainacan/items-list', {
|
|||
setContent();
|
||||
}}
|
||||
min={ 0 }
|
||||
max={ 24 }
|
||||
max={ 48 }
|
||||
/>
|
||||
</div>
|
||||
: null }
|
||||
|
@ -873,7 +877,7 @@ registerBlockType('tainacan/items-list', {
|
|||
}
|
||||
|
||||
<ul
|
||||
style={{ gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + gridMargin + 185 + 'px)' : 'inherit' }}
|
||||
style={{ gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + (showName ? 220 : 185)) + 'px)' : 'inherit' }}
|
||||
className={'items-list-edit items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')}>
|
||||
{ selectedItemsHTML }
|
||||
</ul>
|
||||
|
|
|
@ -17,12 +17,14 @@
|
|||
// Grid View Mode ----------------------------------------------------
|
||||
ul.items-list.items-list-without-margin,
|
||||
ul.items-list-edit.items-list-without-margin {
|
||||
grid-template-columns: repeat(auto-fill, 185px) !important;
|
||||
grid-template-columns: repeat(auto-fill, 185px);
|
||||
justify-content: center !important;
|
||||
grid-template-rows: auto !important;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
margin-top: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
height: 185px !important;
|
||||
|
||||
img {
|
||||
|
@ -51,6 +53,7 @@
|
|||
a {
|
||||
color: #454647;
|
||||
font-weight: bold;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
img {
|
||||
|
@ -58,7 +61,6 @@
|
|||
width: 185px;
|
||||
min-width: 185px;
|
||||
padding: 0px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
a.item-without-title span {
|
||||
|
|
Loading…
Reference in New Issue