Merge branch 'feature/gutenberg-mosaic-view-mode' into develop
This commit is contained in:
Mateus Machado Luna
commit
41049ee2d9
|
|
@ -353,6 +353,35 @@
|
||||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-list-without-margin li img {
|
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-list-without-margin li img {
|
||||||
height: 185px !important;
|
height: 185px !important;
|
||||||
margin-bottom: 0px !important; }
|
margin-bottom: 0px !important; }
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start; }
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item button {
|
||||||
|
position: absolute !important;
|
||||||
|
background-color: rgba(255, 255, 255, 0.75);
|
||||||
|
color: #454647;
|
||||||
|
padding: 2px;
|
||||||
|
margin-left: 5px;
|
||||||
|
min-width: 14px;
|
||||||
|
visibility: hidden;
|
||||||
|
position: relative;
|
||||||
|
opacity: 0;
|
||||||
|
right: -14px;
|
||||||
|
top: 0px;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 999; }
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item:hover button {
|
||||||
|
visibility: visible;
|
||||||
|
background-color: white !important;
|
||||||
|
opacity: 1;
|
||||||
|
right: -8px;
|
||||||
|
top: -8px;
|
||||||
|
border: 1px solid #cbcbcb;
|
||||||
|
border-radius: 12px;
|
||||||
|
transition: opacity linear 0.15s, right linear 0.15s; }
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item:hover button:hover {
|
||||||
|
background-color: white !important;
|
||||||
|
border: 1px solid #cbcbcb !important; }
|
||||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid,
|
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid,
|
||||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid {
|
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -391,35 +420,6 @@
|
||||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item:hover a {
|
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item:hover a {
|
||||||
color: #454647;
|
color: #454647;
|
||||||
text-decoration: none; }
|
text-decoration: none; }
|
||||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start; }
|
|
||||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item button {
|
|
||||||
position: absolute !important;
|
|
||||||
background-color: rgba(255, 255, 255, 0.75);
|
|
||||||
color: #454647;
|
|
||||||
padding: 2px;
|
|
||||||
margin-left: 5px;
|
|
||||||
min-width: 14px;
|
|
||||||
visibility: hidden;
|
|
||||||
position: relative;
|
|
||||||
opacity: 0;
|
|
||||||
right: -14px;
|
|
||||||
top: 0px;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 999; }
|
|
||||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item:hover button {
|
|
||||||
visibility: visible;
|
|
||||||
background-color: white !important;
|
|
||||||
opacity: 1;
|
|
||||||
right: -8px;
|
|
||||||
top: -8px;
|
|
||||||
border: 1px solid #cbcbcb;
|
|
||||||
border-radius: 12px;
|
|
||||||
transition: opacity linear 0.15s, right linear 0.15s; }
|
|
||||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item:hover button:hover {
|
|
||||||
background-color: white !important;
|
|
||||||
border: 1px solid #cbcbcb !important; }
|
|
||||||
@media only screen and (max-width: 498px) {
|
@media only screen and (max-width: 498px) {
|
||||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid,
|
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid,
|
||||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid {
|
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid {
|
||||||
|
|
@ -487,5 +487,345 @@
|
||||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list li.item-list-item {
|
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list li.item-list-item {
|
||||||
min-width: calc(100% - 24px);
|
min-width: calc(100% - 24px);
|
||||||
width: calc(100% - 24px); } }
|
width: calc(100% - 24px); } }
|
||||||
|
.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 {
|
||||||
|
width: auto;
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
min-height: 40vh; }
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container,
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container {
|
||||||
|
padding: 0;
|
||||||
|
justify-content: stretch;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
display: flex;
|
||||||
|
display: -ms-grid;
|
||||||
|
display: grid;
|
||||||
|
-ms-grid-columns: 20vh 20vh 20vh;
|
||||||
|
grid-template-columns: repeat(3, 20vh);
|
||||||
|
grid-auto-flow: dense;
|
||||||
|
width: 100%;
|
||||||
|
list-style-type: none; }
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container:not(:first-of-type),
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container:not(:first-of-type) {
|
||||||
|
margin-left: 0 !important; }
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item,
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item {
|
||||||
|
flex-grow: 1;
|
||||||
|
justify-self: stretch;
|
||||||
|
position: relative;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
min-width: 100%; }
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item a,
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item a {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
color: #454647;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: normal; }
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item img,
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item img {
|
||||||
|
display: none; }
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item a span,
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item a span {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
background: rgba(255, 255, 255, 0.75);
|
||||||
|
bottom: 0;
|
||||||
|
opacity: 0;
|
||||||
|
padding: 8px 12px;
|
||||||
|
word-break: break-word;
|
||||||
|
transition: opacity 0.5s ease; }
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item:hover a span,
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item:hover a span {
|
||||||
|
opacity: 1; }
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item a.item-without-title span,
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item a.item-without-title span {
|
||||||
|
display: none; }
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item:hover a,
|
||||||
|
.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-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-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-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-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-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; }
|
||||||
|
@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 {
|
||||||
|
overflow-x: auto; }
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container,
|
||||||
|
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container {
|
||||||
|
min-width: 240px; } }
|
||||||
|
|
||||||
/*# sourceMappingURL=tainacan-gutenberg-block-dynamic-items-list.css.map */
|
/*# sourceMappingURL=tainacan-gutenberg-block-dynamic-items-list.css.map */
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -14,6 +14,9 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||||
gridMargin: 0,
|
gridMargin: 0,
|
||||||
searchURL: '',
|
searchURL: '',
|
||||||
maxItemsNumber: 12,
|
maxItemsNumber: 12,
|
||||||
|
mosaicHeight: 40,
|
||||||
|
mosaicGridRows: 3,
|
||||||
|
mosaicGridColumns: 3,
|
||||||
order: 'asc',
|
order: 'asc',
|
||||||
showSearchBar: false,
|
showSearchBar: false,
|
||||||
showCollectionHeader: false,
|
showCollectionHeader: false,
|
||||||
|
|
@ -32,6 +35,9 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||||
showName: this.showName,
|
showName: this.showName,
|
||||||
layout: this.layout,
|
layout: this.layout,
|
||||||
gridMargin: this.gridMargin,
|
gridMargin: this.gridMargin,
|
||||||
|
mosaicHeight: this.mosaicHeight,
|
||||||
|
mosaicGridRows: this.mosaicGridRows,
|
||||||
|
mosaicGridColumns: this.mosaicGridColumns,
|
||||||
searchURL: this.searchURL,
|
searchURL: this.searchURL,
|
||||||
maxItemsNumber: this.maxItemsNumber,
|
maxItemsNumber: this.maxItemsNumber,
|
||||||
order: this.order,
|
order: this.order,
|
||||||
|
|
@ -54,6 +60,9 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||||
this.showName = this.$el.attributes['show-name'] != undefined ? this.$el.attributes['show-name'].value == 'true' : true;
|
this.showName = this.$el.attributes['show-name'] != undefined ? this.$el.attributes['show-name'].value == 'true' : true;
|
||||||
this.layout = this.$el.attributes['layout'] != undefined ? this.$el.attributes['layout'].value : undefined;
|
this.layout = this.$el.attributes['layout'] != undefined ? this.$el.attributes['layout'].value : undefined;
|
||||||
this.gridMargin = this.$el.attributes['grid-margin'] != undefined ? Number(this.$el.attributes['grid-margin'].value) : undefined;
|
this.gridMargin = this.$el.attributes['grid-margin'] != undefined ? Number(this.$el.attributes['grid-margin'].value) : undefined;
|
||||||
|
this.mosaicHeight = this.$el.attributes['mosaic-height'] != undefined ? Number(this.$el.attributes['mosaic-height'].value) : undefined;
|
||||||
|
this.mosaicGridRows = this.$el.attributes['mosaic-grid-rows'] != undefined ? Number(this.$el.attributes['mosaic-grid-rows'].value) : undefined;
|
||||||
|
this.mosaicGridColumns = this.$el.attributes['mosaic-grid-columns'] != undefined ? Number(this.$el.attributes['mosaic-grid-columns'].value) : undefined;
|
||||||
this.maxItemsNumber = this.$el.attributes['max-items-number'] != undefined ? this.$el.attributes['max-items-number'].value : undefined;
|
this.maxItemsNumber = this.$el.attributes['max-items-number'] != undefined ? this.$el.attributes['max-items-number'].value : undefined;
|
||||||
this.order = this.$el.attributes['order'] != undefined ? this.$el.attributes['order'].value : undefined;
|
this.order = this.$el.attributes['order'] != undefined ? this.$el.attributes['order'].value : undefined;
|
||||||
this.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? this.$el.attributes['show-search-bar'].value == 'true' : false;
|
this.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? this.$el.attributes['show-search-bar'].value == 'true' : false;
|
||||||
|
|
|
||||||
|
|
@ -147,8 +147,9 @@
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<template v-if="isLoading">
|
||||||
<ul
|
<ul
|
||||||
v-if="isLoading"
|
v-if="layout !== 'mosaic'"
|
||||||
:style="{
|
:style="{
|
||||||
gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + (showName ? 220 : 185)) + 'px)' : 'inherit',
|
gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + (showName ? 220 : 185)) + 'px)' : 'inherit',
|
||||||
marginTop: showSearchBar || showCollectionHeader ? '1.34rem' : '0px'
|
marginTop: showSearchBar || showCollectionHeader ? '1.34rem' : '0px'
|
||||||
|
|
@ -164,9 +165,29 @@
|
||||||
height: layout == 'grid' ? '230px' : '54px'
|
height: layout == 'grid' ? '230px' : '54px'
|
||||||
}" />
|
}" />
|
||||||
</ul>
|
</ul>
|
||||||
|
<ul
|
||||||
|
v-if="layout === 'mosaic'"
|
||||||
|
:style="{
|
||||||
|
marginTop: showSearchBar || showCollectionHeader ? '-' + (Number(gridMargin)/2) : '0px',
|
||||||
|
padding: '0 ' + (Number(gridMargin)/4) + 'px',
|
||||||
|
minHeight: layout === 'mosaic' ? mosaicHeight + 'vh' : ''
|
||||||
|
}"
|
||||||
|
class="items-list"
|
||||||
|
:class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')">
|
||||||
|
<div
|
||||||
|
:style="{
|
||||||
|
width: 'calc((100% / ' + mosaicPartition(items, 5).length + ') - ' + gridMargin + 'px)',
|
||||||
|
height: 'calc(((' + (mosaicGridRows - 1) + ' * ' + gridMargin + 'px) + ' + mosaicHeight + 'vh))',
|
||||||
|
margin: gridMargin + 'px'
|
||||||
|
}"
|
||||||
|
class="mosaic-container skeleton"
|
||||||
|
:key="mosaicIndex"
|
||||||
|
v-for="(mosaicGroup, mosaicIndex) of mosaicPartition(items, 5)" />
|
||||||
|
</ul>
|
||||||
|
</template>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<ul
|
<ul
|
||||||
v-if="items.length > 0"
|
v-if="items.length > 0 && layout !== 'mosaic'"
|
||||||
:style="{
|
:style="{
|
||||||
gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + (showName ? 220 : 185)) + 'px)' : 'inherit',
|
gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + (showName ? 220 : 185)) + 'px)' : 'inherit',
|
||||||
marginTop: showSearchBar || showCollectionHeader ? '1.35rem' : '0px'
|
marginTop: showSearchBar || showCollectionHeader ? '1.35rem' : '0px'
|
||||||
|
|
@ -184,24 +205,54 @@
|
||||||
target="_blank"
|
target="_blank"
|
||||||
:class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
|
:class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
|
||||||
<img
|
<img
|
||||||
:src="
|
:src="getItemThumbnail(item, 'tainacan-medium')"
|
||||||
item.thumbnail && item.thumbnail['tainacan-medium'][0] && item.thumbnail['tainacan-medium'][0]
|
|
||||||
?
|
|
||||||
item.thumbnail['tainacan-medium'][0]
|
|
||||||
:
|
|
||||||
(item.thumbnail && item.thumbnail['thumbnail'][0] && item.thumbnail['thumbnail'][0]
|
|
||||||
?
|
|
||||||
item.thumbnail['thumbnail'][0]
|
|
||||||
:
|
|
||||||
`${tainacanBaseUrl}/admin/images/placeholder_square.png`)
|
|
||||||
"
|
|
||||||
:alt="item.title ? item.title : $root.__('Thumbnail', 'tainacan')">
|
:alt="item.title ? item.title : $root.__('Thumbnail', 'tainacan')">
|
||||||
<span>{{ item.title ? item.title : '' }}</span>
|
<span>{{ item.title ? item.title : '' }}</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<ul
|
||||||
|
v-if="items.length > 0 && layout === 'mosaic'"
|
||||||
|
:style="{
|
||||||
|
marginTop: showSearchBar || showCollectionHeader ? '-' + (Number(gridMargin)/2) : '0px',
|
||||||
|
padding: '0 ' + (Number(gridMargin)/4) + 'px',
|
||||||
|
minHeight: layout === 'mosaic' ? mosaicHeight + 'vh' : ''
|
||||||
|
}"
|
||||||
|
class="items-list"
|
||||||
|
:class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')">
|
||||||
<div
|
<div
|
||||||
v-else
|
:style="{
|
||||||
|
width: 'calc((100% / ' + mosaicPartition(items, 5).length + ') - ' + gridMargin + 'px)',
|
||||||
|
height: 'calc(((' + (mosaicGridRows - 1) + ' * ' + gridMargin + 'px) + ' + mosaicHeight + 'vh))',
|
||||||
|
gridTemplateColumns: 'repeat(' + mosaicGridColumns + ', calc((100% / ' + mosaicGridColumns + ') - (' + ((mosaicGridColumns - 1)*Number(gridMargin)) + 'px/' + mosaicGridColumns + ')))',
|
||||||
|
margin: gridMargin + 'px',
|
||||||
|
gridGap: gridMargin + 'px',
|
||||||
|
}"
|
||||||
|
class="mosaic-container"
|
||||||
|
:class="'mosaic-container--' + mosaicGroup.length + '-' + mosaicGridRows + 'x' + mosaicGridColumns"
|
||||||
|
:key="mosaicIndex"
|
||||||
|
v-for="(mosaicGroup, mosaicIndex) of mosaicPartition(items, 5)">
|
||||||
|
<li
|
||||||
|
|
||||||
|
:key="index"
|
||||||
|
v-for="(item, index) of mosaicGroup"
|
||||||
|
class="item-list-item"
|
||||||
|
:style="{ backgroundImage: layout == 'mosaic' ? `url(${getItemThumbnail(item, 'medium_large')})` : 'none' }">
|
||||||
|
<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' : '')">
|
||||||
|
<img
|
||||||
|
:src="getItemThumbnail(item, 'tainacan-medium')"
|
||||||
|
:alt="item.title ? item.title : $root.__('Thumbnail', 'tainacan')">
|
||||||
|
<span>{{ item.title ? item.title : '' }}</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
<div
|
||||||
|
v-else-if="!isLoading && items.length <= 0"
|
||||||
class="spinner-container">
|
class="spinner-container">
|
||||||
{{ $root.__(errorMessage, 'tainacan') }}
|
{{ $root.__(errorMessage, 'tainacan') }}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -240,6 +291,9 @@ export default {
|
||||||
gridMargin: Number,
|
gridMargin: Number,
|
||||||
searchURL: String,
|
searchURL: String,
|
||||||
maxItemsNumber: Number,
|
maxItemsNumber: Number,
|
||||||
|
mosaicHeight: Number,
|
||||||
|
mosaicGridRows: Number,
|
||||||
|
mosaicGridColumns: Number,
|
||||||
order: String,
|
order: String,
|
||||||
showSearchBar: Boolean,
|
showSearchBar: Boolean,
|
||||||
showCollectionHeader: Boolean,
|
showCollectionHeader: Boolean,
|
||||||
|
|
@ -348,6 +402,28 @@ export default {
|
||||||
this.isLoadingCollection = false;
|
this.isLoadingCollection = false;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
getItemThumbnail(item, size) {
|
||||||
|
return (
|
||||||
|
item.thumbnail && item.thumbnail[size][0] && item.thumbnail[size][0]
|
||||||
|
?
|
||||||
|
item.thumbnail[size][0]
|
||||||
|
:
|
||||||
|
(item.thumbnail && item.thumbnail['large'][0] && item.thumbnail['large'][0]
|
||||||
|
?
|
||||||
|
item.thumbnail['large'][0]
|
||||||
|
:
|
||||||
|
`${this.tainacanBaseUrl}/admin/images/placeholder_square.png`)
|
||||||
|
)
|
||||||
|
},
|
||||||
|
mosaicPartition(items, size) {
|
||||||
|
const partition = _.groupBy(items, (item, i) => {
|
||||||
|
if (i % 2 == 0)
|
||||||
|
return Math.floor(i/size)
|
||||||
|
else
|
||||||
|
return Math.floor(i/(size + 1))
|
||||||
|
});
|
||||||
|
return _.values(partition);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
|
||||||
|
|
@ -215,7 +215,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Grid View Mode ----------------------------------------------------
|
// Style for all View Modes ----------------------------------------------------
|
||||||
ul.items-list.items-list-without-margin,
|
ul.items-list.items-list-without-margin,
|
||||||
ul.items-list-edit.items-list-without-margin {
|
ul.items-list-edit.items-list-without-margin {
|
||||||
grid-template-columns: repeat(auto-fill, 185px);
|
grid-template-columns: repeat(auto-fill, 185px);
|
||||||
|
|
@ -235,6 +235,43 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
ul.items-list-edit li.item-list-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
button {
|
||||||
|
position: absolute !important;
|
||||||
|
background-color: rgba(255, 255, 255, 0.75);
|
||||||
|
color: #454647;
|
||||||
|
padding: 2px;
|
||||||
|
margin-left: 5px;
|
||||||
|
min-width: 14px;
|
||||||
|
visibility: hidden;
|
||||||
|
position: relative;
|
||||||
|
opacity: 0;
|
||||||
|
right: -14px;
|
||||||
|
top: 0px;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover button {
|
||||||
|
visibility: visible;
|
||||||
|
background-color: rgba(255, 255, 255, 1) !important;
|
||||||
|
opacity: 1;
|
||||||
|
right: -8px;
|
||||||
|
top: -8px;
|
||||||
|
border: 1px solid #cbcbcb;
|
||||||
|
border-radius: 12px;
|
||||||
|
transition: opacity linear 0.15s, right linear 0.15s;
|
||||||
|
}
|
||||||
|
&:hover button:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 1) !important;
|
||||||
|
border: 1px solid #cbcbcb !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Grid View Mode ----------------------------------------------------
|
||||||
ul.items-list.items-layout-grid,
|
ul.items-list.items-layout-grid,
|
||||||
ul.items-list-edit.items-layout-grid {
|
ul.items-list-edit.items-layout-grid {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -276,41 +313,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
ul.items-list-edit li.item-list-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
button {
|
|
||||||
position: absolute !important;
|
|
||||||
background-color: rgba(255, 255, 255, 0.75);
|
|
||||||
color: #454647;
|
|
||||||
padding: 2px;
|
|
||||||
margin-left: 5px;
|
|
||||||
min-width: 14px;
|
|
||||||
visibility: hidden;
|
|
||||||
position: relative;
|
|
||||||
opacity: 0;
|
|
||||||
right: -14px;
|
|
||||||
top: 0px;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover button {
|
|
||||||
visibility: visible;
|
|
||||||
background-color: rgba(255, 255, 255, 1) !important;
|
|
||||||
opacity: 1;
|
|
||||||
right: -8px;
|
|
||||||
top: -8px;
|
|
||||||
border: 1px solid #cbcbcb;
|
|
||||||
border-radius: 12px;
|
|
||||||
transition: opacity linear 0.15s, right linear 0.15s;
|
|
||||||
}
|
|
||||||
&:hover button:hover {
|
|
||||||
background-color: rgba(255, 255, 255, 1) !important;
|
|
||||||
border: 1px solid #cbcbcb !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (max-width: 498px) {
|
@media only screen and (max-width: 498px) {
|
||||||
|
|
||||||
ul.items-list.items-layout-grid,
|
ul.items-list.items-layout-grid,
|
||||||
|
|
@ -387,5 +389,445 @@
|
||||||
width: calc(100% - 24px);
|
width: calc(100% - 24px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mosaic View Mode ----------------------------------------------------
|
||||||
|
ul.items-list.items-layout-mosaic,
|
||||||
|
ul.items-list-edit.items-layout-mosaic {
|
||||||
|
width: auto;
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
min-height: 40vh;
|
||||||
|
|
||||||
|
.mosaic-container {
|
||||||
|
padding: 0;
|
||||||
|
justify-content: stretch; // For flex fallback compatibility
|
||||||
|
@include display-grid;
|
||||||
|
-ms-grid-columns: 20vh 20vh 20vh;
|
||||||
|
grid-template-columns: repeat(3, 20vh);
|
||||||
|
grid-auto-flow: dense;
|
||||||
|
width: 100%;
|
||||||
|
list-style-type: none;
|
||||||
|
|
||||||
|
&:not(:first-of-type) {
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
li.item-list-item {
|
||||||
|
flex-grow: 1; // For flex fallback compatibility
|
||||||
|
justify-self: stretch;
|
||||||
|
position: relative;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
min-width: 100%;
|
||||||
|
|
||||||
|
a {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
color: #454647;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a span {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
background: rgba(255, 255, 255, 0.75);
|
||||||
|
bottom: 0;
|
||||||
|
opacity: 0;
|
||||||
|
padding: 8px 12px;
|
||||||
|
word-break: break-word;
|
||||||
|
transition: opacity 0.5s ease;
|
||||||
|
}
|
||||||
|
&:hover a span {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.item-without-title span {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover a {
|
||||||
|
color: #454647;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// 3 x 3 MOSAIC GRID ------------------------
|
||||||
|
&.mosaic-container--1-3x3 {
|
||||||
|
li.item-list-item {
|
||||||
|
grid-row: span 3;
|
||||||
|
grid-column: span 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.mosaic-container--2-3x3 {
|
||||||
|
li.item-list-item:first-of-type {
|
||||||
|
grid-row: span 1;
|
||||||
|
grid-column: span 3;
|
||||||
|
}
|
||||||
|
li.item-list-item:last-of-type {
|
||||||
|
grid-row: span 2;
|
||||||
|
grid-column: span 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.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-row: span 1;
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.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-row: span 2;
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
&:nth-of-type(3) {
|
||||||
|
grid-row: span 1;
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.mosaic-container--5-3x3 li.item-list-item {
|
||||||
|
|
||||||
|
&:nth-of-type(1) {
|
||||||
|
grid-row: span 1;
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
&:nth-of-type(4) {
|
||||||
|
grid-row: span 2;
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.mosaic-container--6-3x3 li.item-list-item {
|
||||||
|
|
||||||
|
&:nth-of-type(3) {
|
||||||
|
grid-row: span 2;
|
||||||
|
grid-column: span 1;
|
||||||
|
}
|
||||||
|
&:nth-of-type(4),
|
||||||
|
&:nth-of-type(6) {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 1024px) {
|
||||||
|
|
||||||
|
ul.items-list.items-layout-mosaic,
|
||||||
|
ul.items-list-edit.items-layout-mosaic {
|
||||||
|
overflow-x: auto;
|
||||||
|
|
||||||
|
.mosaic-container {
|
||||||
|
min-width: 240px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ const { registerBlockType } = wp.blocks;
|
||||||
|
|
||||||
const { __ } = wp.i18n;
|
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;
|
const { InspectorControls, BlockControls } = wp.editor;
|
||||||
|
|
||||||
|
|
@ -115,6 +115,18 @@ registerBlockType('tainacan/dynamic-items-list', {
|
||||||
collectionTextColor: {
|
collectionTextColor: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "#ffffff"
|
default: "#ffffff"
|
||||||
|
},
|
||||||
|
mosaicHeight: {
|
||||||
|
type: Number,
|
||||||
|
value: 40
|
||||||
|
},
|
||||||
|
mosaicGridColumns: {
|
||||||
|
type: Number,
|
||||||
|
value: 3
|
||||||
|
},
|
||||||
|
mosaicGridRows: {
|
||||||
|
type: Number,
|
||||||
|
value: 3
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
supports: {
|
supports: {
|
||||||
|
|
@ -125,6 +137,7 @@ registerBlockType('tainacan/dynamic-items-list', {
|
||||||
let {
|
let {
|
||||||
items,
|
items,
|
||||||
content,
|
content,
|
||||||
|
collection,
|
||||||
collectionId,
|
collectionId,
|
||||||
showImage,
|
showImage,
|
||||||
showName,
|
showName,
|
||||||
|
|
@ -142,7 +155,10 @@ registerBlockType('tainacan/dynamic-items-list', {
|
||||||
showCollectionLabel,
|
showCollectionLabel,
|
||||||
isLoadingCollection,
|
isLoadingCollection,
|
||||||
collectionBackgroundColor,
|
collectionBackgroundColor,
|
||||||
collectionTextColor
|
collectionTextColor,
|
||||||
|
mosaicHeight,
|
||||||
|
mosaicGridColumns,
|
||||||
|
mosaicGridRows
|
||||||
} = attributes;
|
} = attributes;
|
||||||
|
|
||||||
// Obtains block's client id to render it on save function
|
// Obtains block's client id to render it on save function
|
||||||
|
|
@ -153,24 +169,19 @@ registerBlockType('tainacan/dynamic-items-list', {
|
||||||
<li
|
<li
|
||||||
key={ item.id }
|
key={ item.id }
|
||||||
className="item-list-item"
|
className="item-list-item"
|
||||||
style={{ marginBottom: layout == 'grid' ? (showName ? gridMargin + 12 : gridMargin) + 'px' : ''}}>
|
style={
|
||||||
|
{
|
||||||
|
marginBottom: layout == 'grid' ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '',
|
||||||
|
backgroundImage: layout == 'mosaic' ? `url(${getItemThumbnail(item, layout === 'mosaic' ? 'medium_large' : 'tainacan-medium')})` : 'none'
|
||||||
|
}
|
||||||
|
}>
|
||||||
<a
|
<a
|
||||||
id={ isNaN(item.id) ? item.id : 'item-id-' + item.id }
|
id={ isNaN(item.id) ? item.id : 'item-id-' + item.id }
|
||||||
href={ item.url }
|
href={ item.url }
|
||||||
target="_blank"
|
target="_blank"
|
||||||
className={ (!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '') }>
|
className={ (!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '') }>
|
||||||
<img
|
<img
|
||||||
src={
|
src={ getItemThumbnail(item, 'tainacan-medium') }
|
||||||
item.thumbnail && item.thumbnail['tainacan-medium'][0] && item.thumbnail['tainacan-medium'][0]
|
|
||||||
?
|
|
||||||
item.thumbnail['tainacan-medium'][0]
|
|
||||||
:
|
|
||||||
(item.thumbnail && item.thumbnail['thumbnail'][0] && item.thumbnail['thumbnail'][0]
|
|
||||||
?
|
|
||||||
item.thumbnail['thumbnail'][0]
|
|
||||||
:
|
|
||||||
`${tainacan_plugin.base_url}/admin/images/placeholder_square.png`)
|
|
||||||
}
|
|
||||||
alt={ item.title ? item.title : __( 'Thumbnail', 'tainacan' ) }/>
|
alt={ item.title ? item.title : __( 'Thumbnail', 'tainacan' ) }/>
|
||||||
<span>{ item.title ? item.title : '' }</span>
|
<span>{ item.title ? item.title : '' }</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -178,6 +189,25 @@ registerBlockType('tainacan/dynamic-items-list', {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function prepareMosaicItem(mosaicGroup, mosaicGroupsLength) {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
width: 'calc((100% / ' + mosaicGroupsLength + ') - ' + gridMargin + 'px)',
|
||||||
|
height: 'calc(((' + (mosaicGridRows - 1) + ' * ' + gridMargin + 'px) + ' + mosaicHeight + 'vh))',
|
||||||
|
gridTemplateColumns: 'repeat(' + mosaicGridColumns + ', calc((100% / ' + mosaicGridColumns + ') - (' + ((mosaicGridColumns - 1)*Number(gridMargin)) + 'px/' + mosaicGridColumns + ')))',
|
||||||
|
margin: gridMargin + 'px',
|
||||||
|
gridGap: gridMargin + 'px',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
className={ 'mosaic-container mosaic-container--' + mosaicGroup.length + '-' + mosaicGridRows + 'x' + mosaicGridColumns }>
|
||||||
|
{ buildMosaic(mosaicGroup) }
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
function setContent(){
|
function setContent(){
|
||||||
|
|
||||||
items = [];
|
items = [];
|
||||||
|
|
@ -237,14 +267,28 @@ registerBlockType('tainacan/dynamic-items-list', {
|
||||||
tainacan.get(endpoint, { cancelToken: itemsRequestSource.token })
|
tainacan.get(endpoint, { cancelToken: itemsRequestSource.token })
|
||||||
.then(response => {
|
.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)
|
for (let item of response.data.items)
|
||||||
items.push(prepareItem(item));
|
items.push(prepareItem(item));
|
||||||
|
} else {
|
||||||
|
const mosaicGroups = mosaicPartition(response.data.items, 5);
|
||||||
|
for (let mosaicGroup of mosaicGroups)
|
||||||
|
items.push(prepareMosaicItem(mosaicGroup, mosaicGroups.length));
|
||||||
|
}
|
||||||
|
|
||||||
setAttributes({
|
setAttributes({
|
||||||
content: <div></div>,
|
content: <div></div>,
|
||||||
items: items,
|
items: items,
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
itemsRequestSource: itemsRequestSource
|
itemsRequestSource: itemsRequestSource,
|
||||||
|
mosaicHeight: mosaicHeight,
|
||||||
|
mosaicGridRows: mosaicGridRows,
|
||||||
|
mosaicGridColumns: mosaicGridColumns
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -283,6 +327,20 @@ registerBlockType('tainacan/dynamic-items-list', {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getItemThumbnail(item, size) {
|
||||||
|
return (
|
||||||
|
item.thumbnail && item.thumbnail[size][0] && item.thumbnail[size][0]
|
||||||
|
?
|
||||||
|
item.thumbnail[size][0]
|
||||||
|
:
|
||||||
|
(item.thumbnail && item.thumbnail['thumbnail'][0] && item.thumbnail['thumbnail'][0]
|
||||||
|
?
|
||||||
|
item.thumbnail['thumbnail'][0]
|
||||||
|
:
|
||||||
|
`${tainacan_plugin.base_url}/admin/images/placeholder_square.png`)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
function openDynamicItemsModal() {
|
function openDynamicItemsModal() {
|
||||||
isModalOpen = true;
|
isModalOpen = true;
|
||||||
setAttributes( {
|
setAttributes( {
|
||||||
|
|
@ -293,7 +351,7 @@ registerBlockType('tainacan/dynamic-items-list', {
|
||||||
function updateLayout(newLayout) {
|
function updateLayout(newLayout) {
|
||||||
layout = newLayout;
|
layout = newLayout;
|
||||||
|
|
||||||
if (layout == 'grid' && showImage == false)
|
if ((layout == 'grid' || layout == 'mosaic') && showImage == false)
|
||||||
showImage = true;
|
showImage = true;
|
||||||
|
|
||||||
if (layout == 'list' && showName == false)
|
if (layout == 'list' && showName == false)
|
||||||
|
|
@ -318,6 +376,23 @@ registerBlockType('tainacan/dynamic-items-list', {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function mosaicPartition(items, size) {
|
||||||
|
const partition = _.groupBy(items, (item, i) => {
|
||||||
|
if (i % 2 == 0)
|
||||||
|
return Math.floor(i/size)
|
||||||
|
else
|
||||||
|
return Math.floor(i/(size + 1))
|
||||||
|
});
|
||||||
|
return _.values(partition);
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildMosaic(mosaicGroup) {
|
||||||
|
let mosaic = []
|
||||||
|
for (let item of mosaicGroup)
|
||||||
|
mosaic.push(prepareItem(item))
|
||||||
|
return mosaic;
|
||||||
|
}
|
||||||
|
|
||||||
// Executed only on the first load of page
|
// Executed only on the first load of page
|
||||||
if(content && content.length && content[0].type)
|
if(content && content.length && content[0].type)
|
||||||
setContent();
|
setContent();
|
||||||
|
|
@ -334,6 +409,12 @@ registerBlockType('tainacan/dynamic-items-list', {
|
||||||
title: __( 'List View' ),
|
title: __( 'List View' ),
|
||||||
onClick: () => updateLayout('list'),
|
onClick: () => updateLayout('list'),
|
||||||
isActive: layout === 'list',
|
isActive: layout === 'list',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'layout',
|
||||||
|
title: __( 'Mosaic View' ),
|
||||||
|
onClick: () => updateLayout('mosaic'),
|
||||||
|
isActive: layout === 'mosaic',
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
@ -454,7 +535,7 @@ registerBlockType('tainacan/dynamic-items-list', {
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
: null }
|
: null }
|
||||||
{ layout == 'grid' ?
|
{ layout == 'grid' || layout == 'mosaic' ?
|
||||||
<div>
|
<div>
|
||||||
<ToggleControl
|
<ToggleControl
|
||||||
label={__("Item's title", 'tainacan')}
|
label={__("Item's title", 'tainacan')}
|
||||||
|
|
@ -470,10 +551,10 @@ registerBlockType('tainacan/dynamic-items-list', {
|
||||||
<div style={{ marginTop: '16px'}}>
|
<div style={{ marginTop: '16px'}}>
|
||||||
<RangeControl
|
<RangeControl
|
||||||
label={__('Margin between items in pixels', 'tainacan')}
|
label={__('Margin between items in pixels', 'tainacan')}
|
||||||
value={ gridMargin }
|
value={ gridMargin ? gridMargin : 0 }
|
||||||
onChange={ ( margin ) => {
|
onChange={ ( margin ) => {
|
||||||
gridMargin = margin;
|
gridMargin = margin;
|
||||||
setAttributes( { gridMargin: margin } )
|
setAttributes( { gridMargin: margin } );
|
||||||
setContent();
|
setContent();
|
||||||
}}
|
}}
|
||||||
min={ 0 }
|
min={ 0 }
|
||||||
|
|
@ -484,6 +565,48 @@ registerBlockType('tainacan/dynamic-items-list', {
|
||||||
: null }
|
: null }
|
||||||
</div>
|
</div>
|
||||||
</PanelBody>
|
</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>
|
</InspectorControls>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -701,7 +824,7 @@ registerBlockType('tainacan/dynamic-items-list', {
|
||||||
isPrimary
|
isPrimary
|
||||||
type="submit"
|
type="submit"
|
||||||
onClick={ () => openDynamicItemsModal() }>
|
onClick={ () => openDynamicItemsModal() }>
|
||||||
{__('Select items', 'tainacan')}
|
{__('Configure search', 'tainacan')}
|
||||||
</Button>
|
</Button>
|
||||||
</Placeholder>
|
</Placeholder>
|
||||||
) : null
|
) : null
|
||||||
|
|
@ -714,8 +837,9 @@ registerBlockType('tainacan/dynamic-items-list', {
|
||||||
<div>
|
<div>
|
||||||
<ul
|
<ul
|
||||||
style={{
|
style={{
|
||||||
gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + (showName ? 220 : 185)) + 'px)' : 'inherit',
|
marginTop: showSearchBar || showCollectionHeader ? '-' + (Number(gridMargin)/2) : '0px',
|
||||||
marginTop: showSearchBar || showCollectionHeader ? '1.5rem' : '0px'
|
padding: (Number(gridMargin)/4) + 'px',
|
||||||
|
minHeight: layout === 'mosaic' ? mosaicHeight + 'vh' : ''
|
||||||
}}
|
}}
|
||||||
className={'items-list-edit items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')}>
|
className={'items-list-edit items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')}>
|
||||||
{ items }
|
{ items }
|
||||||
|
|
@ -725,6 +849,145 @@ registerBlockType('tainacan/dynamic-items-list', {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
save({ attributes, className }){
|
||||||
|
const {
|
||||||
|
content,
|
||||||
|
blockId,
|
||||||
|
collectionId,
|
||||||
|
showImage,
|
||||||
|
showName,
|
||||||
|
layout,
|
||||||
|
gridMargin,
|
||||||
|
searchURL,
|
||||||
|
maxItemsNumber,
|
||||||
|
order,
|
||||||
|
showSearchBar,
|
||||||
|
showCollectionHeader,
|
||||||
|
showCollectionLabel,
|
||||||
|
collectionBackgroundColor,
|
||||||
|
collectionTextColor,
|
||||||
|
mosaicHeight,
|
||||||
|
mosaicGridRows,
|
||||||
|
mosaicGridColumns
|
||||||
|
} = attributes;
|
||||||
|
|
||||||
|
return <div
|
||||||
|
search-url={ searchURL }
|
||||||
|
className={ className }
|
||||||
|
collection-id={ collectionId }
|
||||||
|
show-image={ '' + showImage }
|
||||||
|
show-name={ '' + showName }
|
||||||
|
show-search-bar={ '' + showSearchBar }
|
||||||
|
show-collection-header={ '' + showCollectionHeader }
|
||||||
|
show-collection-label={ '' + showCollectionLabel }
|
||||||
|
layout={ layout }
|
||||||
|
mosaic-height={ mosaicHeight }
|
||||||
|
mosaic-grid-rows={ mosaicGridRows }
|
||||||
|
mosaic-grid-columns={ mosaicGridColumns }
|
||||||
|
collection-background-color={ collectionBackgroundColor }
|
||||||
|
collection-text-color={ collectionTextColor }
|
||||||
|
grid-margin={ gridMargin }
|
||||||
|
max-items-number={ maxItemsNumber }
|
||||||
|
order={ order }
|
||||||
|
tainacan-api-root={ tainacan_plugin.root }
|
||||||
|
tainacan-base-url={ tainacan_plugin.base_url }
|
||||||
|
id={ 'wp-block-tainacan-dynamic-items-list_' + blockId }>
|
||||||
|
{ content }
|
||||||
|
</div>
|
||||||
|
},
|
||||||
|
deprecated: [
|
||||||
|
{
|
||||||
|
attributes: {
|
||||||
|
content: {
|
||||||
|
type: 'array',
|
||||||
|
source: 'children',
|
||||||
|
selector: 'div'
|
||||||
|
},
|
||||||
|
collectionId: {
|
||||||
|
type: String,
|
||||||
|
default: undefined
|
||||||
|
},
|
||||||
|
items: {
|
||||||
|
type: Array,
|
||||||
|
default: []
|
||||||
|
},
|
||||||
|
showImage: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
showName: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
layout: {
|
||||||
|
type: String,
|
||||||
|
default: 'grid'
|
||||||
|
},
|
||||||
|
isModalOpen: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
gridMargin: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
searchURL: {
|
||||||
|
type: String,
|
||||||
|
default: undefined
|
||||||
|
},
|
||||||
|
itemsRequestSource: {
|
||||||
|
type: String,
|
||||||
|
default: undefined
|
||||||
|
},
|
||||||
|
maxItemsNumber: {
|
||||||
|
type: Number,
|
||||||
|
value: undefined
|
||||||
|
},
|
||||||
|
isLoading: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false
|
||||||
|
},
|
||||||
|
isLoadingCollection: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false
|
||||||
|
},
|
||||||
|
showSearchBar: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false
|
||||||
|
},
|
||||||
|
showCollectionHeader: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false
|
||||||
|
},
|
||||||
|
showCollectionLabel: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false
|
||||||
|
},
|
||||||
|
collection: {
|
||||||
|
type: Object,
|
||||||
|
value: undefined
|
||||||
|
},
|
||||||
|
searchString: {
|
||||||
|
type: String,
|
||||||
|
default: undefined
|
||||||
|
},
|
||||||
|
order: {
|
||||||
|
type: String,
|
||||||
|
default: undefined
|
||||||
|
},
|
||||||
|
blockId: {
|
||||||
|
type: String,
|
||||||
|
default: undefined
|
||||||
|
},
|
||||||
|
collectionBackgroundColor: {
|
||||||
|
type: String,
|
||||||
|
default: "#454647"
|
||||||
|
},
|
||||||
|
collectionTextColor: {
|
||||||
|
type: String,
|
||||||
|
default: "#ffffff"
|
||||||
|
}
|
||||||
|
},
|
||||||
save({ attributes, className }){
|
save({ attributes, className }){
|
||||||
const {
|
const {
|
||||||
content,
|
content,
|
||||||
|
|
@ -765,4 +1028,6 @@ registerBlockType('tainacan/dynamic-items-list', {
|
||||||
{ content }
|
{ content }
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
});
|
});
|
||||||
Loading…
Reference in New Issue