Marginless items grid when no title exists. Fetch only for loading items.

This commit is contained in:
Mateus Machado Luna 2019-03-11 19:02:10 -03:00
parent aa11b73c8f
commit abe1a442ad
4 changed files with 38 additions and 7 deletions

View File

@ -223,6 +223,19 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; } 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;
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 !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 {
height: 185px !important;
margin-bottom: 0px !important; }
.wp-block-tainacan-items-list ul.items-list.items-layout-grid, .wp-block-tainacan-items-list ul.items-list.items-layout-grid,
.wp-block-tainacan-items-list ul.items-list-edit.items-layout-grid { .wp-block-tainacan-items-list ul.items-list-edit.items-layout-grid {
padding: 0; padding: 0;

File diff suppressed because one or more lines are too long

View File

@ -318,6 +318,7 @@ registerBlockType('tainacan/items-list', {
</Button> </Button>
<Button <Button
isPrimary isPrimary
type="submit"
disabled={ temporaryCollectionId == undefined || temporaryCollectionId == null || temporaryCollectionId == ''} disabled={ temporaryCollectionId == undefined || temporaryCollectionId == null || temporaryCollectionId == ''}
onClick={ () => selectCollection(temporaryCollectionId) }> onClick={ () => selectCollection(temporaryCollectionId) }>
{__('Select items', 'tainacan')} {__('Select items', 'tainacan')}
@ -435,6 +436,7 @@ registerBlockType('tainacan/items-list', {
</Button> </Button>
<Button <Button
isPrimary isPrimary
type="submit"
onClick={ () => applySelectedItems() }> onClick={ () => applySelectedItems() }>
{__('Finish', 'tainacan')} {__('Finish', 'tainacan')}
</Button> </Button>
@ -554,7 +556,7 @@ registerBlockType('tainacan/items-list', {
isLoadingItems: isLoadingItems isLoadingItems: isLoadingItems
}); });
let endpoint = '/collection/'+ collectionId + '/items/?perpage=' + itemsPerPage; let endpoint = '/collection/'+ collectionId + '/items/?fetch_only=title,thumbnail&perpage=' + itemsPerPage;
if (title != undefined && title != '') if (title != undefined && title != '')
endpoint += '&search=' + title; endpoint += '&search=' + title;
@ -590,7 +592,7 @@ registerBlockType('tainacan/items-list', {
if (itemsPage <= 1) if (itemsPage <= 1)
modalItems = []; modalItems = [];
let endpoint = '/collection/'+ collectionId + '/items/?&perpage=' + itemsPerPage + '&paged=' + itemsPage; let endpoint = '/collection/'+ collectionId + '/items/?fetch_only=title,thumbnail&perpage=' + itemsPerPage + '&paged=' + itemsPage;
isLoadingItems = true; isLoadingItems = true;
itemsPage++; itemsPage++;
@ -634,10 +636,12 @@ registerBlockType('tainacan/items-list', {
function resetCollections() { function resetCollections() {
collectionId = null; collectionId = null;
collectionPage = 1; collectionPage = 1;
modalItems = [];
setAttributes({ setAttributes({
collectionId: collectionId, collectionId: collectionId,
collectionPage: collectionPage collectionPage: collectionPage,
modalItems: false
}); });
fetchModalCollections(); fetchModalCollections();
} }
@ -825,10 +829,11 @@ registerBlockType('tainacan/items-list', {
{ isModalOpen && ( { isModalOpen && (
collectionId != null && collectionId != undefined ? renderItemsModalContent() : renderCollectionModalContent() collectionId != null && collectionId != undefined ? renderItemsModalContent() : renderCollectionModalContent()
) } ) }
<div className="block-control"> <div className="block-control">
<Button <Button
isPrimary isPrimary
type="submit"
onClick={ () => openItemsModal() }> onClick={ () => openItemsModal() }>
{__('Select items', 'tainacan')} {__('Select items', 'tainacan')}
</Button> </Button>

View File

@ -15,8 +15,21 @@
} }
// Grid View Mode ---------------------------------------------------- // Grid View Mode ----------------------------------------------------
ul.items-list.items-list-without-margin { ul.items-list.items-list-without-margin,
ul.items-list-edit.items-list-without-margin {
grid-template-columns: repeat(auto-fill, 185px) !important;
justify-content: center !important;
grid-template-rows: auto !important;
li {
margin: 0 !important;
height: 185px !important;
img {
height: 185px !important;
margin-bottom: 0px !important;
}
}
} }
ul.items-list.items-layout-grid, ul.items-list.items-layout-grid,
ul.items-list-edit.items-layout-grid { ul.items-list-edit.items-layout-grid {