Adds option to set space between slides in every carousel block.
This commit is contained in:
parent
54b868f04c
commit
c89924b38f
|
@ -243,15 +243,15 @@
|
|||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 8px 32px 8px 0px;
|
||||
width: calc(16.666% - 32px);
|
||||
min-width: calc(16.666% - 32px);
|
||||
margin: 8px var(--spaceBetweenCollections, 32px) 8px 0px;
|
||||
width: calc(16.666% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(16.666% - var(--spaceBetweenCollections, 32px));
|
||||
scroll-snap-align: start;
|
||||
scroll-margin: 0 16px; }
|
||||
scroll-margin: 0 calc(var(--spaceBetweenCollections, 32px) / 2); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid {
|
||||
margin: 16px;
|
||||
width: calc(25% - 16px);
|
||||
min-width: calc(25% - 16px); }
|
||||
margin: calc(var(--spaceBetweenCollections, 32px) / 2);
|
||||
width: calc(25% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(25% - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item a {
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
|
@ -303,32 +303,32 @@
|
|||
background-color: white !important;
|
||||
border: 1px solid var(--tainacan-block-gray3, #cbcbcb) !important; }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-9 {
|
||||
width: calc((100% / 9) - 32px);
|
||||
min-width: calc((100% / 9) - 32px); }
|
||||
width: calc((100% / 9) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 9) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-8 {
|
||||
width: calc((100% / 8) - 32px);
|
||||
min-width: calc((100% / 8) - 32px); }
|
||||
width: calc((100% / 8) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 8) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-7 {
|
||||
width: calc((100% / 7) - 32px);
|
||||
min-width: calc((100% / 7) - 32px); }
|
||||
width: calc((100% / 7) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 7) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-6 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px); }
|
||||
width: calc((100% / 6) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-5 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px); }
|
||||
width: calc((100% / 5) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-4 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px); }
|
||||
width: calc((100% / 4) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-3 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px); }
|
||||
width: calc((100% / 3) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-2 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px); }
|
||||
width: calc((100% / 2) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px); }
|
||||
width: calc(100% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item .collection-items-grid {
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
|
@ -353,114 +353,114 @@
|
|||
object-position: center; }
|
||||
@media only screen and (max-width: 1686px) {
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
|
||||
width: calc(20% - 32px);
|
||||
min-width: calc(20% - 32px); }
|
||||
width: calc(20% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(20% - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-9 {
|
||||
width: calc((100% / 8) - 32px);
|
||||
min-width: calc((100% / 8) - 32px); }
|
||||
width: calc((100% / 8) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 8) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-8 {
|
||||
width: calc((100% / 7) - 32px);
|
||||
min-width: calc((100% / 7) - 32px); }
|
||||
width: calc((100% / 7) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 7) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-7 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px); }
|
||||
width: calc((100% / 6) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-6 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px); }
|
||||
width: calc((100% / 5) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-5 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px); }
|
||||
width: calc((100% / 4) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-4 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px); }
|
||||
width: calc((100% / 3) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-3 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px); }
|
||||
width: calc((100% / 2) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-2, .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px); } }
|
||||
width: calc(100% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenCollections, 32px)); } }
|
||||
@media only screen and (max-width: 1452px) {
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
|
||||
width: calc(25% - 32px);
|
||||
min-width: calc(25% - 32px); }
|
||||
width: calc(25% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(25% - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-9 {
|
||||
width: calc((100% / 7) - 32px);
|
||||
min-width: calc((100% / 7) - 32px); }
|
||||
width: calc((100% / 7) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 7) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-8 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px); }
|
||||
width: calc((100% / 6) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-7 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px); }
|
||||
width: calc((100% / 5) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-6 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px); }
|
||||
width: calc((100% / 4) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-5 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px); }
|
||||
width: calc((100% / 3) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-4 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px); }
|
||||
width: calc((100% / 2) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-3, .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-2, .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px); } }
|
||||
width: calc(100% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenCollections, 32px)); } }
|
||||
@media only screen and (max-width: 1118px) {
|
||||
.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); }
|
||||
width: calc(33.333% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(33.333% - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-9 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px); }
|
||||
width: calc((100% / 6) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-8 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px); }
|
||||
width: calc((100% / 5) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-7 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px); }
|
||||
width: calc((100% / 4) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-6 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px); }
|
||||
width: calc((100% / 3) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-5 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px); }
|
||||
width: calc((100% / 2) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-4, .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-3, .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-2, .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px); } }
|
||||
width: calc(100% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenCollections, 32px)); } }
|
||||
@media only screen and (max-width: 854px) {
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
|
||||
width: calc(50% - 32px);
|
||||
min-width: calc(50% - 32px); }
|
||||
width: calc(50% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(50% - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-9 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px); }
|
||||
width: calc((100% / 5) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-8 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px); }
|
||||
width: calc((100% / 4) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-7 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px); }
|
||||
width: calc((100% / 3) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-6 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px); }
|
||||
width: calc((100% / 2) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-5, .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-4, .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-3, .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-2, .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px); } }
|
||||
width: calc(100% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenCollections, 32px)); } }
|
||||
@media only screen and (max-width: 584px) {
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px); }
|
||||
width: calc(100% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-9 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px); }
|
||||
width: calc((100% / 4) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-8 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px); }
|
||||
width: calc((100% / 3) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-7 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px); }
|
||||
width: calc((100% / 2) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenCollections, 32px)); }
|
||||
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-6, .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-5, .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-4, .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-3, .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-2, .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.max-collections-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px); } }
|
||||
width: calc(100% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenCollections, 32px)); } }
|
||||
|
||||
.block-editor-block-list__block > .wp-block-tainacan-carousel-collections-list {
|
||||
max-width: calc(100% - 72px); }
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -224,11 +224,11 @@
|
|||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 8px 16px;
|
||||
width: calc(14.285% - 32px);
|
||||
min-width: calc(14.285% - 32px);
|
||||
margin: 8px var(--spaceBetweenItems, 32px) 8px 0px;
|
||||
width: calc(14.285% - var(--spaceBetweenItems, var(--spaceBetweenItems, 32px) ) );
|
||||
min-width: calc(14.285% - var(--spaceBetweenItems, var(--spaceBetweenItems, 32px) ) );
|
||||
scroll-snap-align: start;
|
||||
scroll-margin: 0 16px; }
|
||||
scroll-margin: 0 calc(var(--spaceBetweenItems, 32px) / 2 ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item a {
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
|
@ -289,142 +289,142 @@
|
|||
background-color: white !important;
|
||||
border: 1px solid var(--tainacan-block-gray3, #cbcbcb) !important; }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-9 {
|
||||
width: calc((100% / 9) - 32px);
|
||||
min-width: calc((100% / 9) - 32px); }
|
||||
width: calc((100% / 9) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 9) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-8 {
|
||||
width: calc((100% / 8) - 32px);
|
||||
min-width: calc((100% / 8) - 32px); }
|
||||
width: calc((100% / 8) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 8) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-7 {
|
||||
width: calc((100% / 7) - 32px);
|
||||
min-width: calc((100% / 7) - 32px); }
|
||||
width: calc((100% / 7) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 7) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-6 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px); }
|
||||
width: calc((100% / 6) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-5 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px); }
|
||||
width: calc((100% / 5) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-4 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px); }
|
||||
width: calc((100% / 4) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-3 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px); }
|
||||
width: calc((100% / 3) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-2 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px); }
|
||||
width: calc((100% / 2) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px); }
|
||||
width: calc(100% - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc(100% - var(--spaceBetweenItems, 32px) ); }
|
||||
@media only screen and (max-width: 1686px) {
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
|
||||
width: calc(16.666% - 32px);
|
||||
min-width: calc(16.666% - 32px); }
|
||||
width: calc(16.666% - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc(16.666% - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-9 {
|
||||
width: calc((100% / 8) - 32px);
|
||||
min-width: calc((100% / 8) - 32px); }
|
||||
width: calc((100% / 8) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 8) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-8 {
|
||||
width: calc((100% / 7) - 32px);
|
||||
min-width: calc((100% / 7) - 32px); }
|
||||
width: calc((100% / 7) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 7) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-7 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px); }
|
||||
width: calc((100% / 6) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-6 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px); }
|
||||
width: calc((100% / 5) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-5 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px); }
|
||||
width: calc((100% / 4) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-4 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px); }
|
||||
width: calc((100% / 3) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-3 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px); }
|
||||
width: calc((100% / 2) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-2, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px); } }
|
||||
width: calc(100% - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc(100% - var(--spaceBetweenItems, 32px) ); } }
|
||||
@media only screen and (max-width: 1452px) {
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
|
||||
width: calc(20% - 32px);
|
||||
min-width: calc(20% - 32px); }
|
||||
width: calc(20% - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc(20% - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-9 {
|
||||
width: calc((100% / 7) - 32px);
|
||||
min-width: calc((100% / 7) - 32px); }
|
||||
width: calc((100% / 7) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 7) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-8 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px); }
|
||||
width: calc((100% / 6) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-7 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px); }
|
||||
width: calc((100% / 5) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-6 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px); }
|
||||
width: calc((100% / 4) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-5 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px); }
|
||||
width: calc((100% / 3) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-4 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px); }
|
||||
width: calc((100% / 2) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-3, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-2, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px); } }
|
||||
width: calc(100% - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc(100% - var(--spaceBetweenItems, 32px) ); } }
|
||||
@media only screen and (max-width: 1118px) {
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
|
||||
width: calc(25% - 32px);
|
||||
min-width: calc(25% - 32px); }
|
||||
width: calc(25% - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc(25% - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-9 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px); }
|
||||
width: calc((100% / 6) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-8 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px); }
|
||||
width: calc((100% / 5) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-7 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px); }
|
||||
width: calc((100% / 4) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-6 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px); }
|
||||
width: calc((100% / 3) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-5 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px); }
|
||||
width: calc((100% / 2) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-4, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-3, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-2, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px); } }
|
||||
width: calc(100% - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc(100% - var(--spaceBetweenItems, 32px) ); } }
|
||||
@media only screen and (max-width: 854px) {
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
|
||||
width: calc(33.333% - 32px);
|
||||
min-width: calc(33.333% - 32px); }
|
||||
width: calc(33.333% - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc(33.333% - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-9 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px); }
|
||||
width: calc((100% / 5) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-8 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px); }
|
||||
width: calc((100% / 4) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-7 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px); }
|
||||
width: calc((100% / 3) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-6 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px); }
|
||||
width: calc((100% / 2) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-5, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-4, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-3, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-2, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px); } }
|
||||
width: calc(100% - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc(100% - var(--spaceBetweenItems, 32px) ); } }
|
||||
@media only screen and (max-width: 584px) {
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
|
||||
width: calc(50% - 32px);
|
||||
min-width: calc(50% - 32px); }
|
||||
width: calc(50% - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc(50% - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-9 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px); }
|
||||
width: calc((100% / 4) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-8 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px); }
|
||||
width: calc((100% / 3) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-7 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px); }
|
||||
width: calc((100% / 2) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenItems, 32px) ); }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-6, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-5, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-4, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-3, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-2, .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.max-itens-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px); } }
|
||||
width: calc(100% - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc(100% - var(--spaceBetweenItems, 32px) ); } }
|
||||
|
||||
.block-editor-block-list__block > .wp-block-tainacan-carousel-items-list {
|
||||
max-width: calc(100% - 72px); }
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -195,7 +195,8 @@
|
|||
.wp-block-tainacan-carousel-terms-list .terms-list-edit-container .skeleton,
|
||||
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .skeleton {
|
||||
min-height: 150px;
|
||||
max-height: 260px; }
|
||||
max-height: 260px;
|
||||
width: auto !important; }
|
||||
.wp-block-tainacan-carousel-terms-list .terms-list-edit-container.has-arrows-none .swiper-button-prev, .wp-block-tainacan-carousel-terms-list .terms-list-edit-container.has-arrows-none .swiper-button-next,
|
||||
.wp-block-tainacan-carousel-terms-list .tainacan-carousel.has-arrows-none .swiper-button-prev,
|
||||
.wp-block-tainacan-carousel-terms-list .tainacan-carousel.has-arrows-none .swiper-button-next {
|
||||
|
@ -243,15 +244,15 @@
|
|||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 8px 32px 8px 0px;
|
||||
width: calc(16.666% - 32px);
|
||||
min-width: calc(16.666% - 32px);
|
||||
margin: 8px var(--spaceBetweenTerms, 32px) 8px 0px;
|
||||
width: calc(16.666% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(16.666% - var(--spaceBetweenTerms, 32px));
|
||||
scroll-snap-align: start;
|
||||
scroll-margin: 0 16px; }
|
||||
scroll-margin: 0 calc(var(--spaceBetweenTerms, 32px) / 2); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item.term-list-item-grid {
|
||||
margin: 16px;
|
||||
width: calc(25% - 16px);
|
||||
min-width: calc(25% - 16px); }
|
||||
margin: calc(var(--spaceBetweenTerms, 32px) / 2);
|
||||
width: calc(25% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(25% - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item a {
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
|
@ -303,32 +304,32 @@
|
|||
background-color: white !important;
|
||||
border: 1px solid var(--tainacan-block-gray3, #cbcbcb) !important; }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item.max-terms-per-screen-9 {
|
||||
width: calc((100% / 9) - 32px);
|
||||
min-width: calc((100% / 9) - 32px); }
|
||||
width: calc((100% / 9) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 9) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item.max-terms-per-screen-8 {
|
||||
width: calc((100% / 8) - 32px);
|
||||
min-width: calc((100% / 8) - 32px); }
|
||||
width: calc((100% / 8) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 8) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item.max-terms-per-screen-7 {
|
||||
width: calc((100% / 7) - 32px);
|
||||
min-width: calc((100% / 7) - 32px); }
|
||||
width: calc((100% / 7) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 7) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item.max-terms-per-screen-6 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px); }
|
||||
width: calc((100% / 6) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item.max-terms-per-screen-5 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px); }
|
||||
width: calc((100% / 5) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item.max-terms-per-screen-4 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px); }
|
||||
width: calc((100% / 4) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item.max-terms-per-screen-3 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px); }
|
||||
width: calc((100% / 3) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item.max-terms-per-screen-2 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px); }
|
||||
width: calc((100% / 2) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item.max-terms-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px); }
|
||||
width: calc(100% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item .term-items-grid {
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
|
@ -352,114 +353,114 @@
|
|||
object-fit: cover;
|
||||
object-position: center; }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item {
|
||||
width: calc(20% - 32px);
|
||||
min-width: calc(20% - 32px); }
|
||||
width: calc(20% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(20% - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-9 {
|
||||
width: calc((100% / 8) - 32px);
|
||||
min-width: calc((100% / 8) - 32px); }
|
||||
width: calc((100% / 8) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 8) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-8 {
|
||||
width: calc((100% / 7) - 32px);
|
||||
min-width: calc((100% / 7) - 32px); }
|
||||
width: calc((100% / 7) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 7) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-7 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px); }
|
||||
width: calc((100% / 6) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-6 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px); }
|
||||
width: calc((100% / 5) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-5 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px); }
|
||||
width: calc((100% / 4) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-4 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px); }
|
||||
width: calc((100% / 3) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-3 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px); }
|
||||
width: calc((100% / 2) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-2, .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px); }
|
||||
width: calc(100% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenTerms, 32px)); }
|
||||
@media only screen and (max-width: 1452px) {
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item {
|
||||
width: calc(25% - 32px);
|
||||
min-width: calc(25% - 32px); }
|
||||
width: calc(25% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(25% - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-9 {
|
||||
width: calc((100% / 7) - 32px);
|
||||
min-width: calc((100% / 7) - 32px); }
|
||||
width: calc((100% / 7) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 7) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-8 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px); }
|
||||
width: calc((100% / 6) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-7 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px); }
|
||||
width: calc((100% / 5) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-6 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px); }
|
||||
width: calc((100% / 4) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-5 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px); }
|
||||
width: calc((100% / 3) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-4 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px); }
|
||||
width: calc((100% / 2) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-3, .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-2, .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px); } }
|
||||
width: calc(100% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenTerms, 32px)); } }
|
||||
@media only screen and (max-width: 1118px) {
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item {
|
||||
width: calc(33.333% - 32px);
|
||||
min-width: calc(33.333% - 32px); }
|
||||
width: calc(33.333% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(33.333% - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-9 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px); }
|
||||
width: calc((100% / 6) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-8 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px); }
|
||||
width: calc((100% / 5) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-7 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px); }
|
||||
width: calc((100% / 4) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-6 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px); }
|
||||
width: calc((100% / 3) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-5 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px); }
|
||||
width: calc((100% / 2) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-4, .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-3, .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-2, .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px); } }
|
||||
width: calc(100% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenTerms, 32px)); } }
|
||||
@media only screen and (max-width: 854px) {
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item {
|
||||
width: calc(50% - 32px);
|
||||
min-width: calc(50% - 32px); }
|
||||
width: calc(50% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(50% - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-9 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px); }
|
||||
width: calc((100% / 5) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-8 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px); }
|
||||
width: calc((100% / 4) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-7 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px); }
|
||||
width: calc((100% / 3) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-6 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px); }
|
||||
width: calc((100% / 2) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-5, .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-4, .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-3, .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-2, .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px); } }
|
||||
width: calc(100% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenTerms, 32px)); } }
|
||||
@media only screen and (max-width: 584px) {
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px); }
|
||||
width: calc(100% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-9 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px); }
|
||||
width: calc((100% / 4) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-8 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px); }
|
||||
width: calc((100% / 3) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-7 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px); }
|
||||
width: calc((100% / 2) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenTerms, 32px)); }
|
||||
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-6, .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-5, .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-4, .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-3, .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-2, .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.terms-list-item.max-terms-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px); } }
|
||||
width: calc(100% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenTerms, 32px)); } }
|
||||
|
||||
.block-editor-block-list__block > .wp-block-tainacan-carousel-terms-list {
|
||||
max-width: calc(100% - 72px); }
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -55,6 +55,10 @@
|
|||
"type": "Number",
|
||||
"value": 6
|
||||
},
|
||||
"spaceBetweenCollections": {
|
||||
"type": "Number",
|
||||
"value": 32
|
||||
},
|
||||
"isLoading": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
|
|
|
@ -23,6 +23,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
|
|||
arrowsStyle,
|
||||
cropImagesToSquare,
|
||||
maxCollectionsPerScreen,
|
||||
spaceBetweenCollections,
|
||||
isLoading,
|
||||
arrowsPosition,
|
||||
autoPlay,
|
||||
|
@ -277,6 +278,16 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
|
|||
}
|
||||
/>
|
||||
: null }
|
||||
<RangeControl
|
||||
label={ __('Space between each collection', 'tainacan') }
|
||||
value={ !isNaN(spaceBetweenCollections) ? spaceBetweenCollections : 32 }
|
||||
onChange={ ( aSpaceBetweenCollections ) => {
|
||||
spaceBetweenCollections = aSpaceBetweenCollections;
|
||||
setAttributes( { spaceBetweenCollections: aSpaceBetweenCollections } );
|
||||
}}
|
||||
min={ 0 }
|
||||
max={ 98 }
|
||||
/>
|
||||
<ToggleControl
|
||||
label={__('Hide name', 'tainacan')}
|
||||
help={ !hideName ? __('Toggle to hide collection\'s name', 'tainacan') : __('Do not hide collection\'s name', 'tainacan')}
|
||||
|
@ -421,7 +432,8 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
|
|||
}
|
||||
{ collections.length ? (
|
||||
<div
|
||||
className={'collections-list-edit-container ' + (arrowsPosition ? 'has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') }>
|
||||
className={'collections-list-edit-container ' + (arrowsPosition ? 'has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') }
|
||||
style={{ '--spaceBetweenCollections': !isNaN(spaceBetweenCollections) ? (spaceBetweenCollections + 'px') : '32px' }}>
|
||||
<button
|
||||
class="swiper-button-prev"
|
||||
slot="button-prev"
|
||||
|
|
|
@ -11,6 +11,7 @@ export default function ({ attributes, className }) {
|
|||
cropImagesToSquare,
|
||||
maxCollectionsPerScreen,
|
||||
maxCollectionsNumber,
|
||||
spaceBetweenCollections,
|
||||
autoPlay,
|
||||
autoPlaySpeed,
|
||||
loopSlides,
|
||||
|
@ -34,6 +35,7 @@ export default function ({ attributes, className }) {
|
|||
crop-images-to-square={ '' + cropImagesToSquare }
|
||||
max-collections-number={ maxCollectionsNumber }
|
||||
max-collections-per-screen={ maxCollectionsPerScreen }
|
||||
space-between-collections={ spaceBetweenCollections }
|
||||
tainacan-api-root={ tainacan_blocks.root }
|
||||
tainacan-base-url={ tainacan_blocks.base_url }
|
||||
show-collection-thumbnail={ '' + showCollectionThumbnail }
|
||||
|
|
|
@ -290,16 +290,16 @@
|
|||
li.collection-list-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 8px 32px 8px 0px;
|
||||
width: calc(16.666% - 32px);
|
||||
min-width: calc(16.666% - 32px);
|
||||
margin: 8px var(--spaceBetweenCollections, 32px) 8px 0px;
|
||||
width: calc(16.666% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(16.666% - var(--spaceBetweenCollections, 32px));
|
||||
scroll-snap-align: start;
|
||||
scroll-margin: 0 16px;
|
||||
scroll-margin: 0 calc(var(--spaceBetweenCollections, 32px) / 2);
|
||||
|
||||
&.collection-list-item-grid {
|
||||
margin: 16px;
|
||||
width: calc(25% - 16px);
|
||||
min-width: calc(25% - 16px);
|
||||
margin: calc(var(--spaceBetweenCollections, 32px) / 2);
|
||||
width: calc(25% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(25% - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
|
||||
a {
|
||||
|
@ -366,40 +366,40 @@
|
|||
}
|
||||
|
||||
&.max-collections-per-screen-9 {
|
||||
width: calc((100% / 9) - 32px);
|
||||
min-width: calc((100% / 9) - 32px);
|
||||
width: calc((100% / 9) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 9) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-8 {
|
||||
width: calc((100% / 8) - 32px);
|
||||
min-width: calc((100% / 8) - 32px);
|
||||
width: calc((100% / 8) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 8) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-7 {
|
||||
width: calc((100% / 7) - 32px);
|
||||
min-width: calc((100% / 7) - 32px);
|
||||
width: calc((100% / 7) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 7) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-6 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px);
|
||||
width: calc((100% / 6) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-5 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px);
|
||||
width: calc((100% / 5) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-4 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
width: calc((100% / 4) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-3 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
width: calc((100% / 3) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-2 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
width: calc((100% / 2) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
width: calc(100% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
|
||||
.collection-items-grid {
|
||||
|
@ -426,166 +426,166 @@
|
|||
@media only screen and (max-width: 1686px) {
|
||||
|
||||
ul.collections-list-edit li.collection-list-item {
|
||||
width: calc(20% - 32px);
|
||||
min-width: calc(20% - 32px);
|
||||
width: calc(20% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(20% - var(--spaceBetweenCollections, 32px));
|
||||
|
||||
&.max-collections-per-screen-9 {
|
||||
width: calc((100% / 8) - 32px);
|
||||
min-width: calc((100% / 8) - 32px);
|
||||
width: calc((100% / 8) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 8) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-8 {
|
||||
width: calc((100% / 7) - 32px);
|
||||
min-width: calc((100% / 7) - 32px);
|
||||
width: calc((100% / 7) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 7) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-7 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px);
|
||||
width: calc((100% / 6) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-6 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px);
|
||||
width: calc((100% / 5) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-5 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
width: calc((100% / 4) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-4 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
width: calc((100% / 3) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-3 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
width: calc((100% / 2) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-2,
|
||||
&.max-collections-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
width: calc(100% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1452px) {
|
||||
|
||||
ul.collections-list-edit li.collection-list-item {
|
||||
width: calc(25% - 32px);
|
||||
min-width: calc(25% - 32px);
|
||||
width: calc(25% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(25% - var(--spaceBetweenCollections, 32px));
|
||||
|
||||
&.max-collections-per-screen-9 {
|
||||
width: calc((100% / 7) - 32px);
|
||||
min-width: calc((100% / 7) - 32px);
|
||||
width: calc((100% / 7) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 7) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-8 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px);
|
||||
width: calc((100% / 6) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-7 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px);
|
||||
width: calc((100% / 5) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-6 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
width: calc((100% / 4) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-5 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
width: calc((100% / 3) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-4 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
width: calc((100% / 2) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-3,
|
||||
&.max-collections-per-screen-2,
|
||||
&.max-collections-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
width: calc(100% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1118px) {
|
||||
|
||||
ul.collections-list-edit li.collection-list-item {
|
||||
width: calc(33.333% - 32px);
|
||||
min-width: calc(33.333% - 32px);
|
||||
width: calc(33.333% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(33.333% - var(--spaceBetweenCollections, 32px));
|
||||
|
||||
&.max-collections-per-screen-9 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px);
|
||||
width: calc((100% / 6) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-8 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px);
|
||||
width: calc((100% / 5) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-7 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
width: calc((100% / 4) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-6 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
width: calc((100% / 3) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-5 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
width: calc((100% / 2) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-4,
|
||||
&.max-collections-per-screen-3,
|
||||
&.max-collections-per-screen-2,
|
||||
&.max-collections-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
width: calc(100% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 854px) {
|
||||
|
||||
ul.collections-list-edit li.collection-list-item {
|
||||
width: calc(50% - 32px);
|
||||
min-width: calc(50% - 32px);
|
||||
width: calc(50% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(50% - var(--spaceBetweenCollections, 32px));
|
||||
|
||||
&.max-collections-per-screen-9 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px);
|
||||
width: calc((100% / 5) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-8 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
width: calc((100% / 4) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-7 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
width: calc((100% / 3) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-6 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
width: calc((100% / 2) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-5,
|
||||
&.max-collections-per-screen-4,
|
||||
&.max-collections-per-screen-3,
|
||||
&.max-collections-per-screen-2,
|
||||
&.max-collections-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
width: calc(100% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 584px) {
|
||||
|
||||
ul.collections-list-edit li.collection-list-item {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
width: calc(100% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenCollections, 32px));
|
||||
|
||||
&.max-collections-per-screen-9 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
width: calc((100% / 4) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-8 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
width: calc((100% / 3) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-7 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
width: calc((100% / 2) - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
&.max-collections-per-screen-6,
|
||||
&.max-collections-per-screen-5,
|
||||
|
@ -593,8 +593,8 @@
|
|||
&.max-collections-per-screen-3,
|
||||
&.max-collections-per-screen-2,
|
||||
&.max-collections-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
width: calc(100% - var(--spaceBetweenCollections, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenCollections, 32px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -34,6 +34,7 @@ export default (element) => {
|
|||
largeArrows: false,
|
||||
arrowsStyle: 'type-1',
|
||||
maxCollectionsPerScreen: 6,
|
||||
spaceBetweenCollections: 32,
|
||||
cropImagesToSquare: true,
|
||||
loopSlides: false,
|
||||
hideName: true,
|
||||
|
@ -57,6 +58,7 @@ export default (element) => {
|
|||
arrowsStyle: this.arrowsStyle,
|
||||
cropImagesToSquare: this.cropImagesToSquare,
|
||||
maxCollectionsPerScreen: this.maxCollectionsPerScreen,
|
||||
spaceBetweenCollections: this.spaceBetweenCollections,
|
||||
hideName: this.hideName,
|
||||
showCollectionThumbnail: this.showCollectionThumbnail,
|
||||
tainacanApiRoot: this.tainacanApiRoot,
|
||||
|
@ -71,6 +73,7 @@ export default (element) => {
|
|||
this.selectedCollections = this.$el.attributes['selected-collections'] != undefined ? JSON.parse(this.$el.attributes['selected-collections'].value) : undefined;
|
||||
this.maxItemsNumber = this.$el.attributes['max-collections-number'] != undefined ? this.$el.attributes['max-collections-number'].value : undefined;
|
||||
this.maxCollectionsPerScreen = this.$el.attributes['max-collections-per-screen'] != undefined ? this.$el.attributes['max-collections-per-screen'].value : 6;
|
||||
this.spaceBetweenCollections = this.$el.attributes['space-between-collections'] != undefined ? this.$el.attributes['space-between-collections'].value : 32;
|
||||
this.arrowsPosition = this.$el.attributes['arrows-position'] != undefined ? this.$el.attributes['arrows-position'].value : undefined;
|
||||
this.autoPlay = this.$el.attributes['auto-play'] != undefined ? this.$el.attributes['auto-play'].value == 'true' : false;
|
||||
this.largeArrows = this.$el.attributes['large-arrows'] != undefined ? this.$el.attributes['large-arrows'].value == 'true' : false;
|
||||
|
|
|
@ -133,17 +133,17 @@
|
|||
</div>
|
||||
<!-- Swiper buttons are hidden as they actually swipe from slide to slide -->
|
||||
</div>
|
||||
<div v-else-if="isLoading && !autoPlay && !loopSlides">
|
||||
<div v-else>
|
||||
<div :class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') ">
|
||||
<swiper
|
||||
role="list"
|
||||
ref="myCollectionSwiper"
|
||||
:options="swiperOptions">
|
||||
:options="{ ...JSON.parse(JSON.stringify(swiperOptions)), autoplay: false, loop: false }">
|
||||
<swiper-slide
|
||||
role="listitem"
|
||||
:key="index"
|
||||
v-for="(collection, index) of 18"
|
||||
class="collection-list-item skeleton">
|
||||
class="collection-list-item skeleton">
|
||||
<a>
|
||||
<img>
|
||||
<span v-if="!hideName" />
|
||||
|
@ -167,7 +167,7 @@
|
|||
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
|
@ -216,6 +216,7 @@ export default {
|
|||
autoPlaySpeed: Number,
|
||||
loopSlides: Boolean,
|
||||
maxCollectionsPerScreen: Number,
|
||||
spaceBetweenCollections: Number,
|
||||
hideName: Boolean,
|
||||
largeArrows: Boolean,
|
||||
arrowsStyle: String,
|
||||
|
@ -249,18 +250,18 @@ export default {
|
|||
allowTouchMove: true,
|
||||
slidesPerView: 1,
|
||||
slidesPerGroup: 1,
|
||||
spaceBetween: this.showCollectionThumbnail ? 32 : 16,
|
||||
spaceBetween: this.spaceBetweenCollections,
|
||||
slideToClickedSlide: true,
|
||||
navigation: {
|
||||
nextEl: '#' + this.blockId + '-next',
|
||||
prevEl: '#' + this.blockId + '-prev',
|
||||
},
|
||||
breakpoints: {
|
||||
498: { slidesPerView: this.showCollectionThumbnail ? 1 : 1 },
|
||||
768: { slidesPerView: this.showCollectionThumbnail ? 2 : 1 },
|
||||
1024: { slidesPerView: this.showCollectionThumbnail ? 3 : 2 },
|
||||
1366: { slidesPerView: this.showCollectionThumbnail ? 4 : 3 },
|
||||
1600: { slidesPerView: this.showCollectionThumbnail ? 5 : 4 },
|
||||
498: { slidesPerView: this.showCollectionThumbnail ? 1 : 1, spaceBetween: this.spaceBetweenCollections },
|
||||
768: { slidesPerView: this.showCollectionThumbnail ? 2 : 1, spaceBetween: this.spaceBetweenCollections },
|
||||
1024: { slidesPerView: this.showCollectionThumbnail ? 3 : 2, spaceBetween: this.spaceBetweenCollections },
|
||||
1366: { slidesPerView: this.showCollectionThumbnail ? 4 : 3, spaceBetween: this.spaceBetweenCollections },
|
||||
1600: { slidesPerView: this.showCollectionThumbnail ? 5 : 4, spaceBetween: this.spaceBetweenCollections },
|
||||
},
|
||||
autoplay: this.autoPlay ? { delay: this.autoPlaySpeed*1000 } : false,
|
||||
loop: this.loopSlides
|
||||
|
@ -277,18 +278,17 @@ export default {
|
|||
|
||||
if (!isNaN(this.maxCollectionsPerScreen)) {
|
||||
this.swiperOptions.breakpoints = {
|
||||
498: { slidesPerView: this.maxCollectionsPerScreen - 4 > 0 ? this.maxCollectionsPerScreen - 4 : 1 },
|
||||
768: { slidesPerView: this.maxCollectionsPerScreen - 3 > 0 ? this.maxCollectionsPerScreen - 3 : 1 },
|
||||
1024: { slidesPerView: this.maxCollectionsPerScreen - 2 > 0 ? this.maxCollectionsPerScreen - 2 : 1 },
|
||||
1366: { slidesPerView: this.maxCollectionsPerScreen - 1 > 0 ? this.maxCollectionsPerScreen - 1 : 1 },
|
||||
1600: { slidesPerView: this.maxCollectionsPerScreen > 0 ? this.maxCollectionsPerScreen : 1 },
|
||||
498: { slidesPerView: this.maxCollectionsPerScreen - 4 > 0 ? this.maxCollectionsPerScreen - 4 : 1, spaceBetween: this.spaceBetweenCollections },
|
||||
768: { slidesPerView: this.maxCollectionsPerScreen - 3 > 0 ? this.maxCollectionsPerScreen - 3 : 1, spaceBetween: this.spaceBetweenCollections },
|
||||
1024: { slidesPerView: this.maxCollectionsPerScreen - 2 > 0 ? this.maxCollectionsPerScreen - 2 : 1, spaceBetween: this.spaceBetweenCollections },
|
||||
1366: { slidesPerView: this.maxCollectionsPerScreen - 1 > 0 ? this.maxCollectionsPerScreen - 1 : 1, spaceBetween: this.spaceBetweenCollections },
|
||||
1600: { slidesPerView: this.maxCollectionsPerScreen > 0 ? this.maxCollectionsPerScreen : 1, spaceBetween: this.spaceBetweenCollections },
|
||||
}
|
||||
this.swiperOptions.slidesPerView = 1;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchCollections() {
|
||||
|
||||
this.isLoading = true;
|
||||
this.errorMessage = 'No collections found.';
|
||||
|
||||
|
@ -314,7 +314,7 @@ export default {
|
|||
this.tainacanAxios.get('/collection/' + collection.id + '/items?perpage=3&fetch_only=name,url,thumbnail')
|
||||
.then(response => { return({ collectionId: collection.id, collectionItems: response.data.items }) })
|
||||
);
|
||||
this.collections.push(collection);
|
||||
this.collections.push(collection);
|
||||
}
|
||||
axios.all(promises).then((results) => {
|
||||
for (let result of results) {
|
||||
|
|
|
@ -49,6 +49,10 @@
|
|||
"type": "Number",
|
||||
"value": 7
|
||||
},
|
||||
"spaceBetweenItems": {
|
||||
"type": "Number",
|
||||
"value": 32
|
||||
},
|
||||
"isLoading": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
|
|
|
@ -22,6 +22,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
itemsRequestSource,
|
||||
maxItemsNumber,
|
||||
maxItemsPerScreen,
|
||||
spaceBetweenItems,
|
||||
selectedItems,
|
||||
isLoading,
|
||||
loadStrategy,
|
||||
|
@ -382,6 +383,16 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
}
|
||||
}
|
||||
/>
|
||||
<RangeControl
|
||||
label={ __('Space between each item', 'tainacan') }
|
||||
value={ !isNaN(spaceBetweenItems) ? spaceBetweenItems : 32 }
|
||||
onChange={ ( aSpaceBetweenItems ) => {
|
||||
spaceBetweenItems = aSpaceBetweenItems;
|
||||
setAttributes( { spaceBetweenItems: aSpaceBetweenItems } );
|
||||
}}
|
||||
min={ 0 }
|
||||
max={ 98 }
|
||||
/>
|
||||
<ToggleControl
|
||||
label={__('Hide title', 'tainacan')}
|
||||
help={ !hideTitle ? __('Toggle to hide item\'s title', 'tainacan') : __('Do not hide item\'s title', 'tainacan')}
|
||||
|
@ -461,7 +472,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</PanelBody>
|
||||
|
||||
{ loadStrategy == 'search' ?
|
||||
|
@ -481,7 +492,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
min={ 1 }
|
||||
max={ 96 }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</PanelBody>
|
||||
:null
|
||||
}
|
||||
|
@ -640,7 +651,8 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
{ items.length ? (
|
||||
|
||||
<div
|
||||
className={'items-list-edit-container ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') }>
|
||||
className={'items-list-edit-container ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') }
|
||||
style={{ '--spaceBetweenItems': !isNaN(spaceBetweenItems) ? (spaceBetweenItems + 'px') : '32px' }}>
|
||||
<button
|
||||
class="swiper-button-prev"
|
||||
slot="button-prev"
|
||||
|
|
|
@ -13,6 +13,7 @@ export default function ({ attributes, className }) {
|
|||
loadStrategy,
|
||||
maxItemsNumber,
|
||||
maxItemsPerScreen,
|
||||
spaceBetweenItems,
|
||||
autoPlay,
|
||||
autoPlaySpeed,
|
||||
loopSlides,
|
||||
|
@ -47,6 +48,7 @@ export default function ({ attributes, className }) {
|
|||
collection-text-color={ collectionTextColor }
|
||||
max-items-number={ maxItemsNumber }
|
||||
max-items-per-screen={ maxItemsPerScreen }
|
||||
space-between-items={ spaceBetweenItems }
|
||||
tainacan-api-root={ tainacan_blocks.root }
|
||||
tainacan-base-url={ tainacan_blocks.base_url }
|
||||
id={ 'wp-block-tainacan-carousel-items-list_' + blockId }>
|
||||
|
|
|
@ -274,11 +274,11 @@
|
|||
li.item-list-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 8px 16px;
|
||||
width: calc(14.285% - 32px);
|
||||
min-width: calc(14.285% - 32px);
|
||||
margin: 8px var(--spaceBetweenItems, 32px) 8px 0px;
|
||||
width: calc(14.285% - var(--spaceBetweenItems, var(--spaceBetweenItems, 32px) ) );
|
||||
min-width: calc(14.285% - var(--spaceBetweenItems, var(--spaceBetweenItems, 32px) ) );
|
||||
scroll-snap-align: start;
|
||||
scroll-margin: 0 16px;
|
||||
scroll-margin: 0 calc(var(--spaceBetweenItems, 32px) / 2 );
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
@ -356,206 +356,206 @@
|
|||
}
|
||||
|
||||
&.max-itens-per-screen-9 {
|
||||
width: calc((100% / 9) - 32px);
|
||||
min-width: calc((100% / 9) - 32px);
|
||||
width: calc((100% / 9) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 9) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-8 {
|
||||
width: calc((100% / 8) - 32px);
|
||||
min-width: calc((100% / 8) - 32px);
|
||||
width: calc((100% / 8) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 8) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-7 {
|
||||
width: calc((100% / 7) - 32px);
|
||||
min-width: calc((100% / 7) - 32px);
|
||||
width: calc((100% / 7) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 7) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-6 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px);
|
||||
width: calc((100% / 6) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-5 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px);
|
||||
width: calc((100% / 5) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-4 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
width: calc((100% / 4) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-3 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
width: calc((100% / 3) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-2 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
width: calc((100% / 2) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
width: calc(100% - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc(100% - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1686px) {
|
||||
|
||||
ul.items-list-edit li.item-list-item {
|
||||
width: calc(16.666% - 32px);
|
||||
min-width: calc(16.666% - 32px);
|
||||
width: calc(16.666% - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc(16.666% - var(--spaceBetweenItems, 32px) );
|
||||
|
||||
&.max-itens-per-screen-9 {
|
||||
width: calc((100% / 8) - 32px);
|
||||
min-width: calc((100% / 8) - 32px);
|
||||
width: calc((100% / 8) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 8) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-8 {
|
||||
width: calc((100% / 7) - 32px);
|
||||
min-width: calc((100% / 7) - 32px);
|
||||
width: calc((100% / 7) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 7) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-7 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px);
|
||||
width: calc((100% / 6) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-6 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px);
|
||||
width: calc((100% / 5) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-5 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
width: calc((100% / 4) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-4 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
width: calc((100% / 3) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-3 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
width: calc((100% / 2) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-2,
|
||||
&.max-itens-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
width: calc(100% - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc(100% - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1452px) {
|
||||
|
||||
ul.items-list-edit li.item-list-item {
|
||||
width: calc(20% - 32px);
|
||||
min-width: calc(20% - 32px);
|
||||
width: calc(20% - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc(20% - var(--spaceBetweenItems, 32px) );
|
||||
|
||||
&.max-itens-per-screen-9 {
|
||||
width: calc((100% / 7) - 32px);
|
||||
min-width: calc((100% / 7) - 32px);
|
||||
width: calc((100% / 7) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 7) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-8 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px);
|
||||
width: calc((100% / 6) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-7 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px);
|
||||
width: calc((100% / 5) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-6 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
width: calc((100% / 4) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-5 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
width: calc((100% / 3) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-4 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
width: calc((100% / 2) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-3,
|
||||
&.max-itens-per-screen-2,
|
||||
&.max-itens-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
width: calc(100% - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc(100% - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1118px) {
|
||||
|
||||
ul.items-list-edit li.item-list-item {
|
||||
width: calc(25% - 32px);
|
||||
min-width: calc(25% - 32px);
|
||||
width: calc(25% - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc(25% - var(--spaceBetweenItems, 32px) );
|
||||
|
||||
&.max-itens-per-screen-9 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px);
|
||||
width: calc((100% / 6) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-8 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px);
|
||||
width: calc((100% / 5) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-7 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
width: calc((100% / 4) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-6 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
width: calc((100% / 3) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-5 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
width: calc((100% / 2) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-4,
|
||||
&.max-itens-per-screen-3,
|
||||
&.max-itens-per-screen-2,
|
||||
&.max-itens-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
width: calc(100% - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc(100% - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 854px) {
|
||||
|
||||
ul.items-list-edit li.item-list-item {
|
||||
width: calc(33.333% - 32px);
|
||||
min-width: calc(33.333% - 32px);
|
||||
width: calc(33.333% - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc(33.333% - var(--spaceBetweenItems, 32px) );
|
||||
|
||||
&.max-itens-per-screen-9 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px);
|
||||
width: calc((100% / 5) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-8 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
width: calc((100% / 4) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-7 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
width: calc((100% / 3) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-6 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
width: calc((100% / 2) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-5,
|
||||
&.max-itens-per-screen-4,
|
||||
&.max-itens-per-screen-3,
|
||||
&.max-itens-per-screen-2,
|
||||
&.max-itens-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
width: calc(100% - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc(100% - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 584px) {
|
||||
|
||||
ul.items-list-edit li.item-list-item {
|
||||
width: calc(50% - 32px);
|
||||
min-width: calc(50% - 32px);
|
||||
width: calc(50% - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc(50% - var(--spaceBetweenItems, 32px) );
|
||||
|
||||
&.max-itens-per-screen-9 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
width: calc((100% / 4) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-8 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
width: calc((100% / 3) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-7 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
width: calc((100% / 2) - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
&.max-itens-per-screen-6,
|
||||
&.max-itens-per-screen-5,
|
||||
|
@ -563,8 +563,8 @@
|
|||
&.max-itens-per-screen-3,
|
||||
&.max-itens-per-screen-2,
|
||||
&.max-itens-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
width: calc(100% - var(--spaceBetweenItems, 32px) );
|
||||
min-width: calc(100% - var(--spaceBetweenItems, 32px) );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -32,6 +32,7 @@ export default (element) => {
|
|||
loadStrategy: 'search',
|
||||
maxItemsNumber: 12,
|
||||
maxItemsPerScreen: 7,
|
||||
spaceBetweenItems: 32,
|
||||
arrowsPosition: 'around',
|
||||
largeArrows: false,
|
||||
arrowsStyle: 'type-1',
|
||||
|
@ -59,6 +60,7 @@ export default (element) => {
|
|||
loadStrategy: this.loadStrategy,
|
||||
maxItemsNumber: this.maxItemsNumber,
|
||||
maxItemsPerScreen: this.maxItemsPerScreen,
|
||||
spaceBetweenItems: this.spaceBetweenItems,
|
||||
arrowsPosition: this.arrowsPosition,
|
||||
largeArrows: this.largeArrows,
|
||||
arrowsStyle: this.arrowsStyle,
|
||||
|
@ -86,6 +88,7 @@ export default (element) => {
|
|||
this.collectionId = this.$el.attributes['collection-id'] != undefined ? this.$el.attributes['collection-id'].value : undefined;
|
||||
this.maxItemsNumber = this.$el.attributes['max-items-number'] != undefined ? this.$el.attributes['max-items-number'].value : undefined;
|
||||
this.maxItemsPerScreen = this.$el.attributes['max-items-per-screen'] != undefined ? this.$el.attributes['max-items-per-screen'].value : 7;
|
||||
this.spaceBetweenItems = this.$el.attributes['space-between-items'] != undefined ? this.$el.attributes['space-between-items'].value : 32;
|
||||
this.arrowsPosition = this.$el.attributes['arrows-position'] != undefined ? this.$el.attributes['arrows-position'].value : undefined;
|
||||
this.largeArrows = this.$el.attributes['large-arrows'] != undefined ? this.$el.attributes['large-arrows'].value == 'true' : false;
|
||||
this.arrowsStyle = this.$el.attributes['arrows-style'] != undefined ? this.$el.attributes['arrows-style'].value : undefined;
|
||||
|
|
|
@ -130,11 +130,11 @@
|
|||
</div>
|
||||
<!-- Swiper buttons are hidden as they actually swipe from slide to slide -->
|
||||
</div>
|
||||
<div v-else-if="isLoading && !autoPlay && !loopSlides">
|
||||
<div v-else>
|
||||
<div :class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') ">
|
||||
<swiper
|
||||
role="list"
|
||||
:options="swiperOptions"
|
||||
:options="{ ...JSON.parse(JSON.stringify(swiperOptions)), autoplay: false, loop: false }"
|
||||
ref="myItemSwiperSkeleton"
|
||||
:style="{
|
||||
marginTop: showCollectionHeader ? '1.35em' : '0px'
|
||||
|
@ -216,6 +216,7 @@ export default {
|
|||
loadStrategy: String,
|
||||
maxItemsNumber: Number,
|
||||
maxItemsPerScreen: Number,
|
||||
spaceBetweenItems: Number,
|
||||
arrowsPosition: String,
|
||||
largeArrows: Boolean,
|
||||
arrowsStyle: String,
|
||||
|
@ -256,18 +257,18 @@ export default {
|
|||
allowTouchMove: true,
|
||||
slidesPerView: 1,
|
||||
slidesPerGroup: 1,
|
||||
spaceBetween: 32,
|
||||
spaceBetween: this.spaceBetweenItems,
|
||||
slideToClickedSlide: true,
|
||||
navigation: {
|
||||
nextEl: '#' + this.blockId + '-next',
|
||||
prevEl: '#' + this.blockId + '-prev',
|
||||
},
|
||||
breakpoints: {
|
||||
498: { slidesPerView: 2 },
|
||||
768: { slidesPerView: 3 },
|
||||
1024: { slidesPerView: 4 },
|
||||
1366: { slidesPerView: 5 },
|
||||
1600: { slidesPerView: 6 }
|
||||
498: { slidesPerView: 2, spaceBetween: this.spaceBetweenItems },
|
||||
768: { slidesPerView: 3, spaceBetween: this.spaceBetweenItems },
|
||||
1024: { slidesPerView: 4, spaceBetween: this.spaceBetweenItems },
|
||||
1366: { slidesPerView: 5, spaceBetween: this.spaceBetweenItems },
|
||||
1600: { slidesPerView: 6, spaceBetween: this.spaceBetweenItems }
|
||||
},
|
||||
autoplay: this.autoPlay ? { delay: this.autoPlaySpeed*1000 } : false,
|
||||
loop: this.loopSlides ? this.loopSlides : false
|
||||
|
@ -287,11 +288,11 @@ export default {
|
|||
|
||||
if (!isNaN(this.maxItemsPerScreen) && this.maxItemsPerScreen != 6) {
|
||||
this.swiperOptions.breakpoints = {
|
||||
498: { slidesPerView: this.maxItemsPerScreen - 4 > 0 ? this.maxItemsPerScreen - 4 : 1 },
|
||||
768: { slidesPerView: this.maxItemsPerScreen - 3 > 0 ? this.maxItemsPerScreen - 3 : 1 },
|
||||
1024: { slidesPerView: this.maxItemsPerScreen - 2 > 0 ? this.maxItemsPerScreen - 2 : 1 },
|
||||
1366: { slidesPerView: this.maxItemsPerScreen - 1 > 0 ? this.maxItemsPerScreen - 1 : 1 },
|
||||
1600: { slidesPerView: this.maxItemsPerScreen > 0 ? this.maxItemsPerScreen : 1 },
|
||||
498: { slidesPerView: this.maxItemsPerScreen - 4 > 0 ? this.maxItemsPerScreen - 4 : 1, spaceBetween: this.spaceBetweenItems },
|
||||
768: { slidesPerView: this.maxItemsPerScreen - 3 > 0 ? this.maxItemsPerScreen - 3 : 1, spaceBetween: this.spaceBetweenItems },
|
||||
1024: { slidesPerView: this.maxItemsPerScreen - 2 > 0 ? this.maxItemsPerScreen - 2 : 1, spaceBetween: this.spaceBetweenItems },
|
||||
1366: { slidesPerView: this.maxItemsPerScreen - 1 > 0 ? this.maxItemsPerScreen - 1 : 1, spaceBetween: this.spaceBetweenItems },
|
||||
1600: { slidesPerView: this.maxItemsPerScreen > 0 ? this.maxItemsPerScreen : 1, spaceBetween: this.spaceBetweenItems },
|
||||
}
|
||||
this.swiperOptions.slidesPerView = 1;
|
||||
}
|
||||
|
|
|
@ -41,6 +41,10 @@
|
|||
"type": "Number",
|
||||
"value": 6
|
||||
},
|
||||
"spaceBetweenTerms": {
|
||||
"type": "Number",
|
||||
"value": 32
|
||||
},
|
||||
"isLoading": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
|
|
|
@ -23,6 +23,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
largeArrows,
|
||||
arrowsStyle,
|
||||
maxTermsPerScreen,
|
||||
spaceBetweenTerms,
|
||||
arrowsPosition,
|
||||
autoPlay,
|
||||
autoPlaySpeed,
|
||||
|
@ -250,6 +251,16 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
min={ 1 }
|
||||
max={ 9 }
|
||||
/>
|
||||
<RangeControl
|
||||
label={ __('Space between each term', 'tainacan') }
|
||||
value={ !isNaN(spaceBetweenTerms) ? spaceBetweenTerms : 32 }
|
||||
onChange={ ( aSpaceBetweenTerms ) => {
|
||||
spaceBetweenTerms = aSpaceBetweenTerms;
|
||||
setAttributes( { spaceBetweenTerms: aSpaceBetweenTerms } );
|
||||
}}
|
||||
min={ 0 }
|
||||
max={ 98 }
|
||||
/>
|
||||
<ToggleControl
|
||||
label={__('Hide name', 'tainacan')}
|
||||
help={ !hideName ? __('Toggle to hide term\'s name', 'tainacan') : __('Do not hide term\'s name', 'tainacan')}
|
||||
|
@ -402,7 +413,8 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
}
|
||||
{ terms.length ? (
|
||||
<div
|
||||
className={'terms-list-edit-container ' + (arrowsPosition ? 'has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') }>
|
||||
className={'terms-list-edit-container ' + (arrowsPosition ? 'has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') }
|
||||
style={{ '--spaceBetweenTerms': !isNaN(spaceBetweenTerms) ? (spaceBetweenTerms + 'px') : '32px' }}>
|
||||
<button
|
||||
class="swiper-button-prev"
|
||||
slot="button-prev"
|
||||
|
|
|
@ -10,6 +10,7 @@ export default function({ attributes, className }) {
|
|||
arrowsStyle,
|
||||
maxTermsPerScreen,
|
||||
maxTermsNumber,
|
||||
spaceBetweenTerms,
|
||||
autoPlay,
|
||||
autoPlaySpeed,
|
||||
loopSlides,
|
||||
|
@ -33,6 +34,7 @@ export default function({ attributes, className }) {
|
|||
arrows-style={ arrowsStyle }
|
||||
max-terms-number={ maxTermsNumber }
|
||||
max-terms-per-screen={ maxTermsPerScreen }
|
||||
space-between-terms={ spaceBetweenTerms }
|
||||
taxonomy-id={ taxonomyId }
|
||||
tainacan-api-root={ tainacan_blocks.root }
|
||||
tainacan-base-url={ tainacan_blocks.base_url }
|
||||
|
|
|
@ -235,7 +235,7 @@
|
|||
.tainacan-carousel {
|
||||
position: relative;
|
||||
|
||||
& .skeleton {
|
||||
.skeleton {
|
||||
min-height: 150px;
|
||||
max-height: 260px;
|
||||
}
|
||||
|
@ -289,16 +289,16 @@
|
|||
li.term-list-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 8px 32px 8px 0px;
|
||||
width: calc(16.666% - 32px);
|
||||
min-width: calc(16.666% - 32px);
|
||||
margin: 8px var(--spaceBetweenTerms, 32px) 8px 0px;
|
||||
width: calc(16.666% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(16.666% - var(--spaceBetweenTerms, 32px));
|
||||
scroll-snap-align: start;
|
||||
scroll-margin: 0 16px;
|
||||
scroll-margin: 0 calc(var(--spaceBetweenTerms, 32px) / 2);
|
||||
|
||||
&.term-list-item-grid {
|
||||
margin: 16px;
|
||||
width: calc(25% - 16px);
|
||||
min-width: calc(25% - 16px);
|
||||
margin: calc(var(--spaceBetweenTerms, 32px) / 2);
|
||||
width: calc(25% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(25% - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
|
||||
a {
|
||||
|
@ -365,40 +365,40 @@
|
|||
}
|
||||
|
||||
&.max-terms-per-screen-9 {
|
||||
width: calc((100% / 9) - 32px);
|
||||
min-width: calc((100% / 9) - 32px);
|
||||
width: calc((100% / 9) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 9) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-8 {
|
||||
width: calc((100% / 8) - 32px);
|
||||
min-width: calc((100% / 8) - 32px);
|
||||
width: calc((100% / 8) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 8) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-7 {
|
||||
width: calc((100% / 7) - 32px);
|
||||
min-width: calc((100% / 7) - 32px);
|
||||
width: calc((100% / 7) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 7) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-6 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px);
|
||||
width: calc((100% / 6) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-5 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px);
|
||||
width: calc((100% / 5) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-4 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
width: calc((100% / 4) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-3 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
width: calc((100% / 3) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-2 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
width: calc((100% / 2) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
width: calc(100% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
|
||||
.term-items-grid {
|
||||
|
@ -424,165 +424,165 @@
|
|||
}
|
||||
|
||||
ul.terms-list-edit li.terms-list-item {
|
||||
width: calc(20% - 32px);
|
||||
min-width: calc(20% - 32px);
|
||||
width: calc(20% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(20% - var(--spaceBetweenTerms, 32px));
|
||||
|
||||
&.max-terms-per-screen-9 {
|
||||
width: calc((100% / 8) - 32px);
|
||||
min-width: calc((100% / 8) - 32px);
|
||||
width: calc((100% / 8) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 8) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-8 {
|
||||
width: calc((100% / 7) - 32px);
|
||||
min-width: calc((100% / 7) - 32px);
|
||||
width: calc((100% / 7) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 7) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-7 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px);
|
||||
width: calc((100% / 6) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-6 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px);
|
||||
width: calc((100% / 5) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-5 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
width: calc((100% / 4) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-4 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
width: calc((100% / 3) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-3 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
width: calc((100% / 2) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-2,
|
||||
&.max-terms-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
width: calc(100% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1452px) {
|
||||
|
||||
ul.terms-list-edit li.terms-list-item {
|
||||
width: calc(25% - 32px);
|
||||
min-width: calc(25% - 32px);
|
||||
width: calc(25% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(25% - var(--spaceBetweenTerms, 32px));
|
||||
|
||||
&.max-terms-per-screen-9 {
|
||||
width: calc((100% / 7) - 32px);
|
||||
min-width: calc((100% / 7) - 32px);
|
||||
width: calc((100% / 7) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 7) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-8 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px);
|
||||
width: calc((100% / 6) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-7 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px);
|
||||
width: calc((100% / 5) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-6 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
width: calc((100% / 4) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-5 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
width: calc((100% / 3) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-4 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
width: calc((100% / 2) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-3,
|
||||
&.max-terms-per-screen-2,
|
||||
&.max-terms-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
width: calc(100% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1118px) {
|
||||
|
||||
ul.terms-list-edit li.terms-list-item {
|
||||
width: calc(33.333% - 32px);
|
||||
min-width: calc(33.333% - 32px);
|
||||
width: calc(33.333% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(33.333% - var(--spaceBetweenTerms, 32px));
|
||||
|
||||
&.max-terms-per-screen-9 {
|
||||
width: calc((100% / 6) - 32px);
|
||||
min-width: calc((100% / 6) - 32px);
|
||||
width: calc((100% / 6) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 6) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-8 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px);
|
||||
width: calc((100% / 5) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-7 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
width: calc((100% / 4) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-6 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
width: calc((100% / 3) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-5 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
width: calc((100% / 2) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-4,
|
||||
&.max-terms-per-screen-3,
|
||||
&.max-terms-per-screen-2,
|
||||
&.max-terms-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
width: calc(100% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 854px) {
|
||||
|
||||
ul.terms-list-edit li.terms-list-item {
|
||||
width: calc(50% - 32px);
|
||||
min-width: calc(50% - 32px);
|
||||
width: calc(50% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(50% - var(--spaceBetweenTerms, 32px));
|
||||
|
||||
&.max-terms-per-screen-9 {
|
||||
width: calc((100% / 5) - 32px);
|
||||
min-width: calc((100% / 5) - 32px);
|
||||
width: calc((100% / 5) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 5) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-8 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
width: calc((100% / 4) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-7 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
width: calc((100% / 3) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-6 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
width: calc((100% / 2) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-5,
|
||||
&.max-terms-per-screen-4,
|
||||
&.max-terms-per-screen-3,
|
||||
&.max-terms-per-screen-2,
|
||||
&.max-terms-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
width: calc(100% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 584px) {
|
||||
|
||||
ul.terms-list-edit li.terms-list-item {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
width: calc(100% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenTerms, 32px));
|
||||
|
||||
&.max-terms-per-screen-9 {
|
||||
width: calc((100% / 4) - 32px);
|
||||
min-width: calc((100% / 4) - 32px);
|
||||
width: calc((100% / 4) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 4) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-8 {
|
||||
width: calc((100% / 3) - 32px);
|
||||
min-width: calc((100% / 3) - 32px);
|
||||
width: calc((100% / 3) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 3) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-7 {
|
||||
width: calc((100% / 2) - 32px);
|
||||
min-width: calc((100% / 2) - 32px);
|
||||
width: calc((100% / 2) - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc((100% / 2) - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
&.max-terms-per-screen-6,
|
||||
&.max-terms-per-screen-5,
|
||||
|
@ -590,8 +590,8 @@
|
|||
&.max-terms-per-screen-3,
|
||||
&.max-terms-per-screen-2,
|
||||
&.max-terms-per-screen-1 {
|
||||
width: calc(100% - 32px);
|
||||
min-width: calc(100% - 32px);
|
||||
width: calc(100% - var(--spaceBetweenTerms, 32px));
|
||||
min-width: calc(100% - var(--spaceBetweenTerms, 32px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -34,6 +34,7 @@ export default (element) => {
|
|||
largeArrows: false,
|
||||
arrowsStyle: 'type-1',
|
||||
maxTermsPerScreen: 6,
|
||||
spaceBetweenTerms: 32,
|
||||
loopSlides: false,
|
||||
hideName: true,
|
||||
showTermThumbnail: false,
|
||||
|
@ -56,6 +57,7 @@ export default (element) => {
|
|||
largeArrows: this.largeArrows,
|
||||
arrowsStyle: this.arrowsStyle,
|
||||
maxTermsPerScreen: this.maxTermsPerScreen,
|
||||
spaceBetweenTerms: this.spaceBetweenTerms,
|
||||
hideName: this.hideName,
|
||||
showTermThumbnail: this.showTermThumbnail,
|
||||
tainacanApiRoot: this.tainacanApiRoot,
|
||||
|
@ -74,6 +76,7 @@ export default (element) => {
|
|||
this.arrowsPosition = this.$el.attributes['arrows-position'] != undefined ? this.$el.attributes['arrows-position'].value : undefined;
|
||||
this.autoPlay = this.$el.attributes['auto-play'] != undefined ? this.$el.attributes['auto-play'].value == 'true' : false;
|
||||
this.autoPlaySpeed = this.$el.attributes['auto-play-speed'] != undefined ? this.$el.attributes['auto-play-speed'].value : 3;
|
||||
this.spaceBetweenTerms = this.$el.attributes['space-between-terms'] != undefined ? this.$el.attributes['space-between-terms'].value : 32;
|
||||
this.largeArrows = this.$el.attributes['large-arrows'] != undefined ? this.$el.attributes['large-arrows'].value == 'true' : false;
|
||||
this.arrowsStyle = this.$el.attributes['arrows-style'] != undefined ? this.$el.attributes['arrows-style'].value : undefined;
|
||||
this.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false;
|
||||
|
|
|
@ -108,17 +108,17 @@
|
|||
</div>
|
||||
<!-- Swiper buttons are hidden as they actually swipe from slide to slide -->
|
||||
</div>
|
||||
<div v-else-if="isLoading && !autoPlay && !loopSlides">
|
||||
<div v-else>
|
||||
<div :class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') ">
|
||||
<swiper
|
||||
role="list"
|
||||
ref="myTermSwiper"
|
||||
:options="swiperOptions">
|
||||
:options="{ ...JSON.parse(JSON.stringify(swiperOptions)), autoplay: false, loop: false }">
|
||||
<swiper-slide
|
||||
role="listitem"
|
||||
:key="index"
|
||||
v-for="(term, index) of 18"
|
||||
class="term-list-item skeleton">
|
||||
class="term-list-item skeleton">
|
||||
<a>
|
||||
<img>
|
||||
<span v-if="!hideName" />
|
||||
|
@ -142,7 +142,7 @@
|
|||
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
|
@ -162,7 +162,7 @@
|
|||
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"/>
|
||||
fill="none"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
@ -191,6 +191,7 @@ export default {
|
|||
autoPlaySpeed: Number,
|
||||
loopSlides: Boolean,
|
||||
maxTermsPerScreen: Number,
|
||||
spaceBetweenTerms: Number,
|
||||
hideName: Boolean,
|
||||
largeArrows: Boolean,
|
||||
arrowsStyle: String,
|
||||
|
@ -214,7 +215,7 @@ export default {
|
|||
paged: undefined,
|
||||
totalTerms: 0,
|
||||
swiperOptions: {
|
||||
watchOverflow: true,
|
||||
watchOverflow: false,
|
||||
mousewheel: {
|
||||
forceToAxis: true
|
||||
},
|
||||
|
@ -224,18 +225,18 @@ export default {
|
|||
allowTouchMove: true,
|
||||
slidesPerView: 1,
|
||||
slidesPerGroup: 1,
|
||||
spaceBetween: this.showTermThumbnail ? 32 : 16,
|
||||
spaceBetween: this.spaceBetweenTerms,
|
||||
slideToClickedSlide: true,
|
||||
navigation: {
|
||||
nextEl: '#' + this.blockId + '-next',
|
||||
prevEl: '#' + this.blockId + '-prev',
|
||||
},
|
||||
breakpoints: {
|
||||
498: { slidesPerView: this.showTermThumbnail ? 1 : 1 },
|
||||
768: { slidesPerView: this.showTermThumbnail ? 2 : 1 },
|
||||
1024: { slidesPerView: this.showTermThumbnail ? 3 : 2 },
|
||||
1366: { slidesPerView: this.showTermThumbnail ? 4 : 3 },
|
||||
1600: { slidesPerView: this.showTermThumbnail ? 5 : 4 },
|
||||
498: { slidesPerView: this.showTermThumbnail ? 1 : 1, spaceBetween: this.spaceBetweenTerms },
|
||||
768: { slidesPerView: this.showTermThumbnail ? 2 : 1, spaceBetween: this.spaceBetweenTerms },
|
||||
1024: { slidesPerView: this.showTermThumbnail ? 3 : 2, spaceBetween: this.spaceBetweenTerms },
|
||||
1366: { slidesPerView: this.showTermThumbnail ? 4 : 3, spaceBetween: this.spaceBetweenTerms },
|
||||
1600: { slidesPerView: this.showTermThumbnail ? 5 : 4, spaceBetween: this.spaceBetweenTerms },
|
||||
},
|
||||
autoplay: this.autoPlay ? { delay: this.autoPlaySpeed*1000 } : false,
|
||||
loop: this.loopSlides
|
||||
|
@ -252,11 +253,11 @@ export default {
|
|||
|
||||
if (!isNaN(this.maxTermsPerScreen)) {
|
||||
this.swiperOptions.breakpoints = {
|
||||
498: { slidesPerView: this.maxTermsPerScreen - 4 > 0 ? this.maxTermsPerScreen - 4 : 1 },
|
||||
768: { slidesPerView: this.maxTermsPerScreen - 3 > 0 ? this.maxTermsPerScreen - 3 : 1 },
|
||||
1024: { slidesPerView: this.maxTermsPerScreen - 2 > 0 ? this.maxTermsPerScreen - 2 : 1 },
|
||||
1366: { slidesPerView: this.maxTermsPerScreen - 1 > 0 ? this.maxTermsPerScreen - 1 : 1 },
|
||||
1600: { slidesPerView: this.maxTermsPerScreen > 0 ? this.maxTermsPerScreen : 1 },
|
||||
498: { slidesPerView: this.maxTermsPerScreen - 4 > 0 ? this.maxTermsPerScreen - 4 : 1, spaceBetween: this.spaceBetweenTerms },
|
||||
768: { slidesPerView: this.maxTermsPerScreen - 3 > 0 ? this.maxTermsPerScreen - 3 : 1, spaceBetween: this.spaceBetweenTerms },
|
||||
1024: { slidesPerView: this.maxTermsPerScreen - 2 > 0 ? this.maxTermsPerScreen - 2 : 1, spaceBetween: this.spaceBetweenTerms },
|
||||
1366: { slidesPerView: this.maxTermsPerScreen - 1 > 0 ? this.maxTermsPerScreen - 1 : 1, spaceBetween: this.spaceBetweenTerms },
|
||||
1600: { slidesPerView: this.maxTermsPerScreen > 0 ? this.maxTermsPerScreen : 1, spaceBetween: this.spaceBetweenTerms },
|
||||
}
|
||||
this.swiperOptions.slidesPerView = 1;
|
||||
}
|
||||
|
@ -288,14 +289,14 @@ export default {
|
|||
this.tainacanAxios.get('/items/?perpage=3&fetch_only=name,url,thumbnail&taxquery[0][taxonomy]=tnc_tax_' + this.taxonomyId + '&taxquery[0][terms][0]=' + term.id + '&taxquery[0][compare]=IN')
|
||||
.then(response => { return({ termId: term.id, termItems: response.data.items }) })
|
||||
);
|
||||
this.terms.push(term);
|
||||
this.terms.push(term);
|
||||
}
|
||||
axios.all(promises).then((results) => {
|
||||
for (let result of results) {
|
||||
this.termItems[result.termId] = result.termItems;
|
||||
}
|
||||
|
||||
this.isLoading = false;
|
||||
//this.isLoading = false;
|
||||
})
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue