Adds option for adjusting grid margin.

This commit is contained in:
Mateus Machado Luna 2019-03-12 11:02:08 -03:00
parent 59e8c0d850
commit 6f3049bed0
4 changed files with 19 additions and 12 deletions

View File

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

View File

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

View File

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