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

Merge tag '0.18.6' into develop 

release 0.18.6
This commit is contained in:
vnmedeiros 2021-09-27 15:48:20 -03:00
parent 9fdef9dd67 635540ab9f
commit 4a0cf3cd03
48 changed files with 1841 additions and 806 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -116,7 +116,7 @@
width: calc(100% + 40px);
left: -20px; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container {
margin: 0 50px; }
margin: 0 var(--spaceAroundCarousel, 50px); }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a > span,
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a:hover > span {
color: inherit;
@ -179,16 +179,22 @@
background: none;
background-color: transparent !important;
border: none;
width: 42px;
min-width: 42px;
width: calc(var(--spaceAroundCarousel) - 8px);
height: 42px;
padding: 0;
margin: 0; }
.wp-block-tainacan-carousel-collections-list .swiper-button-prev svg, .wp-block-tainacan-carousel-collections-list .swiper-button-next svg {
border-radius: 100%;
fill: var(--tainacan-block-primary, #298596); }
.wp-block-tainacan-carousel-collections-list .swiper-button-prev::after, .wp-block-tainacan-carousel-collections-list .swiper-button-prev::before, .wp-block-tainacan-carousel-collections-list .swiper-button-next::after, .wp-block-tainacan-carousel-collections-list .swiper-button-next::before {
content: none !important; }
.wp-block-tainacan-carousel-collections-list .swiper-button-next.swiper-button-disabled,
.wp-block-tainacan-carousel-collections-list .swiper-button-prev.swiper-button-disabled {
opacity: 0;
visibility: hidden; }
.wp-block-tainacan-carousel-collections-list.alignfull .swiper-button-prev, .wp-block-tainacan-carousel-collections-list.alignfull .swiper-button-next {
margin: 0 6px; }
margin: 0 6px !important; }
.wp-block-tainacan-carousel-collections-list .collections-list-edit-container,
.wp-block-tainacan-carousel-collections-list .tainacan-carousel {
position: relative; }
@ -216,7 +222,8 @@
.wp-block-tainacan-carousel-collections-list .tainacan-carousel.has-large-arrows .swiper-button-prev,
.wp-block-tainacan-carousel-collections-list .tainacan-carousel.has-large-arrows .swiper-button-next {
top: calc(50% - 60px);
width: 60px;
min-width: 60px;
width: calc(var(--spaceAroundCarousel) + 10px);
height: 60px;
margin: 0 -24px; }
.wp-block-tainacan-carousel-collections-list .collections-list-edit-container.has-large-arrows.has-arrows-left .swiper-button-next,
@ -236,22 +243,22 @@
align-items: flex-start;
overflow-x: scroll;
list-style: none;
margin: 0 50px;
margin: 0 var(--spaceAroundCarousel, 50px);
padding: 0;
scroll-snap-type: x mandatory;
scroll-padding-left: 10px; }
.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 +310,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 +360,117 @@
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); }
.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

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

@ -123,7 +123,7 @@
width: calc(100% + 40px);
left: -20px; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container {
margin: 0 50px; }
margin: 0 var(--spaceAroundCarousel, 50px); }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a > span,
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a:hover > span {
color: inherit;
@ -140,6 +140,11 @@
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a:hover {
color: inherit;
text-decoration: none; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container .is-forced-square > a > div {
padding-bottom: 100% !important; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container .is-forced-square > a > div img {
object-fit: cover;
object-position: center; }
.wp-block-tainacan-carousel-items-list .preview-warning {
width: 100%;
font-size: 0.875rem;
@ -155,16 +160,22 @@
background: none;
background-color: transparent !important;
border: none;
width: 42px;
min-width: 42px;
width: calc(var(--spaceAroundCarousel) - 8px);
height: 42px;
padding: 0;
margin: 0; }
.wp-block-tainacan-carousel-items-list .swiper-button-prev svg, .wp-block-tainacan-carousel-items-list .swiper-button-next svg {
border-radius: 100%;
fill: var(--tainacan-block-primary, #298596); }
.wp-block-tainacan-carousel-items-list .swiper-button-prev::after, .wp-block-tainacan-carousel-items-list .swiper-button-prev::before, .wp-block-tainacan-carousel-items-list .swiper-button-next::after, .wp-block-tainacan-carousel-items-list .swiper-button-next::before {
content: none !important; }
.wp-block-tainacan-carousel-items-list .swiper-button-next.swiper-button-disabled,
.wp-block-tainacan-carousel-items-list .swiper-button-prev.swiper-button-disabled {
opacity: 0;
visibility: hidden; }
.wp-block-tainacan-carousel-items-list.alignfull .swiper-button-prev, .wp-block-tainacan-carousel-items-list.alignfull .swiper-button-next {
margin: 0 6px; }
margin: 0 6px !important; }
.wp-block-tainacan-carousel-items-list .items-list-edit-container,
.wp-block-tainacan-carousel-items-list .tainacan-carousel {
position: relative; }
@ -192,7 +203,8 @@
.wp-block-tainacan-carousel-items-list .tainacan-carousel.has-large-arrows .swiper-button-prev,
.wp-block-tainacan-carousel-items-list .tainacan-carousel.has-large-arrows .swiper-button-next {
top: calc(50% - 60px);
width: 60px;
min-width: 60px;
width: calc(var(--spaceAroundCarousel) + 10px);
height: 60px;
margin: 0 -24px; }
.wp-block-tainacan-carousel-items-list .items-list-edit-container.has-large-arrows.has-arrows-left .swiper-button-next,
@ -212,27 +224,53 @@
align-items: flex-start;
overflow-x: scroll;
list-style: none;
margin: 0 50px;
margin: 0 var(--spaceAroundCarousel, 50px);
padding: 0;
scroll-snap-type: x mandatory;
scroll-padding-left: 10px; }
.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;
line-height: normal; }
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item a > span {
color: inherit;
font-weight: bold;
text-decoration: none;
padding: 8px 12px;
display: block;
line-height: 1.2em;
word-break: break-word; }
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item img {
height: auto;
display: block;
padding: 0px;
margin-bottom: 0.5em; }
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.is-forced-square .items-list-item--image-wrap {
padding-top: 100%;
display: block;
content: '';
width: 100%;
position: relative; }
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.is-forced-square img {
display: block;
padding: 0px;
margin-bottom: 0.5em;
object-fit: cover;
position: absolute;
height: 100%;
width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0; }
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item:hover a {
color: inherit;
text-decoration: none; }
@ -266,142 +304,145 @@
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); }
.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

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

@ -116,7 +116,7 @@
width: calc(100% + 40px);
left: -20px; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container {
margin: 0 50px; }
margin: 0 var(--spaceAroundCarousel, 50px); }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container a > span,
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container a:hover > span {
color: inherit;
@ -179,16 +179,22 @@
background: none;
background-color: transparent !important;
border: none;
width: 42px;
min-width: 42px;
width: calc(var(--spaceAroundCarousel) - 8px);
height: 42px;
padding: 0;
margin: 0; }
.wp-block-tainacan-carousel-terms-list .swiper-button-prev svg, .wp-block-tainacan-carousel-terms-list .swiper-button-next svg {
border-radius: 100%;
fill: var(--tainacan-block-primary, #298596); }
.wp-block-tainacan-carousel-terms-list .swiper-button-prev::after, .wp-block-tainacan-carousel-terms-list .swiper-button-prev::before, .wp-block-tainacan-carousel-terms-list .swiper-button-next::after, .wp-block-tainacan-carousel-terms-list .swiper-button-next::before {
content: none !important; }
.wp-block-tainacan-carousel-terms-list .swiper-button-next.swiper-button-disabled,
.wp-block-tainacan-carousel-terms-list .swiper-button-prev.swiper-button-disabled {
opacity: 0;
visibility: hidden; }
.wp-block-tainacan-carousel-terms-list.alignfull .swiper-button-prev, .wp-block-tainacan-carousel-terms-list.alignfull .swiper-button-next {
margin: 0 6px; }
margin: 0 6px !important; }
.wp-block-tainacan-carousel-terms-list .terms-list-edit-container,
.wp-block-tainacan-carousel-terms-list .tainacan-carousel {
position: relative; }
@ -216,7 +222,8 @@
.wp-block-tainacan-carousel-terms-list .tainacan-carousel.has-large-arrows .swiper-button-prev,
.wp-block-tainacan-carousel-terms-list .tainacan-carousel.has-large-arrows .swiper-button-next {
top: calc(50% - 60px);
width: 60px;
min-width: 60px;
width: calc(var(--spaceAroundCarousel) + 10px);
height: 60px;
margin: 0 -24px; }
.wp-block-tainacan-carousel-terms-list .terms-list-edit-container.has-large-arrows.has-arrows-left .swiper-button-next,
@ -236,22 +243,22 @@
align-items: flex-start;
overflow-x: scroll;
list-style: none;
margin: 0 50px;
margin: 0 var(--spaceAroundCarousel, 50px);
padding: 0;
scroll-snap-type: x mandatory;
scroll-padding-left: 10px; }
.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 +310,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 +359,117 @@
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); }
.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

66
src/assets/css/tainacan-gutenberg-block-dynamic-items-list.css
View File

@ -908,6 +908,72 @@
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-5x4 li.item-list-item:nth-of-type(6) {
grid-row: span 2;
grid-column: span 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--1-6x2 li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--1-6x2 li.item-list-item {
grid-row: span 6;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--2-6x2 li.item-list-item:nth-of-type(1),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--2-6x2 li.item-list-item:nth-of-type(1) {
grid-row: span 4;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--2-6x2 li.item-list-item:nth-of-type(2),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--2-6x2 li.item-list-item:nth-of-type(2) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-6x2 li.item-list-item:nth-of-type(1),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--3-6x2 li.item-list-item:nth-of-type(1) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-6x2 li.item-list-item:nth-of-type(2),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--3-6x2 li.item-list-item:nth-of-type(2) {
grid-row: span 3;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-6x2 li.item-list-item:nth-of-type(3),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--3-6x2 li.item-list-item:nth-of-type(3) {
grid-row: span 1;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-6x2 li.item-list-item:nth-of-type(1), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-6x2 li.item-list-item:nth-of-type(3),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--4-6x2 li.item-list-item:nth-of-type(1),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--4-6x2 li.item-list-item:nth-of-type(3) {
grid-row: span 3;
grid-column: span 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-6x2 li.item-list-item:nth-of-type(2), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-6x2 li.item-list-item:nth-of-type(4),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--4-6x2 li.item-list-item:nth-of-type(2),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--4-6x2 li.item-list-item:nth-of-type(4) {
grid-row: span 2;
grid-column: span 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-6x2 li.item-list-item:nth-of-type(1),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--5-6x2 li.item-list-item:nth-of-type(1) {
grid-row: span 5;
grid-column: span 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-6x2 li.item-list-item:nth-of-type(3), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-6x2 li.item-list-item:nth-of-type(2),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--5-6x2 li.item-list-item:nth-of-type(3),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--5-6x2 li.item-list-item:nth-of-type(2) {
grid-row: span 4;
grid-column: span 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-6x2 li.item-list-item:nth-of-type(4),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--5-6x2 li.item-list-item:nth-of-type(4) {
grid-row: span 6;
grid-column: span 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-6x2 li.item-list-item:nth-of-type(5),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--5-6x2 li.item-list-item:nth-of-type(5) {
grid-row: span 3;
grid-column: span 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-6x2 li.item-list-item:nth-of-type(1), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-6x2 li.item-list-item:nth-of-type(2), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-6x2 li.item-list-item:nth-of-type(4), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-6x2 li.item-list-item:nth-of-type(6),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-6x2 li.item-list-item:nth-of-type(1),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-6x2 li.item-list-item:nth-of-type(2),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-6x2 li.item-list-item:nth-of-type(4),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-6x2 li.item-list-item:nth-of-type(6) {
grid-row: span 2;
grid-column: span 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-6x2 li.item-list-item:nth-of-type(3),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-6x2 li.item-list-item:nth-of-type(3) {
grid-row: span 1;
grid-column: span 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-6x2 li.item-list-item:nth-of-type(5),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--6-6x2 li.item-list-item:nth-of-type(5) {
grid-row: span 3;
grid-column: span 1; }
@media only screen and (max-width: 1024px) {
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic {

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

File diff suppressed because one or more lines are too long

3
src/classes/exporter/class-tainacan-csv.php
View File

@ -97,6 +97,8 @@ class CSV extends Exporter {
$line[] = $this->get_author_name_last_modification($item->get_id());
$line[] = $item->get_modification_date();
$line[] = get_permalink( $item->get_id() );
$line_string = $this->str_putcsv($line, $this->get_option('delimiter'), $this->get_option('enclosure'));
@ -229,6 +231,7 @@ class CSV extends Exporter {
$line[] = 'creation_date';
$line[] = 'user_last_modified';
$line[] = 'modification_date';
$line[] = 'public_url';
$line_string = $this->str_putcsv($line, $this->get_option('delimiter'), $this->get_option('enclosure'));

2
src/readme.txt
View File

@ -4,7 +4,7 @@ Tags: museums, libraries, archives, GLAM, collections, repository
Requires at least: 5.0
Tested up to: 5.8
Requires PHP: 5.6
Stable tag: 0.18.5
Stable tag: 0.18.6
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html

6
src/tainacan.php
View File

@ -4,17 +4,17 @@ Plugin Name: Tainacan
Plugin URI: https://tainacan.org/
Description: Open source, powerful and flexible repository platform for WordPress. Manage and publish you digital collections as easily as publishing a post to your blog, while having all the tools of a professional repository platform.
Author: Tainacan.org
Version: 0.18.5
Version: 0.18.6
Requires at least: 5.0
Tested up to: 5.8
Requires PHP: 5.6
Stable tag: 0.18.5
Stable tag: 0.18.6
Text Domain: tainacan
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
const TAINACAN_VERSION = '0.18.5';
const TAINACAN_VERSION = '0.18.6';
defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
$TAINACAN_BASE_URL = plugins_url('', __FILE__);

8
src/views/admin/components/edition/filter-edition-form.vue
View File

@ -8,7 +8,7 @@
:addons="false"
:type="formErrors['name'] != undefined ? 'is-danger' : ''"
:message="formErrors['name'] != undefined ? formErrors['name'] : ''">
<label class="label is-inline-block">
<label class="label is-inline">
{{ $i18n.get('label_name') }}
<span
class="required-metadatum-asterisk"
@ -38,7 +38,7 @@
:addons="false"
:type="formErrors['description'] != undefined ? 'is-danger' : ''"
:message="formErrors['description'] != undefined ? formErrors['description'] : ''">
<label class="label is-inline-block">
<label class="label is-inline">
{{ $i18n.get('label_description') }}
<help-button
:title="$i18n.getHelperTitle('filters', 'description')"
@ -56,7 +56,7 @@
:addons="false"
:type="formErrors['status'] != undefined ? 'is-danger' : ''"
:message="formErrors['status'] != undefined ? formErrors['status'] : ''">
<label class="label is-inline-block">
<label class="label is-inline">
{{ $i18n.get('label_status') }}
<help-button
:title="$i18n.getHelperTitle('filters', 'status')"
@ -92,7 +92,7 @@
<b-field
:addons="false"
v-if="editForm.filter_type_object && editForm.filter_type_object.use_max_options">
<label class="label is-inline-block">
<label class="label is-inline">
{{ $i18n.get('label_max_options_to_show') }}
<help-button
:title="$i18n.getHelperTitle('filters', 'max_options')"

16
src/views/admin/components/edition/metadatum-edition-form.vue
View File

@ -24,7 +24,7 @@
:addons="false"
:type="formErrors['name'] != undefined ? 'is-danger' : ''"
:message="formErrors['name'] != undefined ? formErrors['name'] : ''">
<label class="label is-inline-block">
<label class="label is-inline">
{{ $i18n.get('label_name') }}
<span
class="required-metadatum-asterisk"
@ -54,7 +54,7 @@
:addons="false"
:type="formErrors['description'] != undefined ? 'is-danger' : ''"
:message="formErrors['description'] != undefined ? formErrors['description'] : ''">
<label class="label is-inline-block">
<label class="label is-inline">
{{ $i18n.get('label_description') }}
<help-button
:title="$i18n.getHelperTitle('metadata', 'description')"
@ -73,7 +73,7 @@
:addons="false"
:type="formErrors['status'] != undefined ? 'is-danger' : ''"
:message="formErrors['status'] != undefined ? formErrors['status'] : ''">
<label class="label is-inline-block">
<label class="label is-inline">
{{ $i18n.get('label_status') }}
<help-button
:title="$i18n.getHelperTitle('metadata', 'status')"
@ -111,7 +111,7 @@
:type="formErrors['display'] != undefined ? 'is-danger' : ''"
:message="formErrors['display'] != undefined ? formErrors['display'] : ''"
:addons="false">
<label class="label is-inline-block">
<label class="label is-inline">
{{ $i18n.get('label_display') }}
<help-button
:title="$i18n.getHelperTitle('metadata', 'display')"
@ -135,7 +135,7 @@
<b-field
:addons="false">
<label class="label is-inline-block">{{ $i18n.get('label_insert_options') }}</label>
<label class="label is-inline">{{ $i18n.get('label_insert_options') }}</label>
<b-field
v-if="editForm.metadata_type_object.component != 'tainacan-compound' && (editForm.parent == 0 || (editForm.parent != 0 && !isParentMultiple))"
@ -209,7 +209,7 @@
:type="formErrors['cardinality'] != undefined ? 'is-danger' : ''"
:message="formErrors['cardinality'] != undefined ? formErrors['cardinality'] : ''"
:addons="false">
<label class="label is-inline-block">
<label class="label is-inline">
{{ $i18n.getHelperTitle('metadata', 'cardinality') }}
<help-button
:title="$i18n.getHelperTitle('metadata', 'cardinality')"
@ -240,7 +240,7 @@
</div>
<div
v-if="(editForm.metadata_type_object && editForm.metadata_type_object.form_component) || editForm.edit_form != ''"
v-if="(editForm.metadata_type_object && editForm.metadata_type_object.form_component && editForm.metadata_type_object.component != 'tainacan-compound') || editForm.edit_form != ''"
class="metadata-form-section"
@click="hideMetadataTypeOptions = !hideMetadataTypeOptions;">
<span class="icon">
@ -297,7 +297,7 @@
v-if="showAdvancedOptions"
class="options-columns">
<b-field :addons="false">
<label class="label is-inline-block">
<label class="label is-inline">
{{ $i18n.get('label_semantic_uri') }}
<help-button
:title="$i18n.getHelperTitle('metadata', 'semantic_uri')"

2
src/views/admin/components/metadata-types/relationship/class-tainacan-relationship.php
View File

@ -217,7 +217,7 @@ class Relationship extends Metadata_Type {
// item not found
}
}
if(!empty($display_metas) && is_array($display_metas) && count($display_metas) > 1) {
if(!empty($display_metas) && is_array($display_metas) && count($display_metas) > 1 && $return !== '') {
return "<div class='tainacan-relationship-group'>{$return}</div>";
}
return $return;

3
src/views/admin/components/metadata-types/taxonomy/Taxonomy.vue
View File

@ -31,9 +31,8 @@
:is-checkbox="getComponent == 'tainacan-taxonomy-checkbox'"
@input="(selected) => valueComponent = selected"
/>
<div
v-if="displayCreateNewTerm && !isTermCreationPanelOpen"
v-if="displayCreateNewTerm && !isTermCreationPanelOpen && (maxMultipleValues !== undefined ? (maxMultipleValues > valueComponent.length) : true)"
class="add-new-term">
<a
@click="openTermCreationModal"

91
src/views/admin/components/metadata-types/taxonomy/TaxonomyTaginput.vue
View File

@ -1,51 +1,50 @@
<template>
<div class="block">
<b-taginput
expanded
:disabled="disabled"
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
size="is-small"
icon="magnify"
:allow-new="false"
@add="emitAdd"
@remove="emitRemove"
v-model="selected"
:data="labels"
field="label"
:remove-on-keys="[]"
:dropdown-position="isLastMetadatum ? 'top' :'auto'"
attached
ellipsis
:aria-close-label="$i18n.get('remove_value')"
:placeholder="$i18n.get('instruction_type_existing_term')"
:loading="isFetching"
:class="{ 'has-selected': selected != undefined && selected != [] }"
autocomplete
@typing="loadTerms"
check-infinite-scroll
@infinite-scroll="loadMoreTerms"
:has-counter="false">
<template slot-scope="props">
<div class="media">
<div class="media-content">
{{ props.option.label }}
</div>
<b-taginput
expanded
:disabled="disabled"
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
size="is-small"
icon="magnify"
:allow-new="false"
@add="emitAdd"
@remove="emitRemove"
v-model="selected"
:data="labels"
:maxtags="maxtags"
field="label"
:remove-on-keys="[]"
:dropdown-position="isLastMetadatum ? 'top' :'auto'"
attached
ellipsis
:aria-close-label="$i18n.get('remove_value')"
:placeholder="$i18n.get('instruction_type_existing_term')"
:loading="isFetching"
:class="{ 'has-selected': selected != undefined && selected != [] }"
autocomplete
@typing="loadTerms"
check-infinite-scroll
@infinite-scroll="loadMoreTerms"
:has-counter="false">
<template slot-scope="props">
<div class="media">
<div class="media-content">
{{ props.option.label }}
</div>
</template>
<template
v-if="!isFetching"
slot="empty">
{{ $i18n.get('info_no_terms_found') }}
</template>
<template
v-if="allowNew"
slot="footer">
<a @click="$emit('showAddNewTerm', { name: searchName })">
{{ $i18n.get('label_new_term') + ' "' + searchName + '"' }}
</a>
</template>
</b-taginput>
</div>
</div>
</template>
<template
v-if="!isFetching"
slot="empty">
{{ $i18n.get('info_no_terms_found') }}
</template>
<template
v-if="allowNew"
slot="footer">
<a @click="$emit('showAddNewTerm', { name: searchName })">
{{ $i18n.get('label_new_term') + ' "' + searchName + '"' }}
</a>
</template>
</b-taginput>
</template>
<script>

13
src/views/admin/components/metadata-types/user/User.vue
View File

@ -10,7 +10,7 @@
@input="onInput"
@blur="onBlur"
:data="options"
:maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? 100 : 1)"
:maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? (maxMultipleValues !== undefined ? maxMultipleValues : null) : 1)"
autocomplete
attached
:placeholder="$i18n.get('instruction_type_search_users')"
@ -72,6 +72,17 @@ export default {
totalUsers: 0
}
},
computed: {
maxMultipleValues() {
return (
this.itemMetadatum &&
this.itemMetadatum.metadatum &&
this.itemMetadatum.metadatum.cardinality &&
!isNaN(this.itemMetadatum.metadatum.cardinality) &&
this.itemMetadatum.metadatum.cardinality > 1
) ? this.itemMetadatum.metadatum.cardinality : undefined;
}
},
created() {
this.loadCurrentUsers();
},

4
src/views/admin/components/modals/capability-edition-modal.vue
View File

@ -10,7 +10,7 @@
<div>
<template v-if="existingRoles && Object.values(existingRoles).length && capability.roles">
<b-field :addons="false">
<label class="label is-inline-block">
<label class="label is-inline">
{{ $i18n.get('label_associated_roles') }}
</label>
<p>{{ $i18n.get('info_associated_roles') }}</p>
@ -37,7 +37,7 @@
<div>
<template v-if="existingRoles && Object.values(existingRoles).length && capability.roles">
<b-field :addons="false">
<label class="label is-inline-block">
<label class="label is-inline">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-alertcircle"/>
{{ $i18n.get('label_inherited_roles') }}
<help-button

12
src/views/admin/components/search/filters-items-list.vue
View File

@ -39,8 +39,8 @@
class="filter-tags-list"
v-if="filtersAsModal && hasFiltered" />
<br>
<div
<br v-if="filtersAsModal && hasFiltered">
<div
v-if="!isLoadingFilters &&
((filters.length >= 0 && isRepositoryLevel) || filters.length > 0)"
class="filters-components-list">
@ -93,7 +93,7 @@
v-if="taxonomyFilter.length <= 0">
{{ $i18n.get('info_there_is_no_filter') }}
</p> -->
<hr v-if="taxonomyFilter.length > 0">
<hr v-if="taxonomyFilter.length > 1">
</div>
<div
v-if="key != 'repository-filters'"
@ -141,7 +141,7 @@
v-if="taxonomyFilter.length <= 0">
{{ $i18n.get('info_there_is_no_filter') }}
</p> -->
<hr v-if="taxonomyFilter.length > 0">
<hr v-if="taxonomyFilter.length > 1">
</div>
</template>
@ -193,7 +193,7 @@
v-if="taxonomyFilter.length <= 0">
{{ $i18n.get('info_there_is_no_filter') }}
</p> -->
<hr v-if="repositoryCollectionFilters.length > 0">
<hr v-if="repositoryCollectionFilters.length > 1">
</div>
<div
v-if="key != 'repository-filters'"
@ -241,7 +241,7 @@
v-if="taxonomyFilter.length <= 0">
{{ $i18n.get('info_there_is_no_filter') }}
</p> -->
<hr v-if="repositoryCollectionFilters.length > 0">
<hr v-if="repositoryCollectionFilters.length > 1">
</div>
</template>

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

@ -55,6 +55,14 @@
"type": "Number",
"value": 6
},
"spaceBetweenCollections": {
"type": "Number",
"value": 32
},
"spaceAroundCarousel": {
"type": "Number",
"value": 50
},
"isLoading": {
"type": "Boolean",
"value": false
@ -71,6 +79,10 @@
"type": "Boolean",
"value": false
},
"arrowsStyle": {
"type": "String",
"value": "type-1"
},
"autoPlay": {
"type": "Boolean",
"value": false

141
src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/deprecated.js
View File

@ -1,4 +1,145 @@
const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
export default [
/* Deprecated on Tainacan 0.18.6 due to arrowsStyle option */
{
"attributes": {
"content": {
"type": "array",
"source": "children",
"selector": "div"
},
"collections": {
"type": "Array",
"default": []
},
"isModalOpen": {
"type": "Boolean",
"default": false
},
"selectedCollections": {
"type": "Array",
"default": []
},
"itemsRequestSource": {
"type": "String",
"default": false
},
"maxCollectionsNumber": {
"type": "Number",
"value": false
},
"maxCollectionsPerScreen": {
"type": "Number",
"value": 6
},
"isLoading": {
"type": "Boolean",
"value": false
},
"isLoadingCollection": {
"type": "Boolean",
"value": false
},
"arrowsPosition": {
"type": "String",
"value": "around"
},
"largeArrows": {
"type": "Boolean",
"value": false
},
"autoPlay": {
"type": "Boolean",
"value": false
},
"autoPlaySpeed": {
"type": "Number",
"value": 3
},
"loopSlides": {
"type": "Boolean",
"value": false
},
"hideName": {
"type": "Boolean",
"value": true
},
"showCollectionThumbnail": {
"type": "Boolean",
"value": false
},
"cropImagesToSquare": {
"type": "Boolean",
"value": true
},
"blockId": {
"type": "String",
"default": ""
},
"collectionBackgroundColor": {
"type": "String",
"default": "#454647"
},
"collectionTextColor": {
"type": "String",
"default": "#ffffff"
}
},
"supports": {
"align": ["full", "wide"],
"html": false,
"multiple": true,
"typography": {
"fontSize": true
},
"color": {
"text": true,
"background": false,
"gradients": false,
"link": true
}
},
save({ attributes, className }) {
const {
content,
blockId,
selectedCollections,
arrowsPosition,
largeArrows,
cropImagesToSquare,
maxCollectionsPerScreen,
maxCollectionsNumber,
autoPlay,
autoPlaySpeed,
loopSlides,
hideName,
showCollectionThumbnail
} = attributes;
// Gets attributes such as style, that are automatically added by the editor hook
const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
return <div
{ ...blockProps }
data-module="carousel-collections-list"
selected-collections={ JSON.stringify(selectedCollections.map((collection) => { return collection.id })) }
arrows-position={ arrowsPosition }
auto-play={ '' + autoPlay }
auto-play-speed={ autoPlaySpeed }
loop-slides={ '' + loopSlides }
hide-name={ '' + hideName }
large-arrows={ '' + largeArrows }
crop-images-to-square={ '' + cropImagesToSquare }
max-collections-number={ maxCollectionsNumber }
max-collections-per-screen={ maxCollectionsPerScreen }
tainacan-api-root={ tainacan_blocks.root }
tainacan-base-url={ tainacan_blocks.base_url }
show-collection-thumbnail={ '' + showCollectionThumbnail }
id={ 'wp-block-tainacan-carousel-collections-list_' + blockId }>
{ content }
</div>
}
},
/* Deprecated on Tainacan 0.18.4, due to new block.json strategy */
{
attributes: {

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

@ -20,8 +20,11 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
itemsRequestSource,
selectedCollections,
largeArrows,
arrowsStyle,
cropImagesToSquare,
maxCollectionsPerScreen,
spaceBetweenCollections,
spaceAroundCarousel,
isLoading,
arrowsPosition,
autoPlay,
@ -33,7 +36,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
// Gets blocks props from hook
const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps();
console.log(blockProps)
// Obtains block's client id to render it on save function
setAttributes({ blockId: clientId });
@ -67,8 +70,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
}
<a
id={ isNaN(collection.id) ? collection.id : 'collection-id-' + collection.id }
href={ collection.url }
target="_blank">
href={ collection.url }>
{ !showCollectionThumbnail ?
<div class="collection-items-grid">
<img
@ -276,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')}
@ -331,9 +343,19 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
] }
onChange={ ( aPosition ) => {
arrowsPosition = aPosition;
setAttributes({ arrowsPosition: arrowsPosition });
}}/>
<SelectControl
label={__('Arrows icon style', 'tainacan')}
value={ arrowsStyle }
options={ [
{ label: __('Default', 'tainacan'), value: 'type-1' },
{ label: __('Alternative', 'tainacan'), value: 'type-2' }
] }
onChange={ ( aStyle ) => {
arrowsStyle = aStyle;
setAttributes({ arrowsStyle: arrowsStyle });
}}/>
<ToggleControl
label={__('Large arrows', 'tainacan')}
help={ !largeArrows ? __('Toggle to display arrows bigger than the default size.', 'tainacan') : __('Do not show arrows bigger than the default size.', 'tainacan')}
@ -343,7 +365,17 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
setAttributes({ largeArrows: largeArrows });
}
}
/>
/>
<RangeControl
label={ __('Space around the carousel', 'tainacan') }
value={ !isNaN(spaceAroundCarousel) ? spaceAroundCarousel : 50 }
onChange={ ( aSpaceAroundCarousel ) => {
spaceAroundCarousel = aSpaceAroundCarousel;
setAttributes( { spaceAroundCarousel: aSpaceAroundCarousel } );
}}
min={ 0 }
max={ 200 }
/>
</PanelBody>
</InspectorControls>
</div>
@ -410,7 +442,11 @@ 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',
'--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px'
}}>
<button
class="swiper-button-prev"
slot="button-prev"
@ -419,10 +455,15 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
width={ largeArrows ? 60 : 42 }
height={ largeArrows ? 60 : 42 }
viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
{
arrowsStyle === 'type-2' ?
<path d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
:
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
}
<path
d="M0 0h24v24H0z"
fill="none"/>
fill="none"/>
</svg>
</button>
<ul className={'collections-list-edit'}>
@ -436,10 +477,15 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
width={ largeArrows ? 60 : 42 }
height={ largeArrows ? 60 : 42 }
viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
{
arrowsStyle === 'type-2' ?
<path d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
:
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
}
<path
d="M0 0h24v24H0z"
fill="none"/>
fill="none"/>
</svg>
</button>
</div>

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

@ -7,9 +7,12 @@ export default function ({ attributes, className }) {
selectedCollections,
arrowsPosition,
largeArrows,
arrowsStyle,
cropImagesToSquare,
maxCollectionsPerScreen,
maxCollectionsNumber,
spaceBetweenCollections,
spaceAroundCarousel,
autoPlay,
autoPlaySpeed,
loopSlides,
@ -29,9 +32,12 @@ export default function ({ attributes, className }) {
loop-slides={ '' + loopSlides }
hide-name={ '' + hideName }
large-arrows={ '' + largeArrows }
arrows-style={ arrowsStyle }
crop-images-to-square={ '' + cropImagesToSquare }
max-collections-number={ maxCollectionsNumber }
max-collections-per-screen={ maxCollectionsPerScreen }
space-between-collections={ spaceBetweenCollections }
space-around-carousel={ spaceAroundCarousel }
tainacan-api-root={ tainacan_blocks.root }
tainacan-base-url={ tainacan_blocks.base_url }
show-collection-thumbnail={ '' + showCollectionThumbnail }

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

@ -135,7 +135,7 @@
left: -20px;
.swiper-container {
margin: 0 50px;
margin: 0 var(--spaceAroundCarousel, 50px);
a>span,
a:hover>span {
@ -212,12 +212,14 @@
background: none;
background-color: transparent !important;
border: none;
width: 42px;
min-width: 42px;
width: calc(var(--spaceAroundCarousel) - 8px);
height: 42px;
padding: 0;
margin: 0;
svg {
border-radius: 100%;
fill: var(--tainacan-block-primary, $primary);
}
&::after,
@ -225,10 +227,15 @@
content: none !important;
}
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
opacity: 0;
visibility: hidden;
}
&.alignfull .swiper-button-prev,
&.alignfull .swiper-button-next {
margin: 0 6px;
margin: 0 6px !important;
}
// Carousel placeholder on editor side ----------------------------------------------------
@ -260,7 +267,8 @@
&.has-large-arrows .swiper-button-prev,
&.has-large-arrows .swiper-button-next {
top: calc(50% - 60px);
width: 60px;
min-width: 60px;
width: calc(var(--spaceAroundCarousel) + 10px);
height: 60px;
margin: 0 -24px;
}
@ -282,7 +290,7 @@
align-items: flex-start;
overflow-x: scroll;
list-style: none;
margin: 0 50px;
margin: 0 var(--spaceAroundCarousel, 50px);
padding: 0;
scroll-snap-type: x mandatory;
scroll-padding-left: 10px;
@ -290,16 +298,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 +374,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 +434,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 +601,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));
}
}
}

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

@ -19,7 +19,7 @@ export default (element) => {
// Checks if this carousel isn't already mounted
blocks = blocks.filter((block) => block.classList && !block.classList.contains('has-mounted'));
const blockIds = Object.values(blocks).map((block) => block.id);
// Creates a new Vue Instance to manage each block isolatelly
for (let blockId of blockIds) {
@ -32,7 +32,10 @@ export default (element) => {
autoPlay: false,
autoPlaySpeed: 3,
largeArrows: false,
arrowsStyle: 'type-1',
maxCollectionsPerScreen: 6,
spaceBetweenCollections: 32,
spaceAroundCarousel: 50,
cropImagesToSquare: true,
loopSlides: false,
hideName: true,
@ -42,7 +45,7 @@ export default (element) => {
className: '',
style: ''
},
render(h){
render(h) {
return h(CarouselCollectionsListTheme, {
props: {
blockId: blockId,
@ -53,8 +56,11 @@ export default (element) => {
autoPlaySpeed: this.autoPlaySpeed,
loopSlides: this.loopSlides,
largeArrows: this.largeArrows,
arrowsStyle: this.arrowsStyle,
cropImagesToSquare: this.cropImagesToSquare,
maxCollectionsPerScreen: this.maxCollectionsPerScreen,
spaceBetweenCollections: this.spaceBetweenCollections,
spaceAroundCarousel: this.spaceAroundCarousel,
hideName: this.hideName,
showCollectionThumbnail: this.showCollectionThumbnail,
tainacanApiRoot: this.tainacanApiRoot,
@ -69,9 +75,12 @@ 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.spaceAroundCarousel = this.$el.attributes['space-around-carousel'] != undefined ? this.$el.attributes['space-around-carousel'].value : 50;
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;
this.arrowsStyle = this.$el.attributes['arrows-style'] != undefined ? this.$el.attributes['arrows-style'].value : undefined;
this.autoPlaySpeed = this.$el.attributes['auto-play-speed'] != undefined ? this.$el.attributes['auto-play-speed'].value : 3;
this.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false;
this.cropImagesToSquare = this.$el.attributes['crop-images-to-square'] != undefined ? this.$el.attributes['crop-images-to-square'].value == 'true' : false;

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

@ -5,6 +5,7 @@
<div v-if="!isLoading">
<div
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') "
:style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
v-if="collections.length > 0">
<swiper
role="list"
@ -18,8 +19,7 @@
<a
v-if="showCollectionThumbnail"
:id="isNaN(collection.id) ? collection.id : 'collection-id-' + collection.id"
:href="collection.url"
target="_blank">
:href="collection.url">
<img
:src="
collection.thumbnail && collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0] && collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0]
@ -53,8 +53,7 @@
<a
v-else
:id="isNaN(collection.id) ? collection.id : 'collection-id-' + collection.id"
:href="collection.url"
target="_blank">
:href="collection.url">
<div class="collection-items-grid">
<blur-hash-image
:height="collectionItems[collection.id][0] ? $thumbHelper.getHeight(collectionItems[collection.id][0]['thumbnail'], 'tainacan-medium') : 275"
@ -94,10 +93,15 @@
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path
v-if="arrowsStyle === 'type-2'"
d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
<path
v-else
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
fill="none"/>
</svg>
</button>
<button
@ -109,10 +113,15 @@
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path
v-if="arrowsStyle === 'type-2'"
d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
<path
v-else
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
fill="none"/>
</svg>
</button>
</div>
@ -123,17 +132,19 @@
</div>
<!-- Swiper buttons are hidden as they actually swipe from slide to slide -->
</div>
<div v-else-if="isLoading && !autoPlay && !loopSlides">
<div :class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') ">
<div v-else>
<div
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') "
:style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }">
<swiper
role="list"
ref="myCollectionSwiper"
:options="swiperOptions">
:options="{ ...JSON.parse(JSON.stringify(swiperOptions)), autoplay: false, loop: false }">
<swiper-slide
role="listitem"
:key="index"
v-for="(collection, index) of 18"
class="collection-list-item skeleton">
class="collection-list-item skeleton">
<a>
<img>
<span v-if="!hideName" />
@ -149,10 +160,15 @@
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path
v-if="arrowsStyle === 'type-2'"
d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
<path
v-else
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
fill="none"/>
</svg>
</button>
<button
@ -164,7 +180,12 @@
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path
v-if="arrowsStyle === 'type-2'"
d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
<path
v-else
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
@ -196,8 +217,11 @@ export default {
autoPlaySpeed: Number,
loopSlides: Boolean,
maxCollectionsPerScreen: Number,
spaceBetweenCollections: Number,
spaceAroundCarousel: Number,
hideName: Boolean,
largeArrows: Boolean,
arrowsStyle: String,
cropImagesToSquare: Boolean,
showCollectionThumbnail: Boolean,
tainacanApiRoot: String,
@ -228,18 +252,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
@ -256,18 +280,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.';
@ -293,7 +316,7 @@ export default {
this.tainacanAxios.get('/collection/' + collection.id + '/items?perpage=3&fetch_only=name,url,thumbnail')
.then(response => { return({ collectionId: collection.id, collectionItems: response.data.items }) })
);
this.collections.push(collection);
this.collections.push(collection);
}
axios.all(promises).then((results) => {
for (let result of results) {

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

@ -49,6 +49,14 @@
"type": "Number",
"value": 7
},
"spaceBetweenItems": {
"type": "Number",
"value": 32
},
"spaceAroundCarousel": {
"type": "Number",
"value": 50
},
"isLoading": {
"type": "Boolean",
"value": false
@ -69,6 +77,10 @@
"type": "Boolean",
"value": false
},
"arrowsStyle": {
"type": "String",
"value": "type-1"
},
"autoPlay": {
"type": "Boolean",
"value": false

173
src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/deprecated.js
View File

@ -1,4 +1,177 @@
const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
export default [
/* Deprecated on Tainacan 0.18.6 due to arrowsStyle option */
{
"attributes": {
"content": {
"type": "array",
"source": "children",
"selector": "div"
},
"collectionId": {
"type": "String",
"default": ""
},
"items": {
"type": "Array",
"default": []
},
"isModalOpen": {
"type": "Boolean",
"default": false
},
"searchURL": {
"type": "String",
"default": ""
},
"selectedItems": {
"type": "Array",
"default": []
},
"itemsRequestSource": {
"type": "String",
"default": ""
},
"maxItemsNumber": {
"type": "Number",
"value": 12
},
"maxItemsPerScreen": {
"type": "Number",
"value": 7
},
"isLoading": {
"type": "Boolean",
"value": false
},
"isLoadingCollection": {
"type": "Boolean",
"value": false
},
"loadStrategy": {
"type": "String",
"value": "search"
},
"arrowsPosition": {
"type": "String",
"value": "around"
},
"largeArrows": {
"type": "Boolean",
"value": false
},
"autoPlay": {
"type": "Boolean",
"value": false
},
"autoPlaySpeed": {
"type": "Number",
"value": 3
},
"loopSlides": {
"type": "Boolean",
"value": false
},
"hideTitle": {
"type": "Boolean",
"value": true
},
"showCollectionHeader": {
"type": "Boolean",
"value": false
},
"showCollectionLabel": {
"type": "Boolean",
"value": false
},
"cropImagesToSquare": {
"type": "Boolean",
"value": true
},
"collection": {
"type": "Object",
"value": {}
},
"blockId": {
"type": "String",
"default": ""
},
"collectionBackgroundColor": {
"type": "String",
"default": "#454647"
},
"collectionTextColor": {
"type": "String",
"default": "#ffffff"
}
},
"supports": {
"align": ["full", "wide"],
"html": false,
"multiple": true,
"typography": {
"fontSize": true
},
"color": {
"text": true,
"background": false,
"gradients": false,
"link": true
}
},
save({ attributes, className }) {
const {
content,
blockId,
collectionId,
searchURL,
selectedItems,
arrowsPosition,
largeArrows,
loadStrategy,
maxItemsNumber,
maxItemsPerScreen,
autoPlay,
autoPlaySpeed,
loopSlides,
hideTitle,
cropImagesToSquare,
showCollectionHeader,
showCollectionLabel,
collectionBackgroundColor,
collectionTextColor
} = attributes;
// Gets attributes such as style, that are automatically added by the editor hook
const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
return <div
{ ...blockProps }
data-module="carousel-items-list"
search-url={ searchURL }
selected-items={ JSON.stringify(selectedItems) }
arrows-position={ arrowsPosition }
load-strategy={ loadStrategy }
collection-id={ collectionId }
auto-play={ '' + autoPlay }
auto-play-speed={ autoPlaySpeed }
loop-slides={ '' + loopSlides }
hide-title={ '' + hideTitle }
large-arrows={ '' + largeArrows }
crop-images-to-square={ '' + cropImagesToSquare }
show-collection-header={ '' + showCollectionHeader }
show-collection-label={ '' + showCollectionLabel }
collection-background-color={ collectionBackgroundColor }
collection-text-color={ collectionTextColor }
max-items-number={ maxItemsNumber }
max-items-per-screen={ maxItemsPerScreen }
tainacan-api-root={ tainacan_blocks.root }
tainacan-base-url={ tainacan_blocks.base_url }
id={ 'wp-block-tainacan-carousel-items-list_' + blockId }>
{ content }
</div>
}
},
/* Deprecated on Version 0.18.4 due to compatibility with WP 5.8 */
{
attributes: {

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

@ -22,11 +22,14 @@ export default function({ attributes, setAttributes, className, isSelected, clie
itemsRequestSource,
maxItemsNumber,
maxItemsPerScreen,
spaceBetweenItems,
spaceAroundCarousel,
selectedItems,
isLoading,
loadStrategy,
arrowsPosition,
largeArrows,
arrowsStyle,
autoPlay,
autoPlaySpeed,
loopSlides,
@ -61,7 +64,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
return (
<li
key={ item.id }
className={ 'item-list-item ' + (maxItemsPerScreen ? 'max-itens-per-screen-' + maxItemsPerScreen : '') }>
className={ 'item-list-item ' + (maxItemsPerScreen ? ' max-itens-per-screen-' + maxItemsPerScreen : '') + (cropImagesToSquare ? ' is-forced-square' : '') }>
{ loadStrategy == 'selection' ?
( tainacan_blocks.wp_version < '5.4' ?
<IconButton
@ -78,12 +81,13 @@ export default function({ attributes, setAttributes, className, isSelected, clie
}
<a
id={ isNaN(item.id) ? item.id : 'item-id-' + item.id }
href={ item.url }
target="_blank">
<img
src={ thumbHelper.getSrc(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype']) }
srcSet={ thumbHelper.getSrcSet(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype']) }
alt={ item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : __( 'Thumbnail', 'tainacan' )) }/>
href={ item.url }>
<div class="items-list-item--image-wrap">
<img
src={ thumbHelper.getSrc(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype']) }
srcSet={ thumbHelper.getSrcSet(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype']) }
alt={ item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : __( 'Thumbnail', 'tainacan' )) }/>
</div>
{ !hideTitle ? <span>{ item.title ? item.title : '' }</span> : null }
</a>
</li>
@ -370,8 +374,8 @@ export default function({ attributes, setAttributes, className, isSelected, clie
}
<ToggleControl
label={__('Crop Images', 'tainacan')}
help={ cropImagesToSquare && maxItemsPerScreen > 4 ? __('Do not use square cropeed version of the item thumbnail.', 'tainacan') : __('Toggle to use square cropped version of the item thumbnail.', 'tainacan') }
checked={ cropImagesToSquare && maxItemsPerScreen > 4 }
help={ cropImagesToSquare ? __('Do not use square cropeed version of the item thumbnail.', 'tainacan') : __('Toggle to use square cropped version of the item thumbnail.', 'tainacan') }
checked={ cropImagesToSquare }
onChange={ ( isChecked ) => {
cropImagesToSquare = isChecked;
setAttributes({ cropImagesToSquare: cropImagesToSquare });
@ -379,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')}
@ -437,6 +451,17 @@ export default function({ attributes, setAttributes, className, isSelected, clie
setAttributes({ arrowsPosition: arrowsPosition });
}}/>
<SelectControl
label={__('Arrows icon style', 'tainacan')}
value={ arrowsStyle }
options={ [
{ label: __('Default', 'tainacan'), value: 'type-1' },
{ label: __('Alternative', 'tainacan'), value: 'type-2' }
] }
onChange={ ( aStyle ) => {
arrowsStyle = aStyle;
setAttributes({ arrowsStyle: arrowsStyle });
}}/>
<ToggleControl
label={__('Large arrows', 'tainacan')}
help={ !largeArrows ? __('Toggle to display arrows bigger than the default size.', 'tainacan') : __('Do not show arrows bigger than the default size.', 'tainacan')}
@ -447,7 +472,17 @@ export default function({ attributes, setAttributes, className, isSelected, clie
}
}
/>
</div>
<RangeControl
label={ __('Space around the carousel', 'tainacan') }
value={ !isNaN(spaceAroundCarousel) ? spaceAroundCarousel : 50 }
onChange={ ( aSpaceAroundCarousel ) => {
spaceAroundCarousel = aSpaceAroundCarousel;
setAttributes( { spaceAroundCarousel: aSpaceAroundCarousel } );
}}
min={ 0 }
max={ 200 }
/>
</div>
</PanelBody>
{ loadStrategy == 'search' ?
@ -467,7 +502,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
min={ 1 }
max={ 96 }
/>
</div>
</div>
</PanelBody>
:null
}
@ -533,7 +568,6 @@ export default function({ attributes, setAttributes, className, isSelected, clie
:
<a
href={ collection.url ? collection.url : '' }
target="_blank"
class="carousel-items-collection-header">
<div
style={{
@ -626,7 +660,11 @@ 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',
'--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px'
}}>
<button
class="swiper-button-prev"
slot="button-prev"
@ -635,10 +673,15 @@ export default function({ attributes, setAttributes, className, isSelected, clie
width={ largeArrows ? 60 : 42 }
height={ largeArrows ? 60 : 42 }
viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
{
arrowsStyle === 'type-2' ?
<path d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
:
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
}
<path
d="M0 0h24v24H0z"
fill="none"/>
fill="none"/>
</svg>
</button>
<ul
@ -656,7 +699,12 @@ export default function({ attributes, setAttributes, className, isSelected, clie
width={ largeArrows ? 60 : 42 }
height={ largeArrows ? 60 : 42 }
viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
{
arrowsStyle === 'type-2' ?
<path d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
:
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
}
<path
d="M0 0h24v24H0z"
fill="none"/>

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

@ -9,9 +9,12 @@ export default function ({ attributes, className }) {
selectedItems,
arrowsPosition,
largeArrows,
arrowsStyle,
loadStrategy,
maxItemsNumber,
maxItemsPerScreen,
spaceBetweenItems,
spaceAroundCarousel,
autoPlay,
autoPlaySpeed,
loopSlides,
@ -38,6 +41,7 @@ export default function ({ attributes, className }) {
loop-slides={ '' + loopSlides }
hide-title={ '' + hideTitle }
large-arrows={ '' + largeArrows }
arrows-style={ arrowsStyle }
crop-images-to-square={ '' + cropImagesToSquare }
show-collection-header={ '' + showCollectionHeader }
show-collection-label={ '' + showCollectionLabel }
@ -45,6 +49,8 @@ export default function ({ attributes, className }) {
collection-text-color={ collectionTextColor }
max-items-number={ maxItemsNumber }
max-items-per-screen={ maxItemsPerScreen }
space-between-items={ spaceBetweenItems }
space-around-carousel={ spaceAroundCarousel }
tainacan-api-root={ tainacan_blocks.root }
tainacan-base-url={ tainacan_blocks.base_url }
id={ 'wp-block-tainacan-carousel-items-list_' + blockId }>

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

@ -147,7 +147,7 @@
left: -20px;
.swiper-container {
margin: 0 50px;
margin: 0 var(--spaceAroundCarousel, 50px);
a>span,
a:hover>span {
@ -168,6 +168,14 @@
color: inherit;
text-decoration: none;
}
.is-forced-square>a>div {
padding-bottom: 100% !important;
img {
object-fit: cover;
object-position: center;
}
}
}
}
@ -189,12 +197,14 @@
background: none;
background-color: transparent !important;
border: none;
width: 42px;
min-width: 42px;
width: calc(var(--spaceAroundCarousel) - 8px);
height: 42px;
padding: 0;
margin: 0;
svg {
border-radius: 100%;
fill: var(--tainacan-block-primary, $primary);
}
&::after,
@ -202,9 +212,14 @@
content: none !important;
}
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
opacity: 0;
visibility: hidden;
}
&.alignfull .swiper-button-prev,
&.alignfull .swiper-button-next {
margin: 0 6px;
margin: 0 6px !important;
}
// Carousel placeholder on editor side ----------------------------------------------------
@ -236,7 +251,8 @@
&.has-large-arrows .swiper-button-prev,
&.has-large-arrows .swiper-button-next {
top: calc(50% - 60px);
width: 60px;
min-width: 60px;
width: calc(var(--spaceAroundCarousel) + 10px);
height: 60px;
margin: 0 -24px;
}
@ -258,7 +274,7 @@
align-items: flex-start;
overflow-x: scroll;
list-style: none;
margin: 0 50px;
margin: 0 var(--spaceAroundCarousel, 50px);
padding: 0;
scroll-snap-type: x mandatory;
scroll-padding-left: 10px;
@ -266,16 +282,26 @@
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;
font-weight: bold;
line-height: normal;
&>span {
color: inherit;
font-weight: bold;
text-decoration: none;
padding: 8px 12px;
display: block;
line-height: 1.2em;
word-break: break-word;
}
}
img {
@ -285,6 +311,29 @@
margin-bottom: 0.5em;
}
&.is-forced-square {
.items-list-item--image-wrap {
padding-top: 100%;
display: block;
content: '';
width: 100%;
position: relative;
}
img {
display: block;
padding: 0px;
margin-bottom: 0.5em;
object-fit: cover;
position: absolute;
height: 100%;
width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
&:hover a {
color: inherit;
text-decoration: none;
@ -325,206 +374,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,
@ -532,8 +581,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) );
}
}
}

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

@ -32,8 +32,11 @@ export default (element) => {
loadStrategy: 'search',
maxItemsNumber: 12,
maxItemsPerScreen: 7,
spaceBetweenItems: 32,
spaceAroundCarousel: 50,
arrowsPosition: 'around',
largeArrows: false,
arrowsStyle: 'type-1',
autoPlay: false,
autoPlaySpeed: 3,
loopSlides: false,
@ -58,8 +61,11 @@ export default (element) => {
loadStrategy: this.loadStrategy,
maxItemsNumber: this.maxItemsNumber,
maxItemsPerScreen: this.maxItemsPerScreen,
spaceBetweenItems: this.spaceBetweenItems,
spaceAroundCarousel: this.spaceAroundCarousel,
arrowsPosition: this.arrowsPosition,
largeArrows: this.largeArrows,
arrowsStyle: this.arrowsStyle,
autoPlay: this.autoPlay,
autoPlaySpeed: this.autoPlaySpeed,
loopSlides: this.loopSlides,
@ -84,8 +90,11 @@ 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.spaceAroundCarousel = this.$el.attributes['space-around-carousel'] != undefined ? this.$el.attributes['space-around-carousel'].value : 50;
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;
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.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false;

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

@ -9,7 +9,6 @@
:style="{ height: '165px' }"/>
<a
v-else
target="_blank"
:href="collection.url ? collection.url : ''"
class="carousel-items-collection-header">
<div
@ -51,6 +50,7 @@
<div v-if="!isLoading">
<div
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') "
:style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
v-if="items.length > 0">
<swiper
role="list"
@ -64,11 +64,11 @@
ref="myItemSwiperSlide"
:key="index"
v-for="(item, index) of items"
class="item-list-item">
class="item-list-item"
:class="{ 'is-forced-square': cropImagesToSquare }">
<a
:id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
:href="item.url"
target="_blank">
:href="item.url">
<blur-hash-image
:height="$thumbHelper.getHeight(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'))"
:width="$thumbHelper.getWidth(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'))"
@ -90,10 +90,15 @@
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path
v-if="arrowsStyle === 'type-2'"
d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
<path
v-else
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
fill="none"/>
</svg>
</button>
<button
@ -105,10 +110,15 @@
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path
v-if="arrowsStyle === 'type-2'"
d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
<path
v-else
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
fill="none"/>
</svg>
</button>
</div>
@ -119,11 +129,13 @@
</div>
<!-- Swiper buttons are hidden as they actually swipe from slide to slide -->
</div>
<div v-else-if="isLoading && !autoPlay && !loopSlides">
<div :class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') ">
<div v-else>
<div
:style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
: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'
@ -149,10 +161,15 @@
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path
v-if="arrowsStyle === 'type-2'"
d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
<path
v-else
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
fill="none"/>
</svg>
</button>
<button
@ -164,10 +181,15 @@
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path
v-if="arrowsStyle === 'type-2'"
d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
<path
v-else
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
fill="none"/>
</svg>
</button>
</div>
@ -195,8 +217,11 @@ export default {
loadStrategy: String,
maxItemsNumber: Number,
maxItemsPerScreen: Number,
spaceBetweenItems: Number,
spaceAroundCarousel: Number,
arrowsPosition: String,
largeArrows: Boolean,
arrowsStyle: String,
autoPlay: false,
autoPlaySpeed: Number,
loopSlides: Boolean,
@ -234,18 +259,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
@ -265,11 +290,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;
}

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

@ -41,6 +41,14 @@
"type": "Number",
"value": 6
},
"spaceBetweenTerms": {
"type": "Number",
"value": 32
},
"spaceAroundCarousel": {
"type": "Number",
"value": 50
},
"isLoading": {
"type": "Boolean",
"value": false
@ -57,6 +65,10 @@
"type": "Boolean",
"value": false
},
"arrowsStyle": {
"type": "String",
"value": "type-1"
},
"autoPlay": {
"type": "Boolean",
"value": false

145
src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/deprecated.js
View File

@ -1,4 +1,149 @@
const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
export default [
/* Deprecated on Tainacan 0.18.6 due to arrowsStyle option */
{
"attributes": {
"content": {
"type": "Array",
"source": "children",
"selector": "div"
},
"terms": {
"type": "Array",
"default": []
},
"isModalOpen": {
"type": "Boolean",
"default": false
},
"selectedTerms": {
"type": "Array",
"default": []
},
"itemsRequestSource": {
"type": "String",
"default": ""
},
"maxTermsNumber": {
"type": "Number",
"value": 12
},
"maxTermsPerScreen": {
"type": "Number",
"value": 6
},
"isLoading": {
"type": "Boolean",
"value": false
},
"isLoadingTerm": {
"type": "Boolean",
"value": false
},
"arrowsPosition": {
"type": "String",
"value": "around"
},
"largeArrows": {
"type": "Boolean",
"value": false
},
"autoPlay": {
"type": "Boolean",
"value": false
},
"autoPlaySpeed": {
"type": "Number",
"value": 3
},
"loopSlides": {
"type": "Boolean",
"value": false
},
"hideName": {
"type": "Boolean",
"value": true
},
"showTermThumbnail": {
"type": "Boolean",
"value": false
},
"term": {
"type": "Object",
"value": {}
},
"blockId": {
"type": "String",
"default": ""
},
"termBackgroundColor": {
"type": "String",
"default": "#454647"
},
"termTextColor": {
"type": "String",
"default": "#ffffff"
},
"taxonomyId": {
"type": "String",
"default": ""
}
},
"supports": {
"align": ["full", "wide"],
"html": false,
"multiple": true,
"typography": {
"fontSize": true
},
"color": {
"text": true,
"background": false,
"gradients": false,
"link": true
}
},
save({ attributes, className }) {
const {
content,
blockId,
selectedTerms,
arrowsPosition,
largeArrows,
maxTermsPerScreen,
maxTermsNumber,
autoPlay,
autoPlaySpeed,
loopSlides,
hideName,
showTermThumbnail,
taxonomyId
} = attributes;
// Gets attributes such as style, that are automatically added by the editor hook
const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
return <div
{ ...blockProps }
data-module="carousel-terms-list"
selected-terms={ JSON.stringify(selectedTerms.map((term) => { return term.id; })) }
arrows-position={ arrowsPosition }
auto-play={ '' + autoPlay }
auto-play-speed={ autoPlaySpeed }
loop-slides={ '' + loopSlides }
hide-name={ '' + hideName }
large-arrows={ '' + largeArrows }
max-terms-number={ maxTermsNumber }
max-terms-per-screen={ maxTermsPerScreen }
taxonomy-id={ taxonomyId }
tainacan-api-root={ tainacan_blocks.root }
tainacan-base-url={ tainacan_blocks.base_url }
show-term-thumbnail={ '' + showTermThumbnail }
id={ 'wp-block-tainacan-carousel-terms-list_' + blockId }>
{ content }
</div>
}
},
/* Deprecated on Tainacan 0.18.4 due to the new block.json strategy */
{
attributes: {

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

@ -21,7 +21,10 @@ export default function({ attributes, setAttributes, className, isSelected, clie
selectedTerms,
isLoading,
largeArrows,
arrowsStyle,
maxTermsPerScreen,
spaceBetweenTerms,
spaceAroundCarousel,
arrowsPosition,
autoPlay,
autoPlaySpeed,
@ -63,8 +66,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
}
<a
id={ isNaN(term.id) ? term.id : 'term-id-' + term.id }
href={ term.url }
target="_blank">
href={ term.url }>
{ !showTermThumbnail ?
<div class="term-items-grid">
<img
@ -249,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')}
@ -306,7 +318,18 @@ export default function({ attributes, setAttributes, className, isSelected, clie
arrowsPosition = aPosition;
setAttributes({ arrowsPosition: arrowsPosition });
}}/>
}}/>
<SelectControl
label={__('Arrows icon style', 'tainacan')}
value={ arrowsStyle }
options={ [
{ label: __('Default', 'tainacan'), value: 'type-1' },
{ label: __('Alternative', 'tainacan'), value: 'type-2' }
] }
onChange={ ( aStyle ) => {
arrowsStyle = aStyle;
setAttributes({ arrowsStyle: arrowsStyle });
}}/>
<ToggleControl
label={__('Large arrows', 'tainacan')}
help={ !largeArrows ? __('Toggle to display arrows bigger than the default size.', 'tainacan') : __('Do not show arrows bigger than the default size.', 'tainacan')}
@ -316,7 +339,17 @@ export default function({ attributes, setAttributes, className, isSelected, clie
setAttributes({ largeArrows: largeArrows });
}
}
/>
/>
<RangeControl
label={ __('Space around the carousel', 'tainacan') }
value={ !isNaN(spaceAroundCarousel) ? spaceAroundCarousel : 50 }
onChange={ ( aSpaceAroundCarousel ) => {
spaceAroundCarousel = aSpaceAroundCarousel;
setAttributes( { spaceAroundCarousel: aSpaceAroundCarousel } );
}}
min={ 0 }
max={ 200 }
/>
</PanelBody>
</InspectorControls>
</div>
@ -390,7 +423,11 @@ 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',
'--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px'
}}>
<button
class="swiper-button-prev"
slot="button-prev"
@ -399,7 +436,12 @@ export default function({ attributes, setAttributes, className, isSelected, clie
width={ largeArrows ? 60 : 42 }
height={ largeArrows ? 60 : 42 }
viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
{
arrowsStyle === 'type-2' ?
<path d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
:
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
}
<path
d="M0 0h24v24H0z"
fill="none"/>
@ -416,7 +458,12 @@ export default function({ attributes, setAttributes, className, isSelected, clie
width={ largeArrows ? 60 : 42 }
height={ largeArrows ? 60 : 42 }
viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
{
arrowsStyle === 'type-2' ?
<path d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
:
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
}
<path
d="M0 0h24v24H0z"
fill="none"/>

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

@ -7,8 +7,11 @@ export default function({ attributes, className }) {
selectedTerms,
arrowsPosition,
largeArrows,
arrowsStyle,
maxTermsPerScreen,
maxTermsNumber,
spaceBetweenTerms,
spaceAroundCarousel,
autoPlay,
autoPlaySpeed,
loopSlides,
@ -29,8 +32,11 @@ export default function({ attributes, className }) {
loop-slides={ '' + loopSlides }
hide-name={ '' + hideName }
large-arrows={ '' + largeArrows }
arrows-style={ arrowsStyle }
max-terms-number={ maxTermsNumber }
max-terms-per-screen={ maxTermsPerScreen }
space-between-terms={ spaceBetweenTerms }
space-around-carousel={ spaceAroundCarousel }
taxonomy-id={ taxonomyId }
tainacan-api-root={ tainacan_blocks.root }
tainacan-base-url={ tainacan_blocks.base_url }

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

@ -135,7 +135,7 @@
left: -20px;
.swiper-container {
margin: 0 50px;
margin: 0 var(--spaceAroundCarousel, 50px);
a>span,
a:hover>span {
@ -212,12 +212,14 @@
background: none;
background-color: transparent !important;
border: none;
width: 42px;
min-width: 42px;
width: calc(var(--spaceAroundCarousel) - 8px);
height: 42px;
padding: 0;
margin: 0;
svg {
border-radius: 100%;
fill: var(--tainacan-block-primary, $primary);
}
&::after,
@ -225,9 +227,14 @@
content: none !important;
}
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
opacity: 0;
visibility: hidden;
}
&.alignfull .swiper-button-prev,
&.alignfull .swiper-button-next {
margin: 0 6px;
margin: 0 6px !important;
}
// Carousel placeholder on editor side ----------------------------------------------------
@ -235,7 +242,7 @@
.tainacan-carousel {
position: relative;
& .skeleton {
.skeleton {
min-height: 150px;
max-height: 260px;
}
@ -259,7 +266,8 @@
&.has-large-arrows .swiper-button-prev,
&.has-large-arrows .swiper-button-next {
top: calc(50% - 60px);
width: 60px;
min-width: 60px;
width: calc(var(--spaceAroundCarousel) + 10px);
height: 60px;
margin: 0 -24px;
}
@ -281,7 +289,7 @@
align-items: flex-start;
overflow-x: scroll;
list-style: none;
margin: 0 50px;
margin: 0 var(--spaceAroundCarousel, 50px);
padding: 0;
scroll-snap-type: x mandatory;
scroll-padding-left: 10px;
@ -289,16 +297,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 +373,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 +432,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 +598,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));
}
}
}

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

@ -32,7 +32,10 @@ export default (element) => {
autoPlay: false,
autoPlaySpeed: 3,
largeArrows: false,
arrowsStyle: 'type-1',
maxTermsPerScreen: 6,
spaceBetweenTerms: 32,
spaceAroundCarousel: 50,
loopSlides: false,
hideName: true,
showTermThumbnail: false,
@ -53,7 +56,10 @@ export default (element) => {
autoPlaySpeed: this.autoPlaySpeed,
loopSlides: this.loopSlides,
largeArrows: this.largeArrows,
arrowsStyle: this.arrowsStyle,
maxTermsPerScreen: this.maxTermsPerScreen,
spaceBetweenTerms: this.spaceBetweenTerms,
spaceAroundCarousel: this.spaceAroundCarousel,
hideName: this.hideName,
showTermThumbnail: this.showTermThumbnail,
tainacanApiRoot: this.tainacanApiRoot,
@ -72,7 +78,10 @@ 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.spaceAroundCarousel = this.$el.attributes['space-around-carousel'] != undefined ? this.$el.attributes['space-around-carousel'].value : 50;
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;
this.hideName = this.$el.attributes['hide-name'] != undefined ? this.$el.attributes['hide-name'].value == 'true' : false;
this.taxonomyId = this.$el.attributes['taxonomy-id'] != undefined ? this.$el.attributes['taxonomy-id'].value : undefined;

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

@ -5,6 +5,7 @@
<div v-if="!isLoading">
<div
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '')"
:style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
v-if="terms.length > 0">
<swiper
role="list"
@ -18,8 +19,7 @@
<a
v-if="showTermThumbnail"
:id="isNaN(term.id) ? term.id : 'term-id-' + term.id"
:href="term.url"
target="_blank">
:href="term.url">
<img
:src="term.header_image ? term.header_image : `${tainacanBaseUrl}/assets/images/placeholder_square.png`"
:alt="term.name ? term.name : $root.__('Thumbnail', 'tainacan')" >
@ -28,8 +28,7 @@
<a
v-else
:id="isNaN(term.id) ? term.id : 'term-id-' + term.id"
:href="term.url"
target="_blank">
:href="term.url">
<div class="term-items-grid">
<blur-hash-image
:height="termItems[term.id][2] ? $thumbHelper.getHeight(termItems[term.id][0]['thumbnail'], 'tainacan-medium') : 275"
@ -69,7 +68,12 @@
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path
v-if="arrowsStyle === 'type-2'"
d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
<path
v-else
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
@ -84,7 +88,12 @@
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path
v-if="arrowsStyle === 'type-2'"
d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
<path
v-else
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
@ -98,17 +107,19 @@
</div>
<!-- Swiper buttons are hidden as they actually swipe from slide to slide -->
</div>
<div v-else-if="isLoading && !autoPlay && !loopSlides">
<div :class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') ">
<div v-else>
<div
:style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') ">
<swiper
role="list"
ref="myTermSwiper"
:options="swiperOptions">
:options="{ ...JSON.parse(JSON.stringify(swiperOptions)), autoplay: false, loop: false }">
<swiper-slide
role="listitem"
:key="index"
v-for="(term, index) of 18"
class="term-list-item skeleton">
class="term-list-item skeleton">
<a>
<img>
<span v-if="!hideName" />
@ -124,10 +135,15 @@
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path
v-if="arrowsStyle === 'type-2'"
d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
<path
v-else
d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
fill="none"/>
</svg>
</button>
<button
@ -139,10 +155,15 @@
:width="largeArrows ? 60 : 42"
:height="largeArrows ? 60 : 42"
viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path
v-if="arrowsStyle === 'type-2'"
d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
<path
v-else
d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
<path
d="M0 0h24v24H0z"
fill="none"/>
fill="none"/>
</svg>
</button>
</div>
@ -171,8 +192,11 @@ export default {
autoPlaySpeed: Number,
loopSlides: Boolean,
maxTermsPerScreen: Number,
spaceBetweenTerms: Number,
spaceAroundCarousel: Number,
hideName: Boolean,
largeArrows: Boolean,
arrowsStyle: String,
showTermThumbnail: Boolean,
tainacanApiRoot: String,
tainacanBaseUrl: String,
@ -193,7 +217,7 @@ export default {
paged: undefined,
totalTerms: 0,
swiperOptions: {
watchOverflow: true,
watchOverflow: false,
mousewheel: {
forceToAxis: true
},
@ -203,18 +227,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
@ -231,11 +255,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;
}
@ -267,7 +291,7 @@ export default {
this.tainacanAxios.get('/items/?perpage=3&fetch_only=name,url,thumbnail&taxquery[0][taxonomy]=tnc_tax_' + this.taxonomyId + '&taxquery[0][terms][0]=' + term.id + '&taxquery[0][compare]=IN')
.then(response => { return({ termId: term.id, termItems: response.data.items }) })
);
this.terms.push(term);
this.terms.push(term);
}
axios.all(promises).then((results) => {
for (let result of results) {

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

@ -43,8 +43,7 @@ export default function({ attributes, setAttributes, className, isSelected }) {
}
<a
id={ isNaN(collection.id) ? collection.id : 'collection-id-' + collection.id }
href={ collection.url }
target="_blank"
href={ collection.url }
className={ (!showName ? 'collection-without-name' : '') + ' ' + (!showImage ? 'collection-without-image' : '') }>
<img
src={ collection.thumbnail && collection.thumbnail[0] && collection.thumbnail[0].src ? collection.thumbnail[0].src : `${tainacan_blocks.base_url}/assets/images/placeholder_square.png`}

8
src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/edit.js
View File

@ -95,13 +95,14 @@ export default function({ attributes, setAttributes, className, isSelected, clie
id={ isNaN(item.id) ? item.id : 'item-id-' + item.id }
href={ item.url }
onClick={ (event) => event.preventDefault() }
target="_blank"
className={ (!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '') }>
<img
src={ thumbHelper.getSrc(item['thumbnail'], ( (layout == 'list' || cropImagesToSquare) ? 'tainacan-medium' : 'tainacan-medium-full'), item['document_mimetype']) }
srcSet={ thumbHelper.getSrcSet(item['thumbnail'], ( (layout == 'list' || cropImagesToSquare) ? 'tainacan-medium' : 'tainacan-medium-full'), item['document_mimetype']) }
alt={ item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : __( 'Thumbnail', 'tainacan' )) }/>
<span>{ item.title ? item.title : '' }</span>
{ item.title ?
<span>{ item.title }</span>
: null }
</a>
</li>
);
@ -759,7 +760,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
{ label: '4 x 3', value: '4x3' },
{ label: '4 x 5', value: '4x5' },
{ label: '5 x 4', value: '5x4' },
{ label: '6 x 5', value: '6x5' },
{ label: '6 x 2', value: '6x2' }
] }
onChange={ ( aGrid ) => {
mosaicGridRows = aGrid.split('x')[0];
@ -848,7 +849,6 @@ export default function({ attributes, setAttributes, className, isSelected, clie
:
<a
href={ collection.url ? collection.url : '' }
target="_blank"
class="dynamic-items-collection-header">
<div
style={{

86
src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/style.scss
View File

@ -958,6 +958,7 @@
grid-column: span 2;
}
}
// 5 x 4 MOSAIC GRID ------------------------
&.mosaic-container--1-5x4 {
li.item-list-item {
@ -1037,6 +1038,91 @@
grid-column: span 1;
}
}
// 6 x 2 MOSAIC GRID ------------------------
&.mosaic-container--1-6x2 {
li.item-list-item {
grid-row: span 6;
grid-column: span 2;
}
}
&.mosaic-container--2-6x2 li.item-list-item {
&:nth-of-type(1) {
grid-row: span 4;
grid-column: span 2;
}
&:nth-of-type(2) {
grid-row: span 2;
grid-column: span 2;
}
}
&.mosaic-container--3-6x2 li.item-list-item {
&:nth-of-type(1) {
grid-row: span 2;
grid-column: span 2;
}
&:nth-of-type(2) {
grid-row: span 3;
grid-column: span 2;
}
&:nth-of-type(3) {
grid-row: span 1;
grid-column: span 2;
}
}
&.mosaic-container--4-6x2 li.item-list-item {
&:nth-of-type(1),
&:nth-of-type(3) {
grid-row: span 3;
grid-column: span 1;
}
&:nth-of-type(2),
&:nth-of-type(4) {
grid-row: span 2;
grid-column: span 1;
}
}
&.mosaic-container--5-6x2 li.item-list-item {
&:nth-of-type(1) {
grid-row: span 5;
grid-column: span 1;
}
&:nth-of-type(3),
&:nth-of-type(2) {
grid-row: span 4;
grid-column: span 1;
}
&:nth-of-type(4) {
grid-row: span 6;
grid-column: span 1;
}
&:nth-of-type(5) {
grid-row: span 3;
grid-column: span 1;
}
}
&.mosaic-container--6-6x2 li.item-list-item {
&:nth-of-type(1),
&:nth-of-type(2),
&:nth-of-type(4),
&:nth-of-type(6) {
grid-row: span 2;
grid-column: span 1;
}
&:nth-of-type(3) {
grid-row: span 1;
grid-column: span 1;
}
&:nth-of-type(5) {
grid-row: span 3;
grid-column: span 1;
}
}
}
}
@media only screen and (max-width: 1024px) {

7
src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/theme.vue
View File

@ -9,7 +9,6 @@
:style="{ height: '165px' }"/>
<a
v-else
target="_blank"
:href="collection.url ? collection.url : ''"
class="dynamic-items-collection-header">
<div
@ -204,7 +203,6 @@
<a
:id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
:href="item.url"
target="_blank"
:class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
<blur-hash-image
v-if="showImage"
@ -215,7 +213,7 @@
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))"
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))"
:transition-duration="500" />
<span>{{ item.title ? item.title : '' }}</span>
<span v-if="item.title">{{ item.title }}</span>
</a>
</li>
</ul>
@ -252,7 +250,6 @@
<a
:id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
:href="item.url"
target="_blank"
:class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
<blur-hash-image
:height="$thumbHelper.getHeight(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))"
@ -262,7 +259,7 @@
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))"
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))"
:transition-duration="500" />
<span>{{ item.title ? item.title : '' }}</span>
<span v-if="item.title">{{ item.title }}</span>
</a>
</li>
</div>

1
src/views/gutenberg-blocks/tainacan-blocks/facets-list/edit.js
View File

@ -99,7 +99,6 @@ export default function({ attributes, setAttributes, className, isSelected, clie
id={ isNaN(facetId) ? facetId : 'facet-id-' + facetId }
href={ !appendChildTerms ? ((linkTermFacetsToTermPage && isMetadatumTypeTaxonomy(metadatumType)) ? facet.term_url : facet.url) : (facet.total_children > 0 ? null : (linkTermFacetsToTermPage ? facet.term_url : facet.url)) }
onClick={ () => { (appendChildTerms && facet.total_children > 0) ? displayChildTerms(facetId) : null } }
target="_blank"
style={{ fontSize: layout == 'cloud' && facet.total_items ? + (1 + (cloudRate/4) * Math.log(facet.total_items)) + 'em' : ''}}>
{ isMetadatumTypeTaxonomy(metadatumType) ?
<img

1
src/views/gutenberg-blocks/tainacan-blocks/facets-list/facet-unit.vue
View File

@ -6,7 +6,6 @@
:id="isNaN(facetId) ? facetId : 'facet-id-' + facetId"
:href="(appendChildTerms && facet.total_children > 0) ? null : ((linkTermFacetsToTermPage && isMetadatumTypeTaxonomy) ? facet.term_url : facet.url)"
@click="() => { (appendChildTerms && facet.total_children > 0) ? displayChildTerms(facetId) : null }"
target="_blank"
:style="{ fontSize: layout == 'cloud' && facet.total_items ? + (1 + (cloudRate/4) * Math.log(facet.total_items)) + 'em' : ''}">
<img
v-if="isMetadatumTypeTaxonomy"

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

@ -43,8 +43,7 @@ export default function({ attributes, setAttributes, className, isSelected }) {
}
<a
id={ isNaN(item.id) ? item.id : 'item-id-' + item.id }
href={ item.url }
target="_blank"
href={ item.url }
className={ (!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '') }>
<img
src={ item.thumbnail && item.thumbnail[0] && item.thumbnail[0].src ? item.thumbnail[0].src : `${tainacan_blocks.base_url}/assets/images/placeholder_square.png`}

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

@ -41,8 +41,7 @@ export default function({ attributes, setAttributes, className, isSelected }){
}
<a
id={ isNaN(term.id) ? term.id : 'term-id-' + term.id }
href={ term.url }
target="_blank"
href={ term.url }
className={ (!showName ? 'term-without-name' : '') + ' ' + (!showImage ? 'term-without-image' : '') }>
<img
src={ term.header_image && term.header_image[0] && term.header_image[0].src ? term.header_image[0].src : `${tainacan_blocks.base_url}/assets/images/placeholder_square.png`}