tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds option to set space between slides in every carousel block.

This commit is contained in:
mateuswetah 2021-09-21 13:49:17 -03:00
parent 54b868f04c
commit c89924b38f
24 changed files with 689 additions and 623 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
src/assets/css/tainacan-gutenberg-block-carousel-collections-list.css
View File

@ -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); }

2
src/assets/css/tainacan-gutenberg-block-carousel-collections-list.css.map
View File

File diff suppressed because one or more lines are too long

184
src/assets/css/tainacan-gutenberg-block-carousel-items-list.css
View File

@ -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); }

2
src/assets/css/tainacan-gutenberg-block-carousel-items-list.css.map
View File

File diff suppressed because one or more lines are too long

193
src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css
View File

@ -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); }

2
src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css.map
View File

File diff suppressed because one or more lines are too long

4
src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/block.json
View File

@ -55,6 +55,10 @@
"type": "Number",
"value": 6
},
"spaceBetweenCollections": {
"type": "Number",
"value": 32
},
"isLoading": {
"type": "Boolean",
"value": false

14
src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/edit.js
View File

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

2
src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/save.js
View File

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

190
src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/style.scss
View File

@ -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));
}
}
}

3
src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/theme.js
View File

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

28
src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/theme.vue
View File

@ -133,12 +133,12 @@
</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"
@ -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.';

4
src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/block.json
View File

@ -49,6 +49,10 @@
"type": "Number",
"value": 7
},
"spaceBetweenItems": {
"type": "Number",
"value": 32
},
"isLoading": {
"type": "Boolean",
"value": false

14
src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/edit.js
View File

@ -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')}
@ -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"

2
src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/save.js
View File

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

184
src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/style.scss
View File

@ -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) );
}
}
}

3
src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/theme.js
View File

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

27
src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/theme.vue
View File

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

4
src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/block.json
View File

@ -41,6 +41,10 @@
"type": "Number",
"value": 6
},
"spaceBetweenTerms": {
"type": "Number",
"value": 32
},
"isLoading": {
"type": "Boolean",
"value": false

14
src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/edit.js
View File

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

2
src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/save.js
View File

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

192
src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/style.scss
View File

@ -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));
}
}
}

3
src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/theme.js
View File

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

31
src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/theme.vue
View File

@ -108,12 +108,12 @@
</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"
@ -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;
}
@ -295,7 +296,7 @@ export default {
this.termItems[result.termId] = result.termItems;
}
this.isLoading = false;
//this.isLoading = false;
})
}