Continues theme side integration and loads collections without at leas three items.

This commit is contained in:
Mateus Machado Luna 2019-08-22 15:14:41 -03:00
parent 19443d7f6e
commit 9887ca884d
5 changed files with 149 additions and 52 deletions

View File

@ -64,19 +64,33 @@
color: #555758; } color: #555758; }
.wp-block-tainacan-modal .spinner-container .components-spineer { .wp-block-tainacan-modal .spinner-container .components-spineer {
margin: 8px; } margin: 8px; }
.wp-block-tainacan-modal .components-modal__header .components-icon-button {
padding-right: 0; }
.wp-block-tainacan-modal hr {
margin: 5px 0.75rem; }
.wp-block-tainacan-modal .modal-search-area { .wp-block-tainacan-modal .modal-search-area {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: 24px; } margin-bottom: 14px; }
.wp-block-tainacan-modal .modal-search-area .components-base-control { .wp-block-tainacan-modal .modal-search-area .components-base-control {
width: 60%; } width: 60%; }
@media only screen and (max-width: 1024px) { @media only screen and (max-width: 1024px) {
.wp-block-tainacan-modal .modal-search-area .components-base-control { .wp-block-tainacan-modal .modal-search-area .components-base-control {
width: 95%; } } width: 95%; } }
.wp-block-tainacan-modal .modal-search-area .components-base-control label { .wp-block-tainacan-modal .modal-search-area .components-base-control:nth-child(2) {
flex-shrink: 2; }
.wp-block-tainacan-modal .modal-search-area .components-base-control .components-base-control__field {
flex-wrap: wrap; }
.wp-block-tainacan-modal .modal-search-area .components-base-control label.components-base-control__label {
font-weight: 500;
color: #454647;
font-size: 0.875rem;
text-align: center; } text-align: center; }
.wp-block-tainacan-modal .modal-search-area .components-base-control input.components-text-control__input {
padding: 5px 8px;
height: 28px; }
.wp-block-tainacan-modal .modal-radio-area-label { .wp-block-tainacan-modal .modal-radio-area-label {
font-weight: bold; font-weight: 500;
margin-left: 1.75rem; } margin-left: 1.75rem; }
.wp-block-tainacan-modal .modal-checkbox-list, .wp-block-tainacan-modal .modal-checkbox-list,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field { .wp-block-tainacan-modal .modal-radio-list .components-base-control__field {
@ -89,7 +103,8 @@
list-style-type: none; list-style-type: none;
margin: 12px; margin: 12px;
max-height: 50vh; max-height: 50vh;
overflow-y: auto; } overflow-y: auto;
overflow-x: hidden; }
.wp-block-tainacan-modal .modal-checkbox-list .components-base-control, .wp-block-tainacan-modal .modal-checkbox-list .components-base-control,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-base-control { .wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-base-control {
overflow: hidden; } overflow: hidden; }
@ -200,6 +215,25 @@
line-height: 1.2rem; } line-height: 1.2rem; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a:hover { .wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a:hover {
text-decoration: none; } text-decoration: none; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
width: calc(20% - 32px);
min-width: calc(20% - 32px); }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid a {
width: 100%;
display: block; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid .collection-items-grid {
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows: 50% 50%;
width: 100%; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid .collection-items-grid img:first-of-type {
grid-column-start: 1;
grid-column-end: span 2;
grid-row-start: 1;
grid-row-end: span 2; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid .collection-items-grid img {
padding: 2px;
margin-bottom: 0px; }
.wp-block-tainacan-carousel-collections-list .preview-warning { .wp-block-tainacan-carousel-collections-list .preview-warning {
width: 100%; width: 100%;
font-size: 0.875rem; font-size: 0.875rem;
@ -254,8 +288,8 @@
width: calc(14.286% - 32px); width: calc(14.286% - 32px);
min-width: calc(14.286% - 32px); } min-width: calc(14.286% - 32px); }
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid { .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid {
width: calc(16.666% - 32px); width: calc(20% - 32px);
min-width: calc(16.666% - 32px); } min-width: calc(20% - 32px); }
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item a { .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item a {
color: #454647; color: #454647;
font-weight: bold; font-weight: bold;
@ -310,35 +344,50 @@
width: calc(16.666% - 32px); width: calc(16.666% - 32px);
min-width: calc(16.666% - 32px); } min-width: calc(16.666% - 32px); }
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid { .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid {
width: calc(20% - 32px); width: calc(25% - 32px);
min-width: calc(20% - 32px); } } min-width: calc(25% - 32px); }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
width: calc(25% - 32px);
min-width: calc(25% - 32px); } }
@media only screen and (max-width: 1452px) { @media only screen and (max-width: 1452px) {
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item { .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
width: calc(20% - 32px); width: calc(20% - 32px);
min-width: calc(20% - 32px); } min-width: calc(20% - 32px); }
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid { .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid {
width: calc(25% - 32px); width: calc(33.333% - 32px);
min-width: calc(25% - 32px); } } min-width: calc(33.333% - 32px); }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
width: calc(33.333% - 32px);
min-width: calc(33.333% - 32px); } }
@media only screen and (max-width: 1118px) { @media only screen and (max-width: 1118px) {
.wp-block-tainacan-carousel-collections-list ul.collections-edit li.collection-list-item { .wp-block-tainacan-carousel-collections-list ul.collections-edit li.collection-list-item {
width: calc(25% - 32px); width: calc(25% - 32px);
min-width: calc(25% - 32px); } min-width: calc(25% - 32px); }
.wp-block-tainacan-carousel-collections-list ul.collections-edit li.collection-list-item.collection-list-item-grid { .wp-block-tainacan-carousel-collections-list ul.collections-edit li.collection-list-item.collection-list-item-grid {
width: calc(33.333% - 32px); width: calc(50% - 32px);
min-width: calc(33.333% - 32px); } } min-width: calc(50% - 32px); }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
width: calc(50% - 32px);
min-width: calc(50% - 32px); } }
@media only screen and (max-width: 854px) { @media only screen and (max-width: 854px) {
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item { .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
width: calc(33.333% - 32px); width: calc(33.333% - 32px);
min-width: calc(33.333% - 32px); } min-width: calc(33.333% - 32px); }
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid { .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid {
width: calc(50% - 32px); width: calc(100% - 32px);
min-width: calc(50% - 32px); } } min-width: calc(100% - 32px); }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
width: calc(100% - 32px);
min-width: calc(100% - 32px); } }
@media only screen and (max-width: 584px) { @media only screen and (max-width: 584px) {
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item { .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
width: calc(50% - 32px); width: calc(50% - 32px);
min-width: calc(50% - 32px); } min-width: calc(50% - 32px); }
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid { .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid {
width: calc(100% - 32px); width: calc(100% - 32px);
min-width: calc(100% - 32px); } } min-width: calc(100% - 32px); }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
width: calc(100% - 32px);
min-width: calc(100% - 32px); } }
/*# sourceMappingURL=tainacan-gutenberg-block-carousel-collections-list.css.map */ /*# sourceMappingURL=tainacan-gutenberg-block-carousel-collections-list.css.map */

File diff suppressed because one or more lines are too long

View File

@ -38,47 +38,47 @@
:href="collection.url" :href="collection.url"
target="_blank"> target="_blank">
<div class="collection-items-grid"> <div class="collection-items-grid">
<pre>{{ collectionItems[collection.id][0].thumbnail }}</pre> <img
<!-- <img
:src=" :src="
collectionItems[collection.id][0].thumbnail && collectionItems[collection.id][0].thumbnail['tainacan-medium'][0] && collectionItems[collection.id][0].thumbnail['tainacan-medium'][0] collectionItems[collection.id][0] && collectionItems[collection.id][0].thumbnail && collectionItems[collection.id][0].thumbnail['tainacan-medium'][0] && collectionItems[collection.id][0].thumbnail['tainacan-medium'][0]
? ?
collectionItems[collection.id][0].thumbnail['tainacan-medium'][0] collectionItems[collection.id][0].thumbnail['tainacan-medium'][0]
: :
(collectionItems[collection.id][0].thumbnail && collectionItems[collection.id][0].thumbnail['thumbnail'][0] && collectionItems[collection.id][0].thumbnail['thumbnail'][0] (collectionItems[collection.id][0] && collectionItems[collection.id][0].thumbnail && collectionItems[collection.id][0].thumbnail['thumbnail'][0] && collectionItems[collection.id][0].thumbnail['thumbnail'][0]
? ?
collectionItems[collection.id][0].thumbnail['thumbnail'][0] collectionItems[collection.id][0].thumbnail['thumbnail'][0]
: :
`${tainacan_plugin.base_url}/admin/images/placeholder_square.png`) `${tainacanBaseUrl}/admin/images/placeholder_square.png`)
" "
:alt=" collectionItems[collection.id][0].name ? collectionItems[collection.id][0].name : __( 'Thumbnail', 'tainacan' ) "> :alt="collectionItems[collection.id][0] && collectionItems[collection.id][0].name ? collectionItems[collection.id][0].name : $root.__( 'Thumbnail', 'tainacan' ) ">
<img <img
:src=" :src="
collectionItems[collection.id][1].thumbnail && collectionItems[collection.id][1].thumbnail['tainacan-medium'][0] && collectionItems[collection.id][1].thumbnail['tainacan-medium'][0] collectionItems[collection.id][1] && collectionItems[collection.id][1].thumbnail && collectionItems[collection.id][1].thumbnail['tainacan-medium'][0] && collectionItems[collection.id][1].thumbnail['tainacan-medium'][0]
? ?
collectionItems[collection.id][1].thumbnail['tainacan-medium'][0] collectionItems[collection.id][1].thumbnail['tainacan-medium'][0]
: :
(collectionItems[collection.id][1].thumbnail && collectionItems[collection.id][1].thumbnail['thumbnail'][0] && collectionItems[collection.id][1].thumbnail['thumbnail'][0] (collectionItems[collection.id][1] && collectionItems[collection.id][1].thumbnail && collectionItems[collection.id][1].thumbnail['thumbnail'][0] && collectionItems[collection.id][1].thumbnail['thumbnail'][0]
? ?
collectionItems[collection.id][1].thumbnail['thumbnail'][0] collectionItems[collection.id][1].thumbnail['thumbnail'][0]
: :
`${tainacan_plugin.base_url}/admin/images/placeholder_square.png`) `${tainacanBaseUrl}/admin/images/placeholder_square.png`)
" "
:alt=" collectionItems[collection.id][1].name ? collectionItems[collection.id][1].name : __( 'Thumbnail', 'tainacan' ) "> :alt="collectionItems[collection.id][1] && collectionItems[collection.id][1].name ? collectionItems[collection.id][1].name : $root.__( 'Thumbnail', 'tainacan' ) ">
<img <img
:src=" :src="
collectionItems[collection.id][2].thumbnail && collectionItems[collection.id][2].thumbnail['tainacan-medium'][0] && collectionItems[collection.id][2].thumbnail['tainacan-medium'][0] collectionItems[collection.id][2] && collectionItems[collection.id][2].thumbnail && collectionItems[collection.id][2].thumbnail['tainacan-medium'][0] && collectionItems[collection.id][2].thumbnail['tainacan-medium'][0]
? ?
collectionItems[collection.id][2].thumbnail['tainacan-medium'][0] collectionItems[collection.id][2].thumbnail['tainacan-medium'][0]
: :
(collectionItems[collection.id][2].thumbnail && collectionItems[collection.id][2].thumbnail['thumbnail'][0] && collectionItems[collection.id][2].thumbnail['thumbnail'][0] (collectionItems[collection.id][2] && collectionItems[collection.id][2].thumbnail && collectionItems[collection.id][2].thumbnail['thumbnail'][0] && collectionItems[collection.id][2].thumbnail['thumbnail'][0]
? ?
collectionItems[collection.id][2].thumbnail['thumbnail'][0] collectionItems[collection.id][2].thumbnail['thumbnail'][0]
: :
`${tainacan_plugin.base_url}/admin/images/placeholder_square.png`) `${tainacanBaseUrl}/admin/images/placeholder_square.png`)
" "
:alt=" collectionItems[collection.id][2].name ? collectionItems[collection.id][2].name : __( 'Thumbnail', 'tainacan' ) "> :alt="collectionItems[collection.id][2] && collectionItems[collection.id][2].name ? collectionItems[collection.id][2].name : $root.__( 'Thumbnail', 'tainacan' ) ">
--> </div> </div>
<span v-if="!hideName">{{ collection.name ? collection.name : '' }}</span>
</a> </a>
</swiper-slide> </swiper-slide>
</swiper> </swiper>

View File

@ -65,6 +65,33 @@
a:hover { a:hover {
text-decoration: none; text-decoration: none;
} }
.swiper-slide.collection-list-item-grid {
width: calc(20% - 32px);
min-width: calc(20% - 32px);
a {
width: 100%;
display: block;
}
.collection-items-grid {
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows: 50% 50%;
width: 100%;
img:first-of-type {
grid-column-start: 1;
grid-column-end: span 2;
grid-row-start: 1;
grid-row-end: span 2;
}
img {
padding: 2px;
margin-bottom: 0px;
}
}
}
} }
} }
@ -135,8 +162,8 @@
min-width: calc(14.286% - 32px); min-width: calc(14.286% - 32px);
&.collection-list-item-grid { &.collection-list-item-grid {
width: calc(16.666% - 32px); width: calc(20% - 32px);
min-width: calc(16.666% - 32px); min-width: calc(20% - 32px);
} }
a { a {
@ -147,7 +174,6 @@
img { img {
height: auto; height: auto;
padding: 0px; padding: 0px;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@ -215,10 +241,14 @@
min-width: calc(16.666% - 32px); min-width: calc(16.666% - 32px);
&.collection-list-item-grid { &.collection-list-item-grid {
width: calc(20% - 32px); width: calc(25% - 32px);
min-width: calc(20% - 32px); min-width: calc(25% - 32px);
} }
} }
.tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
width: calc(25% - 32px);
min-width: calc(25% - 32px);
}
} }
@media only screen and (max-width: 1452px) { @media only screen and (max-width: 1452px) {
@ -227,10 +257,14 @@
min-width: calc(20% - 32px); min-width: calc(20% - 32px);
&.collection-list-item-grid { &.collection-list-item-grid {
width: calc(25% - 32px); width: calc(33.333% - 32px);
min-width: calc(25% - 32px); min-width: calc(33.333% - 32px);
} }
} }
.tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
width: calc(33.333% - 32px);
min-width: calc(33.333% - 32px);
}
} }
@media only screen and (max-width: 1118px) { @media only screen and (max-width: 1118px) {
@ -239,10 +273,14 @@
min-width: calc(25% - 32px); min-width: calc(25% - 32px);
&.collection-list-item-grid { &.collection-list-item-grid {
width: calc(33.333% - 32px); width: calc(50% - 32px);
min-width: calc(33.333% - 32px); min-width: calc(50% - 32px);
} }
} }
.tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
width: calc(50% - 32px);
min-width: calc(50% - 32px);
}
} }
@media only screen and (max-width: 854px) { @media only screen and (max-width: 854px) {
@ -251,10 +289,14 @@
min-width: calc(33.333% - 32px); min-width: calc(33.333% - 32px);
&.collection-list-item-grid { &.collection-list-item-grid {
width: calc(50% - 32px); width: calc(100% - 32px);
min-width: calc(50% - 32px); min-width: calc(100% - 32px);
} }
} }
.tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
width: calc(100% - 32px);
min-width: calc(100% - 32px);
}
} }
@media only screen and (max-width: 584px) { @media only screen and (max-width: 584px) {
@ -267,6 +309,10 @@
min-width: calc(100% - 32px); min-width: calc(100% - 32px);
} }
} }
.tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
width: calc(100% - 32px);
min-width: calc(100% - 32px);
}
} }
} }

View File

@ -141,43 +141,43 @@ registerBlockType('tainacan/carousel-collections-list', {
<div class="collection-items-grid"> <div class="collection-items-grid">
<img <img
src={ src={
collectionItems[0].thumbnail && collectionItems[0].thumbnail['tainacan-medium'][0] && collectionItems[0].thumbnail['tainacan-medium'][0] collectionItems[0] && collectionItems[0].thumbnail && collectionItems[0].thumbnail['tainacan-medium'][0] && collectionItems[0].thumbnail['tainacan-medium'][0]
? ?
collectionItems[0].thumbnail['tainacan-medium'][0] collectionItems[0].thumbnail['tainacan-medium'][0]
: :
(collectionItems[0].thumbnail && collectionItems[0].thumbnail['thumbnail'][0] && collectionItems[0].thumbnail['thumbnail'][0] (collectionItems[0] && collectionItems[0].thumbnail && collectionItems[0].thumbnail['thumbnail'][0] && collectionItems[0].thumbnail['thumbnail'][0]
? ?
collectionItems[0].thumbnail['thumbnail'][0] collectionItems[0].thumbnail['thumbnail'][0]
: :
`${tainacan_plugin.base_url}/admin/images/placeholder_square.png`) `${tainacan_plugin.base_url}/admin/images/placeholder_square.png`)
} }
alt={ collectionItems[0].name ? collectionItems[0].name : __( 'Thumbnail', 'tainacan' ) }/> alt={ collectionItems[0] && collectionItems[0].name ? collectionItems[0].name : __( 'Thumbnail', 'tainacan' ) }/>
<img <img
src={ src={
collectionItems[1].thumbnail && collectionItems[1].thumbnail['tainacan-medium'][0] && collectionItems[1].thumbnail['tainacan-medium'][0] collectionItems[1] && collectionItems[1].thumbnail && collectionItems[1].thumbnail['tainacan-medium'][0] && collectionItems[1].thumbnail['tainacan-medium'][0]
? ?
collectionItems[1].thumbnail['tainacan-medium'][0] collectionItems[1].thumbnail['tainacan-medium'][0]
: :
(collectionItems[1].thumbnail && collectionItems[1].thumbnail['thumbnail'][0] && collectionItems[1].thumbnail['thumbnail'][0] (collectionItems[1] && collectionItems[1].thumbnail && collectionItems[1].thumbnail['thumbnail'][0] && collectionItems[1].thumbnail['thumbnail'][0]
? ?
collectionItems[1].thumbnail['thumbnail'][0] collectionItems[1].thumbnail['thumbnail'][0]
: :
`${tainacan_plugin.base_url}/admin/images/placeholder_square.png`) `${tainacan_plugin.base_url}/admin/images/placeholder_square.png`)
} }
alt={ collectionItems[1].name ? collectionItems[1].name : __( 'Thumbnail', 'tainacan' ) }/> alt={ collectionItems[1] && collectionItems[1].name ? collectionItems[1].name : __( 'Thumbnail', 'tainacan' ) }/>
<img <img
src={ src={
collectionItems[2].thumbnail && collectionItems[2].thumbnail['tainacan-medium'][0] && collectionItems[2].thumbnail['tainacan-medium'][0] collectionItems[2] && collectionItems[2].thumbnail && collectionItems[2].thumbnail['tainacan-medium'][0] && collectionItems[2].thumbnail['tainacan-medium'][0]
? ?
collectionItems[2].thumbnail['tainacan-medium'][0] collectionItems[2].thumbnail['tainacan-medium'][0]
: :
(collectionItems[2].thumbnail && collectionItems[2].thumbnail['thumbnail'][0] && collectionItems[2].thumbnail['thumbnail'][0] (collectionItems[2] && collectionItems[2].thumbnail && collectionItems[2].thumbnail['thumbnail'][0] && collectionItems[2].thumbnail['thumbnail'][0]
? ?
collectionItems[2].thumbnail['thumbnail'][0] collectionItems[2].thumbnail['thumbnail'][0]
: :
`${tainacan_plugin.base_url}/admin/images/placeholder_square.png`) `${tainacan_plugin.base_url}/admin/images/placeholder_square.png`)
} }
alt={ collectionItems[2].name ? collectionItems[2].name : __( 'Thumbnail', 'tainacan' ) }/> alt={ collectionItems[2] && collectionItems[2].name ? collectionItems[2].name : __( 'Thumbnail', 'tainacan' ) }/>
</div> </div>
: :
<img <img
@ -219,7 +219,9 @@ registerBlockType('tainacan/carousel-collections-list', {
.then(response => { .then(response => {
if (showCollectionThumbnail) { if (showCollectionThumbnail) {
collections.push(prepareItem(collection)); for (let collection of response.data) {
collections.push(prepareItem(collection));
}
setAttributes({ setAttributes({
content: <div></div>, content: <div></div>,
collections: collections, collections: collections,