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

Adds mosaic grid columns and rows options.

This commit is contained in:
Mateus Machado Luna 2019-11-11 15:12:50 -03:00
parent 4371f9e7a7
commit 323310641d
4 changed files with 631 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -548,55 +548,278 @@
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item:hover a {
color: #454647;
text-decoration: none; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--1 li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--1 li.item-list-item {
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--1-3x3 li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--1-3x3 li.item-list-item {
grid-row: span 3;
grid-column: span 3; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--2 li.item-list-item:first-of-type,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--2 li.item-list-item:first-of-type {
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--2-3x3 li.item-list-item:first-of-type,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--2-3x3 li.item-list-item:first-of-type {
grid-row: span 1;
grid-column: span 3; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--2 li.item-list-item:last-of-type,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--2 li.item-list-item:last-of-type {
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--2-3x3 li.item-list-item:last-of-type,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--2-3x3 li.item-list-item:last-of-type {
grid-row: span 2;
grid-column: span 3; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3 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 li.item-list-item:nth-of-type(1) {
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-3x3 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-3x3 li.item-list-item:nth-of-type(1) {
grid-row: span 2;
grid-column: span 3; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3 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 li.item-list-item:nth-of-type(3) {
grid-column: span 2;
grid-row: span 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4 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 li.item-list-item:nth-of-type(1) {
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-3x3 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-3x3 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-3x3 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-3x3 li.item-list-item:nth-of-type(1) {
grid-row: span 2;
grid-column: span 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-3x3 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-3x3 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--4-3x3 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-3x3 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--5-3x3 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-3x3 li.item-list-item:nth-of-type(1) {
grid-row: span 1;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-3x3 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-3x3 li.item-list-item:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-3x3 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-3x3 li.item-list-item:nth-of-type(3) {
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-3x3 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-3x3 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-3x3 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-3x3 li.item-list-item:nth-of-type(6) {
grid-row: span 1;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--1-3x4 li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--1-3x4 li.item-list-item {
grid-row: span 3;
grid-column: span 4; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--2-3x4 li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--2-3x4 li.item-list-item {
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-3x4 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-3x4 li.item-list-item:nth-of-type(1) {
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-3x4 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-3x4 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-3x4 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-3x4 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-3x4 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-3x4 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-3x4 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-3x4 li.item-list-item:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-3x4 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-3x4 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-3x4 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-3x4 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--5-3x4 li.item-list-item:nth-of-type(1), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-3x4 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-3x4 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-3x4 li.item-list-item:nth-of-type(3) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-3x4 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-3x4 li.item-list-item:nth-of-type(2) {
grid-row: span 1;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-3x4 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-3x4 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-3x4 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-3x4 li.item-list-item:nth-of-type(6) {
grid-row: span 1;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-3x4 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-3x4 li.item-list-item:nth-of-type(3) {
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-3x4 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-3x4 li.item-list-item:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--1-4x3 li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--1-4x3 li.item-list-item {
grid-row: span 4;
grid-column: span 3; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--2-4x3 li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--2-4x3 li.item-list-item {
grid-row: span 2;
grid-column: span 3; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-4x3 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-4x3 li.item-list-item:nth-of-type(1) {
grid-row: span 2;
grid-column: span 3; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-4x3 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-4x3 li.item-list-item:nth-of-type(2) {
grid-row: span 2;
grid-column: span 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-4x3 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-4x3 li.item-list-item:nth-of-type(3) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-4x3 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-4x3 li.item-list-item:nth-of-type(1) {
grid-row: span 2;
grid-column: span 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-4x3 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-4x3 li.item-list-item:nth-of-type(2) {
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-4x3 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-4x3 li.item-list-item:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-4x3 li.item-list-item:nth-of-type(2), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-4x3 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-4x3 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-4x3 li.item-list-item:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-4x3 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-4x3 li.item-list-item:nth-of-type(5) {
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-4x3 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-4x3 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--6-4x3 li.item-list-item:nth-of-type(3), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-4x3 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-4x3 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-4x3 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-4x3 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-4x3 li.item-list-item:nth-of-type(5) {
grid-row: span 1;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--1-4x5 li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--1-4x5 li.item-list-item {
grid-row: span 4;
grid-column: span 5; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--2-4x5 li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--2-4x5 li.item-list-item {
grid-row: span 2;
grid-column: span 5; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-4x5 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-4x5 li.item-list-item:nth-of-type(1) {
grid-row: span 2;
grid-column: span 5; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-4x5 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-4x5 li.item-list-item:nth-of-type(2) {
grid-row: span 2;
grid-column: span 3; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-4x5 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-4x5 li.item-list-item:nth-of-type(3) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-4x5 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-4x5 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-4x5 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-4x5 li.item-list-item:nth-of-type(4) {
grid-row: span 2;
grid-column: span 3; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-4x5 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-4x5 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-4x5 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-4x5 li.item-list-item:nth-of-type(3) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-4x5 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-4x5 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-4x5 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-4x5 li.item-list-item:nth-of-type(5) {
grid-row: span 2;
grid-column: span 3; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-4x5 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-4x5 li.item-list-item:nth-of-type(4) {
grid-row: span 3;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-4x5 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-4x5 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--6-4x5 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-4x5 li.item-list-item:nth-of-type(3) {
grid-row: span 3;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-4x5 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-4x5 li.item-list-item:nth-of-type(5) {
grid-row: span 2;
grid-column: span 3; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-4x5 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-4x5 li.item-list-item:nth-of-type(6) {
grid-row: span 1;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--1-5x4 li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--1-5x4 li.item-list-item {
grid-row: span 5;
grid-column: span 4; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--2-5x4 li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--2-5x4 li.item-list-item {
grid-row: span 5;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-5x4 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-5x4 li.item-list-item:nth-of-type(1) {
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-5x4 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-5x4 li.item-list-item:nth-of-type(2) {
grid-row: span 5;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--3-5x4 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-5x4 li.item-list-item:nth-of-type(3) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-5x4 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-5x4 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-5x4 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-5x4 li.item-list-item:nth-of-type(3) {
grid-row: span 3;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4-5x4 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-5x4 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-5x4 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-5x4 li.item-list-item:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-5x4 li.item-list-item:nth-of-type(1), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-5x4 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-5x4 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-5x4 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-5x4 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-5x4 li.item-list-item:nth-of-type(5) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-5x4 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-5x4 li.item-list-item:nth-of-type(2) {
grid-row: span 1;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5-5x4 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-5x4 li.item-list-item:nth-of-type(4) {
grid-row: span 3;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-5x4 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-5x4 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-5x4 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-5x4 li.item-list-item:nth-of-type(5) {
grid-row: span 2;
grid-column: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6-5x4 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-5x4 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--6-5x4 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-5x4 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--6-5x4 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-5x4 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-5x4 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-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--4 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 li.item-list-item:nth-of-type(2) {
grid-column: span 2;
grid-row: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--4 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 li.item-list-item:nth-of-type(3) {
grid-column: span 2;
grid-row: span 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5 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 li.item-list-item:nth-of-type(1) {
grid-column: span 2;
grid-row: span 1; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--5 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 li.item-list-item:nth-of-type(4) {
grid-column: span 2;
grid-row: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6 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 li.item-list-item:nth-of-type(3) {
grid-column: span 1;
grid-row: span 2; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--6 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 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 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 li.item-list-item:nth-of-type(6) {
grid-column: span 2;
grid-row: 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

318
src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list.scss
View File

@ -458,13 +458,14 @@
text-decoration: none;
}
}
&.mosaic-container--1 {
// 3 x 3 MOSAIC GRID ------------------------
&.mosaic-container--1-3x3 {
li.item-list-item {
grid-row: span 3;
grid-column: span 3;
}
}
&.mosaic-container--2 {
&.mosaic-container--2-3x3 {
li.item-list-item:first-of-type {
grid-row: span 1;
grid-column: span 3;
@ -474,53 +475,344 @@
grid-column: span 3;
}
}
&.mosaic-container--3 li.item-list-item {
&.mosaic-container--3-3x3 li.item-list-item {
&:nth-of-type(1) {
grid-row: span 2;
grid-column: span 3;
}
&:nth-of-type(3) {
grid-column: span 2;
grid-row: span 1;
grid-column: span 2;
}
}
&.mosaic-container--4 li.item-list-item {
&.mosaic-container--4-3x3 li.item-list-item {
&:nth-of-type(1) {
grid-row: span 2;
grid-column: span 1;
}
&:nth-of-type(2) {
grid-column: span 2;
grid-row: span 2;
grid-column: span 2;
}
&:nth-of-type(3) {
grid-column: span 2;
grid-row: span 1;
grid-column: span 2;
}
}
&.mosaic-container--5 li.item-list-item {
&.mosaic-container--5-3x3 li.item-list-item {
&:nth-of-type(1) {
grid-column: span 2;
grid-row: span 1;
grid-column: span 2;
}
&:nth-of-type(4) {
grid-column: span 2;
grid-row: span 2;
grid-column: span 2;
}
}
&.mosaic-container--6 li.item-list-item {
&.mosaic-container--6-3x3 li.item-list-item {
&:nth-of-type(3) {
grid-column: span 1;
grid-row: span 2;
grid-column: span 1;
}
&:nth-of-type(4),
&:nth-of-type(6) {
grid-column: span 2;
grid-row: span 1;
grid-column: span 2;
}
}
// 3 x 4 MOSAIC GRID ------------------------
&.mosaic-container--1-3x4 {
li.item-list-item {
grid-row: span 3;
grid-column: span 4;
}
}
&.mosaic-container--2-3x4 {
li.item-list-item {
grid-row: span 3;
grid-column: span 2;
}
}
&.mosaic-container--3-3x4 li.item-list-item {
&:nth-of-type(1) {
grid-row: span 3;
grid-column: span 2;
}
&:nth-of-type(2) {
grid-row: span 2;
grid-column: span 2;
}
&:nth-of-type(3) {
grid-row: span 1;
grid-column: span 2;
}
}
&.mosaic-container--4-3x4 li.item-list-item {
&:nth-of-type(1),
&:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2;
}
&:nth-of-type(2),
&:nth-of-type(3) {
grid-row: span 1;
grid-column: span 2;
}
}
&.mosaic-container--5-3x4 li.item-list-item {
&:nth-of-type(1),
&:nth-of-type(3) {
grid-row: span 2;
grid-column: span 2;
}
&:nth-of-type(2) {
grid-row: span 1;
grid-column: span 2;
}
}
&.mosaic-container--6-3x4 li.item-list-item {
&:nth-of-type(2),
&:nth-of-type(6) {
grid-row: span 1;
grid-column: span 2;
}
&:nth-of-type(3) {
grid-row: span 2;
grid-column: span 1;
}
&:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2;
}
}
// 4 x 3 MOSAIC GRID ------------------------
&.mosaic-container--1-4x3 {
li.item-list-item {
grid-row: span 4;
grid-column: span 3;
}
}
&.mosaic-container--2-4x3 {
li.item-list-item {
grid-row: span 2;
grid-column: span 3;
}
}
&.mosaic-container--3-4x3 li.item-list-item {
&:nth-of-type(1) {
grid-row: span 2;
grid-column: span 3;
}
&:nth-of-type(2) {
grid-row: span 2;
grid-column: span 1;
}
&:nth-of-type(3) {
grid-row: span 2;
grid-column: span 2;
}
}
&.mosaic-container--4-4x3 li.item-list-item {
&:nth-of-type(1) {
grid-row: span 2;
grid-column: span 1;
}
&:nth-of-type(2) {
grid-row: span 1;
grid-column: span 2;
}
&:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2;
}
}
&.mosaic-container--5-4x3 li.item-list-item {
&:nth-of-type(2),
&:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2;
}
&:nth-of-type(5) {
grid-row: span 2;
grid-column: span 1;
}
}
&.mosaic-container--6-4x3 li.item-list-item {
&:nth-of-type(2) {
grid-row: span 2;
grid-column: span 2;
}
&:nth-of-type(3),
&:nth-of-type(6) {
grid-row: span 2;
grid-column: span 1;
}
&:nth-of-type(5) {
grid-row: span 1;
grid-column: span 2;
}
}
// 4 x 5 MOSAIC GRID ------------------------
&.mosaic-container--1-4x5 {
li.item-list-item {
grid-row: span 4;
grid-column: span 5;
}
}
&.mosaic-container--2-4x5 {
li.item-list-item {
grid-row: span 2;
grid-column: span 5;
}
}
&.mosaic-container--3-4x5 li.item-list-item {
&:nth-of-type(1) {
grid-row: span 2;
grid-column: span 5;
}
&:nth-of-type(2) {
grid-row: span 2;
grid-column: span 3;
}
&:nth-of-type(3) {
grid-row: span 2;
grid-column: span 2;
}
}
&.mosaic-container--4-4x5 li.item-list-item {
&:nth-of-type(1),
&:nth-of-type(4) {
grid-row: span 2;
grid-column: span 3;
}
&:nth-of-type(2),
&:nth-of-type(3) {
grid-row: span 2;
grid-column: span 2;
}
}
&.mosaic-container--5-4x5 li.item-list-item {
&:nth-of-type(3),
&:nth-of-type(5) {
grid-row: span 2;
grid-column: span 3;
}
&:nth-of-type(4) {
grid-row: span 3;
grid-column: span 2;
}
}
&.mosaic-container--6-4x5 li.item-list-item {
&:nth-of-type(1) {
grid-row: span 2;
grid-column: span 2;
}
&:nth-of-type(3) {
grid-row: span 3;
grid-column: span 2;
}
&:nth-of-type(5) {
grid-row: span 2;
grid-column: span 3;
}
&:nth-of-type(6) {
grid-row: span 1;
grid-column: span 2;
}
}
// 5 x 4 MOSAIC GRID ------------------------
&.mosaic-container--1-5x4 {
li.item-list-item {
grid-row: span 5;
grid-column: span 4;
}
}
&.mosaic-container--2-5x4 {
li.item-list-item {
grid-row: span 5;
grid-column: span 2;
}
}
&.mosaic-container--3-5x4 li.item-list-item {
&:nth-of-type(1) {
grid-row: span 3;
grid-column: span 2;
}
&:nth-of-type(2) {
grid-row: span 5;
grid-column: span 2;
}
&:nth-of-type(3) {
grid-row: span 2;
grid-column: span 2;
}
}
&.mosaic-container--4-5x4 li.item-list-item {
&:nth-of-type(1),
&:nth-of-type(3) {
grid-row: span 3;
grid-column: span 2;
}
&:nth-of-type(2),
&:nth-of-type(4) {
grid-row: span 2;
grid-column: span 2;
}
}
&.mosaic-container--5-5x4 li.item-list-item {
&:nth-of-type(1),
&:nth-of-type(3),
&:nth-of-type(5) {
grid-row: span 2;
grid-column: span 2;
}
&:nth-of-type(2) {
grid-row: span 1;
grid-column: span 2;
}
&:nth-of-type(4) {
grid-row: span 3;
grid-column: span 2;
}
}
&.mosaic-container--6-5x4 li.item-list-item {
&:nth-of-type(1),
&:nth-of-type(5) {
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;
}
&:nth-of-type(4),
&:nth-of-type(6) {
grid-row: span 2;
grid-column: span 1;
}
}
}

83
src/gutenberg-blocks/tainacan-items/dynamic-items-list/index.js
View File

@ -2,7 +2,7 @@ const { registerBlockType } = wp.blocks;
const { __ } = wp.i18n;
const { RangeControl, Spinner, Button, ToggleControl, Tooltip, Placeholder, Toolbar, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
const { SelectControl, RangeControl, Spinner, Button, ToggleControl, Tooltip, Placeholder, Toolbar, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
const { InspectorControls, BlockControls } = wp.editor;
@ -119,6 +119,14 @@ registerBlockType('tainacan/dynamic-items-list', {
mosaicHeight: {
type: Number,
value: 40
},
mosaicGridColumns: {
type: Number,
value: 3
},
mosaicGridRows: {
type: Number,
value: 3
}
},
supports: {
@ -129,6 +137,7 @@ registerBlockType('tainacan/dynamic-items-list', {
let {
items,
content,
collection,
collectionId,
showImage,
showName,
@ -147,7 +156,9 @@ registerBlockType('tainacan/dynamic-items-list', {
isLoadingCollection,
collectionBackgroundColor,
collectionTextColor,
mosaicHeight
mosaicHeight,
mosaicGridColumns,
mosaicGridRows
} = attributes;
// Obtains block's client id to render it on save function
@ -185,13 +196,13 @@ registerBlockType('tainacan/dynamic-items-list', {
style={
{
width: 'calc((100% / ' + mosaicGroupsLength + ') - ' + gridMargin + 'px)',
height: 'calc(((2 * ' + gridMargin + 'px) + ' + mosaicHeight + 'vh))',
gridTemplateColumns: 'repeat(3, calc((100% / 3) - (' + (2*Number(gridMargin)) + 'px/3)))',
height: 'calc(((' + (mosaicGridRows - 1) + ' * ' + gridMargin + 'px) + ' + mosaicHeight + 'vh))',
gridTemplateColumns: 'repeat(' + mosaicGridColumns + ', calc((100% / ' + mosaicGridColumns + ') - (' + ((mosaicGridRows - 1)*Number(gridMargin)) + 'px/' + mosaicGridColumns + ')))',
margin: gridMargin + 'px',
gridGap: gridMargin + 'px',
}
}
className={ 'mosaic-container mosaic-container--' + mosaicGroup.length }>
className={ 'mosaic-container mosaic-container--' + mosaicGroup.length + '-' + mosaicGridRows + 'x' + mosaicGridColumns }>
{ buildMosaic(mosaicGroup) }
</div>
)
@ -256,6 +267,11 @@ registerBlockType('tainacan/dynamic-items-list', {
tainacan.get(endpoint, { cancelToken: itemsRequestSource.token })
.then(response => {
// Initializes some variables
mosaicGridRows = mosaicGridRows ? mosaicGridRows : 3;
mosaicGridColumns = mosaicGridColumns ? mosaicGridColumns : 3;
mosaicHeight = mosaicHeight ? mosaicHeight : 40;
if (layout !== 'mosaic') {
for (let item of response.data.items)
items.push(prepareItem(item));
@ -542,25 +558,52 @@ registerBlockType('tainacan/dynamic-items-list', {
max={ 48 }
/>
</div>
{ layout == 'mosaic' ?
<div style={{ marginTop: '16px'}}>
<RangeControl
label={__('Mosaic container height', 'tainacan')}
value={ mosaicHeight ? mosaicHeight : 40 }
onChange={ ( height ) => {
mosaicHeight = height;
setAttributes( { mosaicHeight: height } );
setContent();
}}
min={ 10 }
max={ 100 }
/>
</div>
: null}
</div>
: null }
</div>
</PanelBody>
{ layout == 'mosaic' ?
<PanelBody
title={__('Mosaic', 'tainacan')}
initialOpen={ true }
>
<div>
<RangeControl
label={__('Mosaic container height', 'tainacan')}
value={ mosaicHeight ? mosaicHeight : 40 }
onChange={ ( height ) => {
mosaicHeight = height;
setAttributes( { mosaicHeight: height } );
setContent();
}}
min={ 10 }
max={ 100 }
/>
</div>
<div>
<SelectControl
label={__('Mosaic Grid', 'tainacan')}
value={ mosaicGridRows + 'x' + mosaicGridColumns }
options={ [
{ label: '3 x 3', value: '3x3' },
{ label: '3 x 4', value: '3x4' },
{ label: '4 x 3', value: '4x3' },
{ label: '4 x 5', value: '4x5' },
{ label: '5 x 4', value: '5x4' },
] }
onChange={ ( aGrid ) => {
mosaicGridRows = aGrid.split('x')[0];
mosaicGridColumns = aGrid.split('x')[1];
setAttributes({
mosaicGridRows: mosaicGridRows,
mosaicGridColumns: mosaicGridColumns
});
setContent();
}}/>
</div>
</PanelBody>
: null}
</InspectorControls>
</div>