Continues theme side integration and loads collections without at leas three items.
This commit is contained in:
Mateus Machado Luna
parent
19443d7f6e
commit
9887ca884d
|
|
@ -64,19 +64,33 @@
|
|||
color: #555758; }
|
||||
.wp-block-tainacan-modal .spinner-container .components-spineer {
|
||||
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 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 24px; }
|
||||
margin-bottom: 14px; }
|
||||
.wp-block-tainacan-modal .modal-search-area .components-base-control {
|
||||
width: 60%; }
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.wp-block-tainacan-modal .modal-search-area .components-base-control {
|
||||
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; }
|
||||
.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 {
|
||||
font-weight: bold;
|
||||
font-weight: 500;
|
||||
margin-left: 1.75rem; }
|
||||
.wp-block-tainacan-modal .modal-checkbox-list,
|
||||
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field {
|
||||
|
|
@ -89,7 +103,8 @@
|
|||
list-style-type: none;
|
||||
margin: 12px;
|
||||
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-radio-list .components-base-control__field .components-base-control {
|
||||
overflow: hidden; }
|
||||
|
|
@ -200,6 +215,25 @@
|
|||
line-height: 1.2rem; }
|
||||
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a:hover {
|
||||
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 {
|
||||
width: 100%;
|
||||
font-size: 0.875rem;
|
||||
|
|
@ -254,8 +288,8 @@
|
|||
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 {
|
||||
width: calc(16.666% - 32px);
|
||||
min-width: calc(16.666% - 32px); }
|
||||
width: calc(20% - 32px);
|
||||
min-width: calc(20% - 32px); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item a {
|
||||
color: #454647;
|
||||
font-weight: bold;
|
||||
|
|
@ -310,35 +344,50 @@
|
|||
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 {
|
||||
width: calc(20% - 32px);
|
||||
min-width: calc(20% - 32px); } }
|
||||
width: calc(25% - 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) {
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
|
||||
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 {
|
||||
width: calc(25% - 32px);
|
||||
min-width: calc(25% - 32px); } }
|
||||
width: calc(33.333% - 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) {
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-edit li.collection-list-item {
|
||||
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 {
|
||||
width: calc(33.333% - 32px);
|
||||
min-width: calc(33.333% - 32px); } }
|
||||
width: calc(50% - 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) {
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
|
||||
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 {
|
||||
width: calc(50% - 32px);
|
||||
min-width: calc(50% - 32px); } }
|
||||
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); } }
|
||||
@media only screen and (max-width: 584px) {
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
|
||||
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 {
|
||||
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 */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -38,47 +38,47 @@
|
|||
:href="collection.url"
|
||||
target="_blank">
|
||||
<div class="collection-items-grid">
|
||||
<pre>{{ collectionItems[collection.id][0].thumbnail }}</pre>
|
||||
<!-- <img
|
||||
<img
|
||||
: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 && 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]
|
||||
:
|
||||
`${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
|
||||
: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 && 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]
|
||||
:
|
||||
`${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
|
||||
: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 && 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]
|
||||
:
|
||||
`${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' ) ">
|
||||
--> </div>
|
||||
:alt="collectionItems[collection.id][2] && collectionItems[collection.id][2].name ? collectionItems[collection.id][2].name : $root.__( 'Thumbnail', 'tainacan' ) ">
|
||||
</div>
|
||||
<span v-if="!hideName">{{ collection.name ? collection.name : '' }}</span>
|
||||
</a>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
|
|
|
|||
|
|
@ -65,6 +65,33 @@
|
|||
a:hover {
|
||||
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);
|
||||
|
||||
&.collection-list-item-grid {
|
||||
width: calc(16.666% - 32px);
|
||||
min-width: calc(16.666% - 32px);
|
||||
width: calc(20% - 32px);
|
||||
min-width: calc(20% - 32px);
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -147,7 +174,6 @@
|
|||
|
||||
img {
|
||||
height: auto;
|
||||
|
||||
padding: 0px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
|
@ -215,10 +241,14 @@
|
|||
min-width: calc(16.666% - 32px);
|
||||
|
||||
&.collection-list-item-grid {
|
||||
width: calc(20% - 32px);
|
||||
min-width: calc(20% - 32px);
|
||||
width: calc(25% - 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) {
|
||||
|
||||
|
|
@ -227,10 +257,14 @@
|
|||
min-width: calc(20% - 32px);
|
||||
|
||||
&.collection-list-item-grid {
|
||||
width: calc(25% - 32px);
|
||||
min-width: calc(25% - 32px);
|
||||
width: calc(33.333% - 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) {
|
||||
|
||||
|
|
@ -239,10 +273,14 @@
|
|||
min-width: calc(25% - 32px);
|
||||
|
||||
&.collection-list-item-grid {
|
||||
width: calc(33.333% - 32px);
|
||||
min-width: calc(33.333% - 32px);
|
||||
width: calc(50% - 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) {
|
||||
|
||||
|
|
@ -251,10 +289,14 @@
|
|||
min-width: calc(33.333% - 32px);
|
||||
|
||||
&.collection-list-item-grid {
|
||||
width: calc(50% - 32px);
|
||||
min-width: calc(50% - 32px);
|
||||
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);
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 584px) {
|
||||
|
||||
|
|
@ -267,6 +309,10 @@
|
|||
min-width: calc(100% - 32px);
|
||||
}
|
||||
}
|
||||
.tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -141,43 +141,43 @@ registerBlockType('tainacan/carousel-collections-list', {
|
|||
<div class="collection-items-grid">
|
||||
<img
|
||||
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 && 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]
|
||||
:
|
||||
`${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
|
||||
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 && 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]
|
||||
:
|
||||
`${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
|
||||
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 && 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]
|
||||
:
|
||||
`${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>
|
||||
:
|
||||
<img
|
||||
|
|
@ -219,7 +219,9 @@ registerBlockType('tainacan/carousel-collections-list', {
|
|||
.then(response => {
|
||||
|
||||
if (showCollectionThumbnail) {
|
||||
collections.push(prepareItem(collection));
|
||||
for (let collection of response.data) {
|
||||
collections.push(prepareItem(collection));
|
||||
}
|
||||
setAttributes({
|
||||
content: <div></div>,
|
||||
collections: collections,
|
||||
|
|
|
|||
Loading…
Reference in New Issue