More work on new thumbnails logic for dynamic items list block #467 #463 #456. Adds option to not crop images and adjust columns count. #465
This commit is contained in:
mateuswetah
parent
7162c3eb4a
commit
02081485cf
|
|
@ -5760,15 +5760,9 @@
|
|||
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
|
||||
},
|
||||
"ini": {
|
||||
<<<<<<< HEAD
|
||||
"version": "1.3.8",
|
||||
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
|
||||
"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
|
||||
=======
|
||||
"version": "1.3.7",
|
||||
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.7.tgz",
|
||||
"integrity": "sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ==",
|
||||
>>>>>>> develop
|
||||
"dev": true
|
||||
},
|
||||
"inquirer": {
|
||||
|
|
|
|||
|
|
@ -236,24 +236,109 @@
|
|||
.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 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-columns: 220px 220px 220px 220px 220px;
|
||||
grid-template-columns: repeat(auto-fill, 220px);
|
||||
grid-gap: 0px;
|
||||
gap: 0px;
|
||||
grid-gap: 24px;
|
||||
gap: 24px;
|
||||
justify-content: space-evenly;
|
||||
list-style-type: none;
|
||||
margin: 0; }
|
||||
list-style-type: none; }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid:not(.max-columns-count-1):not(.max-columns-count-2):not(.max-columns-count-3):not(.max-columns-count-4):not(.max-columns-count-5):not(.max-columns-count-6):not(.max-columns-count-7),
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid:not(.max-columns-count-1):not(.max-columns-count-2):not(.max-columns-count-3):not(.max-columns-count-4):not(.max-columns-count-5):not(.max-columns-count-6):not(.max-columns-count-7) {
|
||||
-ms-grid-columns: 220px 220px 220px 220px;
|
||||
grid-template-columns: repeat(4, 1fr); }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-7,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-7 {
|
||||
-ms-grid-columns: 220px 220px 220px 220px 220px 220px 220px;
|
||||
grid-template-columns: repeat(7, 1fr); }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-6,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-6 {
|
||||
-ms-grid-columns: 220px 220px 220px 220px 220px 220px;
|
||||
grid-template-columns: repeat(6, 1fr); }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-5,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-5 {
|
||||
-ms-grid-columns: 220px 220px 220px 220px 220px;
|
||||
grid-template-columns: repeat(5, 1fr); }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-4,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-4 {
|
||||
-ms-grid-columns: 220px 220px 220px 220px;
|
||||
grid-template-columns: repeat(4, 1fr); }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-3,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-3 {
|
||||
-ms-grid-columns: 220px 220px 220px;
|
||||
grid-template-columns: repeat(3, 1fr); }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-2,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-2 {
|
||||
-ms-grid-columns: 220px 220px;
|
||||
grid-template-columns: repeat(2, 1fr); }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-1,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-1 {
|
||||
-ms-grid-columns: 220px;
|
||||
grid-template-columns: repeat(1, 1fr); }
|
||||
@media only screen and (max-width: 1600px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-7, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-6,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-7,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-6 {
|
||||
-ms-grid-columns: 220px 220px 220px 220px 220px 220px;
|
||||
grid-template-columns: repeat(6, 1fr); } }
|
||||
@media only screen and (max-width: 1400px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-7, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-6, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-5,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-7,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-6,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-5 {
|
||||
-ms-grid-columns: 220px 220px 220px 220px 220px;
|
||||
grid-template-columns: repeat(5, 1fr); } }
|
||||
@media only screen and (max-width: 1280px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid:not(.max-columns-count-1):not(.max-columns-count-2):not(.max-columns-count-3):not(.max-columns-count-4):not(.max-columns-count-5):not(.max-columns-count-6):not(.max-columns-count-7), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-7, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-6, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-5, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-4,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid:not(.max-columns-count-1):not(.max-columns-count-2):not(.max-columns-count-3):not(.max-columns-count-4):not(.max-columns-count-5):not(.max-columns-count-6):not(.max-columns-count-7),
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-7,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-6,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-5,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-4 {
|
||||
-ms-grid-columns: 220px 220px 220px 220px;
|
||||
grid-template-columns: repeat(4, 1fr); } }
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid:not(.max-columns-count-1):not(.max-columns-count-2):not(.max-columns-count-3):not(.max-columns-count-4):not(.max-columns-count-5):not(.max-columns-count-6):not(.max-columns-count-7), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-7, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-6, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-5, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-4, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-3,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid:not(.max-columns-count-1):not(.max-columns-count-2):not(.max-columns-count-3):not(.max-columns-count-4):not(.max-columns-count-5):not(.max-columns-count-6):not(.max-columns-count-7),
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-7,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-6,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-5,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-4,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-3 {
|
||||
-ms-grid-columns: 220px 220px 220px;
|
||||
grid-template-columns: repeat(3, 1fr); } }
|
||||
@media only screen and (max-width: 768px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid:not(.max-columns-count-1):not(.max-columns-count-2):not(.max-columns-count-3):not(.max-columns-count-4):not(.max-columns-count-5):not(.max-columns-count-6):not(.max-columns-count-7), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-7, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-6, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-5, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-4, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-3, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-2,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid:not(.max-columns-count-1):not(.max-columns-count-2):not(.max-columns-count-3):not(.max-columns-count-4):not(.max-columns-count-5):not(.max-columns-count-6):not(.max-columns-count-7),
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-7,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-6,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-5,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-4,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-3,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-2 {
|
||||
-ms-grid-columns: 220px 220px;
|
||||
grid-template-columns: repeat(2, 1fr); } }
|
||||
@media only screen and (max-width: 498px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid:not(.max-columns-count-1):not(.max-columns-count-2):not(.max-columns-count-3):not(.max-columns-count-4):not(.max-columns-count-5):not(.max-columns-count-6):not(.max-columns-count-7), .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-7, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-6, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-5, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-4, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-3, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-2, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.max-columns-count-1,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid:not(.max-columns-count-1):not(.max-columns-count-2):not(.max-columns-count-3):not(.max-columns-count-4):not(.max-columns-count-5):not(.max-columns-count-6):not(.max-columns-count-7),
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-7,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-6,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-5,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-4,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-3,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-2,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.max-columns-count-1 {
|
||||
-ms-grid-columns: 220px;
|
||||
grid-template-columns: repeat(1, 1fr); } }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid li.item-list-item,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 12px 12px 24px 12px;
|
||||
margin-bottom: 12px;
|
||||
width: 185px; }
|
||||
width: 100%;
|
||||
flex-basis: 220px;
|
||||
margin: auto; }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid li.item-list-item a,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item a {
|
||||
color: var(--tainacan-block-gray5, #454647);
|
||||
|
|
@ -263,8 +348,7 @@
|
|||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid li.item-list-item img,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item img {
|
||||
height: auto;
|
||||
width: 185px;
|
||||
min-width: 185px;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
margin-bottom: 0.5em; }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid li.item-list-item a.item-without-title span,
|
||||
|
|
@ -287,19 +371,127 @@
|
|||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
margin-left: 0;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
list-style-type: none;
|
||||
margin: 0; }
|
||||
display: flex;
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
align-items: self-start;
|
||||
list-style-type: none; }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-7,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-7 {
|
||||
grid-template-columns: repeat(7, auto); }
|
||||
@media only screen and (max-width: 1600px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-7,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-7 {
|
||||
grid-template-columns: repeat(6, auto); } }
|
||||
@media only screen and (max-width: 1400px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-7,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-7 {
|
||||
grid-template-columns: repeat(5, auto); } }
|
||||
@media only screen and (max-width: 1280px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-7,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-7 {
|
||||
grid-template-columns: repeat(4, auto); } }
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-7,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-7 {
|
||||
grid-template-columns: repeat(3, auto); } }
|
||||
@media only screen and (max-width: 768px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-7,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-7 {
|
||||
grid-template-columns: repeat(2, auto); } }
|
||||
@media only screen and (max-width: 498px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-7,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-7 {
|
||||
grid-template-columns: repeat(1, auto); } }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-6,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-6 {
|
||||
grid-template-columns: repeat(6, auto); }
|
||||
@media only screen and (max-width: 1400px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-6,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-6 {
|
||||
grid-template-columns: repeat(5, auto); } }
|
||||
@media only screen and (max-width: 1280px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-6,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-6 {
|
||||
grid-template-columns: repeat(4, auto); } }
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-6,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-6 {
|
||||
grid-template-columns: repeat(3, auto); } }
|
||||
@media only screen and (max-width: 768px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-6,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-6 {
|
||||
grid-template-columns: repeat(2, auto); } }
|
||||
@media only screen and (max-width: 498px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-6,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-6 {
|
||||
grid-template-columns: repeat(1, auto); } }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-5,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-5 {
|
||||
grid-template-columns: repeat(5, auto); }
|
||||
@media only screen and (max-width: 1280px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-5,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-5 {
|
||||
grid-template-columns: repeat(4, auto); } }
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-5,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-5 {
|
||||
grid-template-columns: repeat(3, auto); } }
|
||||
@media only screen and (max-width: 768px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-5,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-5 {
|
||||
grid-template-columns: repeat(2, auto); } }
|
||||
@media only screen and (max-width: 498px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-5,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-5 {
|
||||
grid-template-columns: repeat(1, auto); } }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-4,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-4 {
|
||||
grid-template-columns: repeat(4, auto); }
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-4,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-4 {
|
||||
grid-template-columns: repeat(3, auto); } }
|
||||
@media only screen and (max-width: 768px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-4,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-4 {
|
||||
grid-template-columns: repeat(2, auto); } }
|
||||
@media only screen and (max-width: 498px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-4,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-4 {
|
||||
grid-template-columns: repeat(1, auto); } }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-3,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-3 {
|
||||
grid-template-columns: repeat(3, auto); }
|
||||
@media only screen and (max-width: 768px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-3,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-3 {
|
||||
grid-template-columns: repeat(2, auto); } }
|
||||
@media only screen and (max-width: 498px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-3,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-3 {
|
||||
grid-template-columns: repeat(1, auto); } }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-2,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-2 {
|
||||
grid-template-columns: repeat(2, auto); }
|
||||
@media only screen and (max-width: 498px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-2,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-2 {
|
||||
grid-template-columns: repeat(1, auto); } }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.max-columns-count-1,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.max-columns-count-1 {
|
||||
grid-template-columns: repeat(1, auto); }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list > div,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list > div {
|
||||
flex-basis: 220px; }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list li.item-list-item,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list li.item-list-item {
|
||||
position: relative;
|
||||
margin: 12px 12px 24px 12px;
|
||||
margin-bottom: 12px;
|
||||
min-height: 54px;
|
||||
min-width: calc(20% - 24px);
|
||||
width: calc(20% - 24px); }
|
||||
display: inline-block;
|
||||
padding: 12px 12px 24px 12px; }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list li.item-list-item a,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list li.item-list-item a {
|
||||
color: var(--tainacan-block-gray5, #454647);
|
||||
|
|
@ -308,12 +500,21 @@
|
|||
align-items: center;
|
||||
word-break: break-all;
|
||||
word-break: break-word; }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list li.item-list-item a > div:first-child,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list li.item-list-item a > div:first-child {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list li.item-list-item a > div,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list li.item-list-item a > div {
|
||||
padding: 0px;
|
||||
padding-bottom: 0px !important;
|
||||
margin-right: 20px;
|
||||
display: block;
|
||||
height: 54px;
|
||||
width: 54px;
|
||||
padding: 0px !important;
|
||||
margin-right: 20px; }
|
||||
width: 54px; }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list li.item-list-item img,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list li.item-list-item img {
|
||||
height: auto;
|
||||
width: 54px;
|
||||
min-width: 54px;
|
||||
padding: 0px;
|
||||
margin-right: 20px; }
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list li.item-list-item a.item-without-image img,
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list li.item-list-item a.item-without-image img {
|
||||
display: none; }
|
||||
|
|
@ -321,26 +522,6 @@
|
|||
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list li.item-list-item:hover a {
|
||||
color: var(--tainacan-block-gray5, #454647);
|
||||
text-decoration: none; }
|
||||
@media only screen and (max-width: 1600px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.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(25% - 24px);
|
||||
width: calc(25% - 24px); } }
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.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(33.333% - 24px);
|
||||
width: calc(33.333% - 24px); } }
|
||||
@media only screen and (max-width: 768px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.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(50% - 24px);
|
||||
width: calc(50% - 24px); } }
|
||||
@media only screen and (max-width: 498px) {
|
||||
.wp-block-tainacan-dynamic-items-list ul.items-list.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);
|
||||
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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,180 @@
|
|||
export default [
|
||||
/* Deprecated on Tainacan 0.18, due to the introduction of maxColumnsCount and fix of osaicItemFocalPointm */
|
||||
{
|
||||
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"
|
||||
},
|
||||
mosaicHeight: {
|
||||
type: Number,
|
||||
value: 280
|
||||
},
|
||||
mosaicGridColumns: {
|
||||
type: Number,
|
||||
value: 3
|
||||
},
|
||||
mosaicGridRows: {
|
||||
type: Number,
|
||||
value: 3
|
||||
},
|
||||
sampleBackgroundImage: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
osaicItemFocalPointm: {
|
||||
type: Object,
|
||||
default: {
|
||||
x: 0.5,
|
||||
y: 0.5
|
||||
}
|
||||
},
|
||||
mosaicDensity: {
|
||||
type: Number,
|
||||
default: 5
|
||||
}
|
||||
},
|
||||
supports: {
|
||||
align: ['full', 'wide'],
|
||||
html: false,
|
||||
},
|
||||
save({ attributes, className }) {
|
||||
const {
|
||||
content,
|
||||
blockId,
|
||||
collectionId,
|
||||
showImage,
|
||||
showName,
|
||||
layout,
|
||||
gridMargin,
|
||||
searchURL,
|
||||
maxItemsNumber,
|
||||
order,
|
||||
showSearchBar,
|
||||
showCollectionHeader,
|
||||
showCollectionLabel,
|
||||
collectionBackgroundColor,
|
||||
collectionTextColor,
|
||||
mosaicHeight,
|
||||
mosaicGridRows,
|
||||
mosaicGridColumns,
|
||||
mosaicItemFocalPoint,
|
||||
mosaicDensity
|
||||
} = 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-density={ mosaicDensity }
|
||||
mosaic-grid-rows={ mosaicGridRows }
|
||||
mosaic-grid-columns={ mosaicGridColumns }
|
||||
mosaic-item-focal-point-x={ (mosaicItemFocalPoint && mosaicItemFocalPoint.x ? mosaicItemFocalPoint.x : 0.5) }
|
||||
mosaic-item-focal-point-y={ (mosaicItemFocalPoint && mosaicItemFocalPoint.y ? mosaicItemFocalPoint.y : 0.5) }
|
||||
collection-background-color={ collectionBackgroundColor }
|
||||
collection-text-color={ collectionTextColor }
|
||||
grid-margin={ gridMargin }
|
||||
max-items-number={ maxItemsNumber }
|
||||
order={ order }
|
||||
tainacan-api-root={ tainacan_blocks.root }
|
||||
tainacan-base-url={ tainacan_blocks.base_url }
|
||||
id={ 'wp-block-tainacan-dynamic-items-list_' + blockId }>
|
||||
{ content }
|
||||
</div>
|
||||
}
|
||||
},
|
||||
/* Deprecated on Tainacan 0.17.2, due to the introduction of support: fontSize */
|
||||
{
|
||||
attributes: {
|
||||
|
|
|
|||
|
|
@ -34,6 +34,8 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
mosaicGridColumns: 3,
|
||||
mosaicItemFocalPointX : 0.5,
|
||||
mosaicItemFocalPointY : 0.5,
|
||||
maxColumnsCount: 4,
|
||||
cropImagesToSquare: true,
|
||||
order: 'asc',
|
||||
showSearchBar: false,
|
||||
showCollectionHeader: false,
|
||||
|
|
@ -58,6 +60,8 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
mosaicGridColumns: this.mosaicGridColumns,
|
||||
mosaicItemFocalPointX: this.mosaicItemFocalPointX,
|
||||
mosaicItemFocalPointY: this.mosaicItemFocalPointY,
|
||||
maxColumnsCount: this.maxColumnsCount,
|
||||
cropImagesToSquare: this.cropImagesToSquare,
|
||||
searchURL: this.searchURL,
|
||||
maxItemsNumber: this.maxItemsNumber,
|
||||
order: this.order,
|
||||
|
|
@ -86,6 +90,8 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
this.mosaicGridColumns = this.$el.attributes['mosaic-grid-columns'] != undefined ? Number(this.$el.attributes['mosaic-grid-columns'].value) : undefined;
|
||||
this.mosaicItemFocalPointX = this.$el.attributes['mosaic-item-focal-point-x'] != undefined ? Number(this.$el.attributes['mosaic-item-focal-point-x'].value) : undefined;
|
||||
this.mosaicItemFocalPointY = this.$el.attributes['mosaic-item-focal-point-y'] != undefined ? Number(this.$el.attributes['mosaic-item-focal-point-y'].value) : undefined;
|
||||
this.maxColumnsCount = this.$el.attributes['max-columns-count'] != undefined ? this.$el.attributes['max-columns-count'].value : 4;
|
||||
this.cropImagesToSquare = this.$el.attributes['crop-images-to-square'] != undefined ? this.$el.attributes['crop-images-to-square'].value == 'true' : true;
|
||||
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.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? this.$el.attributes['show-search-bar'].value == 'true' : false;
|
||||
|
|
|
|||
|
|
@ -13,13 +13,13 @@
|
|||
<div
|
||||
:style="{
|
||||
backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '',
|
||||
paddingRight: collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ? '' : '20px',
|
||||
paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) ? '1em' : '',
|
||||
paddingRight: collection && collection.thumbnail && (collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] || collection.thumbnail['medium']) ? '' : '20px',
|
||||
paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] && !collection.thumbnail['medium'])) ? '1em' : '',
|
||||
width: collection && collection.header_image ? '' : '100%'
|
||||
}"
|
||||
:class="
|
||||
'collection-name ' +
|
||||
((!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '')
|
||||
((!collection || !collection.thumbnail || (!collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '')
|
||||
">
|
||||
<h3 :style="{ color: collectionTextColor ? collectionTextColor : '' }">
|
||||
<span
|
||||
|
|
@ -32,17 +32,17 @@
|
|||
</h3>
|
||||
</div>
|
||||
<div
|
||||
v-if="collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])"
|
||||
v-if="collection && collection.thumbnail && (collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] || collection.thumbnail['medium'])"
|
||||
class="collection-thumbnail"
|
||||
:style="{
|
||||
backgroundImage: 'url(' + (collection.thumbnail['tainacan-medium'] != undefined ? (collection.thumbnail['tainacan-medium'][0]) : (collection.thumbnail['medium'][0])) + ')',
|
||||
backgroundImage: 'url(' + (collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] != undefined ? (collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )][0]) : (collection.thumbnail['medium'][0])) + ')',
|
||||
}"/>
|
||||
<div
|
||||
class="collection-header-image"
|
||||
:style="{
|
||||
backgroundImage: collection.header_image ? 'url(' + collection.header_image + ')' : '',
|
||||
minHeight: collection && collection.header_image ? '' : '80px',
|
||||
display: !(collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])) ? collection && collection.header_image ? '' : 'none' : ''
|
||||
display: !(collection && collection.thumbnail && (collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] || collection.thumbnail['medium'])) ? collection && collection.header_image ? '' : 'none' : ''
|
||||
}"/>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -189,16 +189,15 @@
|
|||
<ul
|
||||
v-if="items.length > 0 && layout !== 'mosaic'"
|
||||
:style="{
|
||||
gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + (showName ? 220 : 185)) + 'px)' : 'inherit',
|
||||
gridGap: layout == 'grid' ? ((showName ? gridMargin + 24 : gridMargin) + 'px') : 'inherit',
|
||||
marginTop: showSearchBar || showCollectionHeader ? '1.35em' : '0px'
|
||||
}"
|
||||
class="items-list"
|
||||
:class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')">
|
||||
:class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '') + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
|
||||
<li
|
||||
:key="index"
|
||||
v-for="(item, index) of items"
|
||||
class="item-list-item"
|
||||
:style="{ marginBottom: layout == 'grid' ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '' }">
|
||||
class="item-list-item">
|
||||
<a
|
||||
:id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
|
||||
:href="item.url"
|
||||
|
|
@ -206,11 +205,11 @@
|
|||
:class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
|
||||
<blur-hash-image
|
||||
v-if="showImage"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium')"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium')"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item['document_mimetype'])"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium', item['document_mimetype'])"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium')"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], ( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ), item['document_mimetype'])"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], ( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ), item['document_mimetype'])"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<span>{{ item.title ? item.title : '' }}</span>
|
||||
|
|
@ -240,7 +239,6 @@
|
|||
:key="mosaicIndex"
|
||||
v-for="(mosaicGroup, mosaicIndex) of mosaicPartition(items)">
|
||||
<li
|
||||
|
||||
:key="index"
|
||||
v-for="(item, index) of mosaicGroup"
|
||||
class="item-list-item"
|
||||
|
|
@ -254,11 +252,11 @@
|
|||
target="_blank"
|
||||
:class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
|
||||
<blur-hash-image
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium')"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium')"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item['document_mimetype'])"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium', item['document_mimetype'])"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium')"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ), item['document_mimetype'])"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ), item['document_mimetype'])"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<span>{{ item.title ? item.title : '' }}</span>
|
||||
|
|
@ -296,6 +294,8 @@ export default {
|
|||
mosaicGridColumns: Number,
|
||||
mosaicItemFocalPointX: Number,
|
||||
mosaicItemFocalPointY: Number,
|
||||
maxColumnsCount: Number,
|
||||
cropImagesToSquare: Boolean,
|
||||
order: String,
|
||||
showSearchBar: Boolean,
|
||||
showCollectionHeader: Boolean,
|
||||
|
|
|
|||
|
|
@ -285,21 +285,113 @@
|
|||
ul.items-list.items-layout-grid,
|
||||
ul.items-list-edit.items-layout-grid {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@include display-grid;
|
||||
-ms-grid-columns: 220px 220px 220px 220px 220px;
|
||||
grid-template-columns: repeat(auto-fill, 220px);
|
||||
grid-gap: 0px;
|
||||
gap: 0px;
|
||||
grid-gap: 24px;
|
||||
gap: 24px;
|
||||
justify-content: space-evenly;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
|
||||
&:not(.max-columns-count-1):not(.max-columns-count-2):not(.max-columns-count-3):not(.max-columns-count-4):not(.max-columns-count-5):not(.max-columns-count-6):not(.max-columns-count-7) {
|
||||
-ms-grid-columns: 220px 220px 220px 220px;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
&.max-columns-count-7 {
|
||||
-ms-grid-columns: 220px 220px 220px 220px 220px 220px 220px;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
}
|
||||
&.max-columns-count-6 {
|
||||
-ms-grid-columns: 220px 220px 220px 220px 220px 220px;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
&.max-columns-count-5 {
|
||||
-ms-grid-columns: 220px 220px 220px 220px 220px;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
&.max-columns-count-4 {
|
||||
-ms-grid-columns: 220px 220px 220px 220px;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
&.max-columns-count-3 {
|
||||
-ms-grid-columns: 220px 220px 220px;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
&.max-columns-count-2 {
|
||||
-ms-grid-columns: 220px 220px;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
&.max-columns-count-1 {
|
||||
-ms-grid-columns: 220px;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1600px) {
|
||||
&.max-columns-count-7,
|
||||
&.max-columns-count-6 { -ms-grid-columns: 220px 220px 220px 220px 220px 220px;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1400px) {
|
||||
&.max-columns-count-7,
|
||||
&.max-columns-count-6,
|
||||
&.max-columns-count-5 {
|
||||
-ms-grid-columns: 220px 220px 220px 220px 220px;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1280px) {
|
||||
&:not(.max-columns-count-1):not(.max-columns-count-2):not(.max-columns-count-3):not(.max-columns-count-4):not(.max-columns-count-5):not(.max-columns-count-6):not(.max-columns-count-7),
|
||||
&.max-columns-count-7,
|
||||
&.max-columns-count-6,
|
||||
&.max-columns-count-5,
|
||||
&.max-columns-count-4 {
|
||||
-ms-grid-columns: 220px 220px 220px 220px;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1024px) {
|
||||
&:not(.max-columns-count-1):not(.max-columns-count-2):not(.max-columns-count-3):not(.max-columns-count-4):not(.max-columns-count-5):not(.max-columns-count-6):not(.max-columns-count-7),
|
||||
&.max-columns-count-7,
|
||||
&.max-columns-count-6,
|
||||
&.max-columns-count-5,
|
||||
&.max-columns-count-4,
|
||||
&.max-columns-count-3 {
|
||||
-ms-grid-columns: 220px 220px 220px;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
&:not(.max-columns-count-1):not(.max-columns-count-2):not(.max-columns-count-3):not(.max-columns-count-4):not(.max-columns-count-5):not(.max-columns-count-6):not(.max-columns-count-7),
|
||||
&.max-columns-count-7,
|
||||
&.max-columns-count-6,
|
||||
&.max-columns-count-5,
|
||||
&.max-columns-count-4,
|
||||
&.max-columns-count-3,
|
||||
&.max-columns-count-2 {
|
||||
-ms-grid-columns: 220px 220px;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 498px) {
|
||||
&:not(.max-columns-count-1):not(.max-columns-count-2):not(.max-columns-count-3):not(.max-columns-count-4):not(.max-columns-count-5):not(.max-columns-count-6):not(.max-columns-count-7),
|
||||
&.max-columns-count-7,
|
||||
&.max-columns-count-6,
|
||||
&.max-columns-count-5,
|
||||
&.max-columns-count-4,
|
||||
&.max-columns-count-3,
|
||||
&.max-columns-count-2,
|
||||
&.max-columns-count-1 {
|
||||
-ms-grid-columns: 220px;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
li.item-list-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 12px 12px 24px 12px;
|
||||
margin-bottom: 12px;
|
||||
width: 185px;
|
||||
width: 100%;
|
||||
flex-basis: 220px; // Helps with the flex fallback in case grid is not available;
|
||||
margin: auto;
|
||||
|
||||
a {
|
||||
color: var(--tainacan-block-gray5, $gray5);
|
||||
|
|
@ -310,8 +402,7 @@
|
|||
|
||||
img {
|
||||
height: auto;
|
||||
width: 185px;
|
||||
min-width: 185px;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
|
@ -343,19 +434,63 @@
|
|||
ul.items-list.items-layout-list,
|
||||
ul.items-list-edit.items-layout-list {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
margin-left: 0;
|
||||
@include display-grid;
|
||||
align-items: self-start;
|
||||
list-style-type: none;
|
||||
|
||||
&.max-columns-count-7 {
|
||||
grid-template-columns: repeat(7, auto);
|
||||
@media only screen and (max-width: 1600px) { grid-template-columns: repeat(6, auto); }
|
||||
@media only screen and (max-width: 1400px) { grid-template-columns: repeat(5, auto); }
|
||||
@media only screen and (max-width: 1280px) { grid-template-columns: repeat(4, auto); }
|
||||
@media only screen and (max-width: 1024px) { grid-template-columns: repeat(3, auto); }
|
||||
@media only screen and (max-width: 768px) { grid-template-columns: repeat(2, auto); }
|
||||
@media only screen and (max-width: 498px) { grid-template-columns: repeat(1, auto); }
|
||||
}
|
||||
&.max-columns-count-6 {
|
||||
grid-template-columns: repeat(6, auto);
|
||||
@media only screen and (max-width: 1400px) { grid-template-columns: repeat(5, auto); }
|
||||
@media only screen and (max-width: 1280px) { grid-template-columns: repeat(4, auto); }
|
||||
@media only screen and (max-width: 1024px) { grid-template-columns: repeat(3, auto); }
|
||||
@media only screen and (max-width: 768px) { grid-template-columns: repeat(2, auto); }
|
||||
@media only screen and (max-width: 498px) { grid-template-columns: repeat(1, auto); }
|
||||
}
|
||||
&.max-columns-count-5 {
|
||||
grid-template-columns: repeat(5, auto);
|
||||
@media only screen and (max-width: 1280px) { grid-template-columns: repeat(4, auto); }
|
||||
@media only screen and (max-width: 1024px) { grid-template-columns: repeat(3, auto); }
|
||||
@media only screen and (max-width: 768px) { grid-template-columns: repeat(2, auto); }
|
||||
@media only screen and (max-width: 498px) { grid-template-columns: repeat(1, auto); }
|
||||
}
|
||||
&.max-columns-count-4 {
|
||||
grid-template-columns: repeat(4, auto);
|
||||
@media only screen and (max-width: 1024px) { grid-template-columns: repeat(3, auto); }
|
||||
@media only screen and (max-width: 768px) { grid-template-columns: repeat(2, auto); }
|
||||
@media only screen and (max-width: 498px) { grid-template-columns: repeat(1, auto); }
|
||||
}
|
||||
&.max-columns-count-3 {
|
||||
grid-template-columns: repeat(3, auto);
|
||||
@media only screen and (max-width: 768px) { grid-template-columns: repeat(2, auto); }
|
||||
@media only screen and (max-width: 498px) { grid-template-columns: repeat(1, auto); }
|
||||
}
|
||||
&.max-columns-count-2 {
|
||||
grid-template-columns: repeat(2, auto);
|
||||
@media only screen and (max-width: 498px) { grid-template-columns: repeat(1, auto); }
|
||||
}
|
||||
&.max-columns-count-1 {
|
||||
grid-template-columns: repeat(1, auto);
|
||||
}
|
||||
|
||||
&>div {
|
||||
flex-basis: 220px; // Helps flex fallback in case grid is not available
|
||||
}
|
||||
|
||||
li.item-list-item {
|
||||
position: relative;
|
||||
margin: 12px 12px 24px 12px;
|
||||
margin-bottom: 12px;
|
||||
min-height: 54px;
|
||||
min-width: calc(20% - 24px);
|
||||
width: calc(20% - 24px);
|
||||
display: inline-block;
|
||||
padding: 12px 12px 24px 12px;
|
||||
|
||||
a {
|
||||
color: var(--tainacan-block-gray5, $gray5);
|
||||
|
|
@ -364,15 +499,25 @@
|
|||
align-items: center;
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
|
||||
&>div:first-child {
|
||||
|
||||
&>div {
|
||||
padding: 0px;
|
||||
padding-bottom: 0px !important;
|
||||
margin-right: 20px;
|
||||
display: block;
|
||||
height: 54px;
|
||||
width: 54px;
|
||||
padding: 0px !important;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
width: 54px;
|
||||
min-width: 54px;
|
||||
padding: 0px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
a.item-without-image img {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -381,26 +526,6 @@
|
|||
color: var(--tainacan-block-gray5, $gray5);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1600px) {
|
||||
min-width: calc(25% - 24px);
|
||||
width: calc(25% - 24px);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
min-width: calc(33.333% - 24px);
|
||||
width: calc(33.333% - 24px);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
min-width: calc(50% - 24px);
|
||||
width: calc(50% - 24px);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 498px) {
|
||||
min-width: calc(100% - 24px);
|
||||
width: calc(100% - 24px);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -140,7 +140,7 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
type: String,
|
||||
default: ''
|
||||
},
|
||||
osaicItemFocalPointm: {
|
||||
mosaicItemFocalPoint: {
|
||||
type: Object,
|
||||
default: {
|
||||
x: 0.5,
|
||||
|
|
@ -150,6 +150,14 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
mosaicDensity: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
maxColumnsCount: {
|
||||
type: Number,
|
||||
default: 4
|
||||
},
|
||||
cropImagesToSquare: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
}
|
||||
},
|
||||
supports: {
|
||||
|
|
@ -185,11 +193,24 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
mosaicGridRows,
|
||||
mosaicItemFocalPoint,
|
||||
sampleBackgroundImage,
|
||||
mosaicDensity
|
||||
mosaicDensity,
|
||||
maxColumnsCount,
|
||||
cropImagesToSquare
|
||||
} = attributes;
|
||||
|
||||
// Obtains block's client id to render it on save function
|
||||
setAttributes({ blockId: clientId });
|
||||
|
||||
// Sets some defaults that were not working
|
||||
if (maxColumnsCount === undefined) {
|
||||
maxColumnsCount = 5;
|
||||
setAttributes({ maxColumnsCount: maxColumnsCount });
|
||||
}
|
||||
if (cropImagesToSquare === undefined) {
|
||||
cropImagesToSquare = true;
|
||||
setAttributes({ cropImagesToSquare: cropImagesToSquare });
|
||||
}
|
||||
|
||||
const thumbHelper = ThumbnailHelperFunctions();
|
||||
|
||||
function prepareItem(item) {
|
||||
|
|
@ -198,7 +219,6 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
key={ item.id }
|
||||
className="item-list-item"
|
||||
style={ {
|
||||
marginBottom: layout == 'grid' ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '',
|
||||
backgroundImage: layout == 'mosaic' ? `url(${ thumbHelper.getSrc(item['thumbnail'], 'medium_large', item['document_mimetype']) })` : 'none',
|
||||
backgroundPosition: layout == 'mosaic' ? `${ (mosaicItemFocalPoint && mosaicItemFocalPoint.x ? mosaicItemFocalPoint.x : 0.5) * 100 }% ${ (mosaicItemFocalPoint && mosaicItemFocalPoint.y ? mosaicItemFocalPoint.y : 0.5) * 100 }%` : 'none'
|
||||
}}
|
||||
|
|
@ -213,8 +233,8 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
} }
|
||||
className={ (!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '') }>
|
||||
<img
|
||||
src={ thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item['document_mimetype']) }
|
||||
srcSet={ thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium', item['document_mimetype']) }
|
||||
src={ thumbHelper.getSrc(item['thumbnail'], (layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full'), item['document_mimetype']) }
|
||||
srcSet={ thumbHelper.getSrcSet(item['thumbnail'], (layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full'), item['document_mimetype']) }
|
||||
alt={ item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : $root.__( 'Thumbnail', 'tainacan' )) }/>
|
||||
<span>{ item.title ? item.title : '' }</span>
|
||||
</a>
|
||||
|
|
@ -601,17 +621,30 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
<hr></hr>
|
||||
<div>
|
||||
{ layout == 'list' ?
|
||||
<ToggleControl
|
||||
label={__('Image', 'tainacan')}
|
||||
help={ showImage ? __("Toggle to show item's image", 'tainacan') : __("Do not show item's image", 'tainacan')}
|
||||
checked={ showImage }
|
||||
onChange={ ( isChecked ) => {
|
||||
showImage = isChecked;
|
||||
setAttributes({ showImage: showImage });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
/>
|
||||
<div style={{ marginTop: '16px'}}>
|
||||
<RangeControl
|
||||
label={ __('Maximum number of columns on a wide screen', 'tainacan') }
|
||||
value={ maxColumnsCount ? maxColumnsCount : 5 }
|
||||
onChange={ ( aMaxColumnsCount ) => {
|
||||
maxColumnsCount = aMaxColumnsCount;
|
||||
setAttributes( { maxColumnsCount: aMaxColumnsCount } );
|
||||
setContent();
|
||||
}}
|
||||
min={ 1 }
|
||||
max={ 7 }
|
||||
/>
|
||||
<ToggleControl
|
||||
label={__('Image', 'tainacan')}
|
||||
help={ showImage ? __("Toggle to show item's image", 'tainacan') : __("Do not show item's image", 'tainacan')}
|
||||
checked={ showImage }
|
||||
onChange={ ( isChecked ) => {
|
||||
showImage = isChecked;
|
||||
setAttributes({ showImage: showImage });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
: null }
|
||||
{ layout == 'grid' || layout == 'mosaic' ?
|
||||
<div>
|
||||
|
|
@ -641,6 +674,32 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
</div>
|
||||
</div>
|
||||
: null }
|
||||
{ layout == 'grid' ?
|
||||
<div style={{ marginTop: '16px'}}>
|
||||
<RangeControl
|
||||
label={ __('Maximum number of columns on a wide screen', 'tainacan') }
|
||||
value={ maxColumnsCount ? maxColumnsCount : 5 }
|
||||
onChange={ ( aMaxColumnsCount ) => {
|
||||
maxColumnsCount = aMaxColumnsCount;
|
||||
setAttributes( { maxColumnsCount: aMaxColumnsCount } );
|
||||
setContent();
|
||||
}}
|
||||
min={ 1 }
|
||||
max={ 7 }
|
||||
/>
|
||||
<ToggleControl
|
||||
label={__('Crop Images', 'tainacan')}
|
||||
help={ cropImagesToSquare ? __('Do not use square cropeed version of the item thumbnail.', 'tainacan') : __('Toggle to use square cropped version of the item thumbnail.', 'tainacan') }
|
||||
checked={ cropImagesToSquare }
|
||||
onChange={ ( isChecked ) => {
|
||||
cropImagesToSquare = isChecked;
|
||||
setAttributes({ cropImagesToSquare: cropImagesToSquare });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
: null }
|
||||
</div>
|
||||
</PanelBody>
|
||||
{ layout == 'mosaic' ?
|
||||
|
|
@ -923,11 +982,11 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
{ layout !== 'mosaic' ? (
|
||||
<ul
|
||||
style={{
|
||||
gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + (showName ? 220 : 185)) + 'px)' : 'inherit',
|
||||
gridGap: layout == 'grid' ? ((showName ? gridMargin + 24 : gridMargin) + 'px') : 'inherit',
|
||||
marginTop: showSearchBar || showCollectionHeader ? '-' + (Number(gridMargin)/2) : '0px',
|
||||
padding: (Number(gridMargin)/4) + 'px',
|
||||
}}
|
||||
className={'items-list-edit items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')}>
|
||||
className={'items-list-edit items-layout-' + layout + (!showName ? ' items-list-without-margin' : '') + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '') }>
|
||||
{ items }
|
||||
</ul>
|
||||
) :
|
||||
|
|
@ -994,7 +1053,9 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
mosaicGridRows,
|
||||
mosaicGridColumns,
|
||||
mosaicItemFocalPoint,
|
||||
mosaicDensity
|
||||
mosaicDensity,
|
||||
maxColumnsCount,
|
||||
cropImagesToSquare
|
||||
} = attributes;
|
||||
|
||||
return <div
|
||||
|
|
@ -1006,6 +1067,7 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
show-search-bar={ '' + showSearchBar }
|
||||
show-collection-header={ '' + showCollectionHeader }
|
||||
show-collection-label={ '' + showCollectionLabel }
|
||||
crop-images-to-square={ '' + cropImagesToSquare }
|
||||
layout={ layout }
|
||||
mosaic-height={ mosaicHeight }
|
||||
mosaic-density={ mosaicDensity }
|
||||
|
|
@ -1013,6 +1075,7 @@ registerBlockType('tainacan/dynamic-items-list', {
|
|||
mosaic-grid-columns={ mosaicGridColumns }
|
||||
mosaic-item-focal-point-x={ (mosaicItemFocalPoint && mosaicItemFocalPoint.x ? mosaicItemFocalPoint.x : 0.5) }
|
||||
mosaic-item-focal-point-y={ (mosaicItemFocalPoint && mosaicItemFocalPoint.y ? mosaicItemFocalPoint.y : 0.5) }
|
||||
max-columns-count={ maxColumnsCount }
|
||||
collection-background-color={ collectionBackgroundColor }
|
||||
collection-text-color={ collectionTextColor }
|
||||
grid-margin={ gridMargin }
|
||||
|
|
|
|||
Loading…
Reference in New Issue