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

Passes items terms carrossel to the new thumbnail scheme. #456 #463 #467.

This commit is contained in:
mateuswetah 2021-02-09 16:17:24 -03:00
parent 02081485cf
commit 5d1a69eb1a
15 changed files with 191 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,12 +18,12 @@
display: flex;
display: -ms-grid;
display: grid;
-ms-grid-columns: 33% 33% 33%;
grid-template-columns: 33% 33% 33%;
-ms-grid-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
-ms-grid-rows: 50% 50%;
grid-template-rows: 50% 50%;
grid-column-gap: 2px;
grid-row-gap: 2px;
grid-gap: 5px;
gap: 5px;
width: 60px;
height: 40px;
margin: 4px auto 8px auto; }
@ -35,12 +35,12 @@
-ms-grid-row-span: 2;
grid-column: 1/3;
grid-row: 1/3;
width: 41px;
height: 42px; }
width: 100%;
height: 100%; }
.components-panel__body .term-carousel-view-modes button.term-carousel-view-mode-grid div > div {
flex-basis: 50%;
width: 20px;
height: 20px;
width: 100%;
height: 100%;
background: var(--tainacan-block-gray4, #555758);
transition: background-color ease 0.5s; }
.components-panel__body .term-carousel-view-modes button.term-carousel-view-mode-thumbnail {
@ -139,10 +139,13 @@
display: flex;
display: -ms-grid;
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows: 50% 50%;
width: 100%; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container .swiper-slide.term-list-item-grid .term-items-grid img:first-of-type {
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
width: 100%;
grid-gap: 5px;
gap: 5px;
box-sizing: border-box; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container .swiper-slide.term-list-item-grid .term-items-grid > *:first-of-type {
flex-basis: 100%;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
@ -150,11 +153,10 @@
-ms-grid-row-span: 2;
grid-column: 1/3;
grid-row: 1/3; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container .swiper-slide.term-list-item-grid .term-items-grid img {
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container .swiper-slide.term-list-item-grid .term-items-grid > * {
flex-basis: 50%;
width: 100%;
height: auto;
padding: 2px;
margin-bottom: 0px; }
.wp-block-tainacan-carousel-terms-list .preview-warning {
width: 100%;
@ -313,7 +315,7 @@
display: flex;
display: -ms-grid;
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50% 50%; }
.wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item .term-items-grid img:first-of-type {
flex-basis: 100%;

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

File diff suppressed because one or more lines are too long

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

@ -1,5 +1,9 @@
.wp-block-tainacan-dynamic-items-list {
margin: 2em auto; }
margin-top: 2em;
margin-bottom: 2em; }
.wp-block-tainacan-dynamic-items-list:not(.alignfull) {
margin-left: auto;
margin-right: auto; }
.wp-block-tainacan-dynamic-items-list .spinner-container {
min-height: 56px;
padding: 1em;
@ -117,19 +121,23 @@
top: -78px !important; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-collection-header .collection-header-image {
background-color: transparent; } }
.wp-block-tainacan-dynamic-items-list.alignfull .dynamic-items-search-bar {
padding: 1.00em 2em 0.75em 2em; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar {
width: 100%;
display: flex;
align-items: center;
border-bottom: 1px solid var(--tainacan-block-gray3, #cbcbcb);
padding: 1.00em 0.5em 0.75em 0.5em; }
padding: 1.00em 0.5em 0.75em 0.5em;
position: relative; }
@media only screen and (max-width: 768px) {
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar {
flex-wrap: wrap; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar .search-button {
order: 4;
position: absolute;
margin-top: 0.75em; }
bottom: 0.875em;
left: 1.0em; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar input {
width: 100% !important;
order: 5;
@ -181,28 +189,6 @@
width: 100%;
border: 1px solid var(--tainacan-block-gray3, #cbcbcb);
box-shadow: none; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.items-list-without-margin,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.items-list-without-margin,
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.items-list-without-margin,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.items-list-without-margin {
grid-template-columns: repeat(auto-fill, 185px);
justify-content: center !important;
grid-template-rows: auto !important;
list-style: none; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.items-list-without-margin li,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.items-list-without-margin li,
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.items-list-without-margin li,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.items-list-without-margin li {
margin-top: 0 !important;
margin-right: 0 !important;
margin-left: 0 !important;
height: 185px !important; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list.items-list-without-margin li img,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list.items-list-without-margin li img,
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid.items-list-without-margin li img,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid.items-list-without-margin li img {
height: 185px !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; }
@ -335,24 +321,41 @@
.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;
display: flex;
flex-wrap: wrap;
width: 100%;
flex-basis: 220px;
margin: auto; }
flex-basis: 100%;
justify-content: center;
align-items: center; }
.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);
border: none;
font-weight: bold;
line-height: normal; }
line-height: normal;
display: flex;
flex-basis: 100%;
justify-content: center;
align-items: center;
flex-direction: column; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid li.item-list-item a > div,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item a > div {
width: 100%; }
.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 {
flex-basis: 100%;
height: auto;
width: 100%;
padding: 0px;
padding: 0px; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid li.item-list-item a:not(.item-without-title),
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item a:not(.item-without-title) {
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,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item a.item-without-title span {
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid li.item-list-item a > span,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item a > span {
margin-right: auto;
margin-top: 0.5em; }
.wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid li.item-list-item a.item-without-title > span,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item a.item-without-title > span {
display: none; }
.wp-block-tainacan-dynamic-items-list ul.items-list.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 {
@ -579,8 +582,8 @@
.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 {
.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 {

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

File diff suppressed because one or more lines are too long

4
src/assets/css/tainacan-gutenberg-block-facets-list.css
View File

@ -115,6 +115,8 @@
top: -78px !important; }
.wp-block-tainacan-facets-list .facets-collection-header .collection-header-image {
background-color: transparent; } }
.wp-block-tainacan-facets-list.alignfull .facets-search-bar {
padding: 1.00em 2em 0.75em 2em; }
.wp-block-tainacan-facets-list .facets-search-bar {
width: 100%;
display: flex;
@ -211,7 +213,7 @@
border: 1px solid var(--tainacan-block-gray3, #cbcbcb) !important; }
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid {
padding: 0;
padding: 0 2em;
flex-wrap: wrap;
display: flex;
display: -ms-grid;

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

File diff suppressed because one or more lines are too long

52
src/views/gutenberg-blocks/tainacan-collections/carousel-collections-list/index.js
View File

@ -10,6 +10,7 @@ import CarouselCollectionsModal from './carousel-collections-modal.js';
import tainacan from '../../js/axios.js';
import axios from 'axios';
import qs from 'qs';
import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js';
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
import DeprecatedBlocks from './carousel-collections-deprecated.js'
@ -158,6 +159,8 @@ registerBlockType('tainacan/carousel-collections-list', {
setAttributes({ cropImagesToSquare: cropImagesToSquare });
}
const thumbHelper = ThumbnailHelperFunctions();
function prepareItem(collection, collectionItems) {
return (
<li
@ -181,44 +184,17 @@ registerBlockType('tainacan/carousel-collections-list', {
{ !showCollectionThumbnail ?
<div class="collection-items-grid">
<img
src={
collectionItems[0] && collectionItems[0].thumbnail && collectionItems[0].thumbnail['tainacan-medium'][0] && collectionItems[0].thumbnail['tainacan-medium'][0]
?
collectionItems[0].thumbnail['tainacan-medium'][0]
:
(collectionItems[0] && collectionItems[0].thumbnail && collectionItems[0].thumbnail['thumbnail'][0] && collectionItems[0].thumbnail['thumbnail'][0]
?
collectionItems[0].thumbnail['thumbnail'][0]
:
`${tainacan_blocks.base_url}/assets/images/placeholder_square.png`)
}
alt={ collectionItems[0] && collectionItems[0].name ? collectionItems[0].name : __( 'Thumbnail', 'tainacan' ) }/>
<img
src={
collectionItems[1] && collectionItems[1].thumbnail && collectionItems[1].thumbnail['tainacan-medium'][0] && collectionItems[1].thumbnail['tainacan-medium'][0]
?
collectionItems[1].thumbnail['tainacan-medium'][0]
:
(collectionItems[1] && collectionItems[1].thumbnail && collectionItems[1].thumbnail['thumbnail'][0] && collectionItems[1].thumbnail['thumbnail'][0]
?
collectionItems[1].thumbnail['thumbnail'][0]
:
`${tainacan_blocks.base_url}/assets/images/placeholder_square.png`)
}
alt={ collectionItems[1] && collectionItems[1].name ? collectionItems[1].name : __( 'Thumbnail', 'tainacan' ) }/>
<img
src={
collectionItems[2] && collectionItems[2].thumbnail && collectionItems[2].thumbnail['tainacan-medium'][0] && collectionItems[2].thumbnail['tainacan-medium'][0]
?
collectionItems[2].thumbnail['tainacan-medium'][0]
:
(collectionItems[2] && collectionItems[2].thumbnail && collectionItems[2].thumbnail['thumbnail'][0] && collectionItems[2].thumbnail['thumbnail'][0]
?
collectionItems[2].thumbnail['thumbnail'][0]
:
`${tainacan_blocks.base_url}/assets/images/placeholder_square.png`)
}
alt={ collectionItems[2] && collectionItems[2].name ? collectionItems[2].name : __( 'Thumbnail', 'tainacan' ) }/>
src={ collectionItems[0] ? thumbHelper.getSrc(collectionItems[0]['thumbnail'], 'tainacan-medium', collectionItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
srcset={ collectionItems[0] ? thumbHelper.getSrcSet(collectionItems[0]['thumbnail'], 'tainacan-medium', collectionItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
alt={ collectionItems[0] && collectionItems[0].thumbnail_alt ? collectionItems[0].thumbnail_alt : (collectionItems[0] && collectionItems[0].name ? collectionItems[0].name : __( 'Thumbnail', 'tainacan' )) } />
<img
src={ collectionItems[1] ? thumbHelper.getSrc(collectionItems[1]['thumbnail'], 'tainacan-medium', collectionItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
srcset={ collectionItems[1] ? thumbHelper.getSrcSet(collectionItems[1]['thumbnail'], 'tainacan-medium', collectionItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
alt={ collectionItems[1] && collectionItems[1].thumbnail_alt ? collectionItems[1].thumbnail_alt : (collectionItems[1] && collectionItems[1].name ? collectionItems[1].name : __( 'Thumbnail', 'tainacan' )) } />
<img
src={ collectionItems[2] ? thumbHelper.getSrc(collectionItems[2]['thumbnail'], 'tainacan-medium', collectionItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
srcset={ collectionItems[2] ? thumbHelper.getSrcSet(collectionItems[2]['thumbnail'], 'tainacan-medium', collectionItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
alt={ collectionItems[2] && collectionItems[2].thumbnail_alt ? collectionItems[2].thumbnail_alt : (collectionItems[2] && collectionItems[2].name ? collectionItems[2].name : __( 'Thumbnail', 'tainacan' )) } />
</div>
:
<img

5
src/views/gutenberg-blocks/tainacan-facets/facets-list/facets-list.scss
View File

@ -137,6 +137,9 @@
}
// Search control bar
&.alignfull .facets-search-bar {
padding: 1.00em 2em 0.75em 2em;
}
.facets-search-bar {
width: 100%;
display: flex;
@ -258,7 +261,7 @@
// Grid View Mode ----------------------------------------------------
ul.facets-list.facets-layout-grid,
ul.facets-list-edit.facets-layout-grid {
padding: 0;
padding: 0 2em;
@include display-grid;
justify-content: space-evenly;
list-style-type: none;

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

@ -151,19 +151,20 @@
<ul
v-if="layout !== 'mosaic'"
:style="{
gridTemplateColumns: layout == 'grid' ? 'repeat(auto-fill, ' + (gridMargin + (showName ? 220 : 185)) + 'px)' : 'inherit',
marginTop: showSearchBar || showCollectionHeader ? '1.34em' : '0px'
marginTop: showSearchBar || showCollectionHeader ? '1.34em' : '0px',
gridGap: (showName ? gridMargin + 24 : gridMargin) + 'px',
gap: (showName ? gridMargin + 24 : gridMargin) + 'px'
}"
class="items-list"
:class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')">
<li
:key="item"
v-for="item in Number(maxItemsNumber)"
class="item-list-item skeleton"
:style="{
marginBottom: layout == 'grid' ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '',
height: layout == 'grid' ? '230px' : '54px'
}" />
:class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '') + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
<li
:key="item"
v-for="item in Number(maxItemsNumber)"
class="item-list-item skeleton"
:style="{
marginBottom: layout == 'grid' ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '',
height: layout == 'grid' ? '230px' : '54px'
}" />
</ul>
<ul
v-if="layout === 'mosaic'"
@ -207,8 +208,8 @@
v-if="showImage"
: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'])"
: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" />

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

@ -1,7 +1,13 @@
@import '../../gutenberg-blocks-variables.scss';
.wp-block-tainacan-dynamic-items-list {
margin: 2em auto;
margin-top: 2em;
margin-bottom: 2em;
&:not(.alignfull) {
margin-left: auto;
margin-right: auto;
}
// Spinner
.spinner-container {
@ -142,12 +148,16 @@
}
// Search control bar
&.alignfull .dynamic-items-search-bar {
padding: 1.00em 2em 0.75em 2em;
}
.dynamic-items-search-bar {
width: 100%;
display: flex;
align-items: center;
border-bottom: 1px solid var(--tainacan-block-gray3, $gray3);
padding: 1.00em 0.5em 0.75em 0.5em;
position: relative;
@media only screen and (max-width: 768px) {
flex-wrap: wrap;
@ -155,7 +165,8 @@
.search-button {
order: 4;
position: absolute;
margin-top: 0.75em;
bottom: 0.875em;
left: 1.0em;
}
input {
width: 100% !important;
@ -223,27 +234,6 @@
}
// Style for both grid and list View Modes ----------------------------------------------------
ul.items-list.items-layout-list.items-list-without-margin,
ul.items-list-edit.items-layout-list.items-list-without-margin,
ul.items-list.items-layout-grid.items-list-without-margin,
ul.items-list-edit.items-layout-grid.items-list-without-margin {
grid-template-columns: repeat(auto-fill, 185px);
justify-content: center !important;
grid-template-rows: auto !important;
list-style: none;
li {
margin-top: 0 !important;
margin-right: 0 !important;
margin-left: 0 !important;
height: 185px !important;
img {
height: 185px !important;
margin-bottom: 0px !important;
}
}
}
ul.items-list-edit li.item-list-item {
display: flex;
align-items: flex-start;
@ -388,26 +378,44 @@
li.item-list-item {
position: relative;
display: block;
display: flex;
flex-wrap: wrap;
width: 100%;
flex-basis: 220px; // Helps with the flex fallback in case grid is not available;
margin: auto;
flex-basis: 100%;
justify-content: center;
align-items: center;
a {
color: var(--tainacan-block-gray5, $gray5);
border: none;
font-weight: bold;
line-height: normal;
display: flex;
flex-basis: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
&>div {
width: 100%;
}
}
img {
flex-basis: 100%;
height: auto;
width: 100%;
padding: 0px;
margin-bottom: 0.5em;
}
a.item-without-title span {
a:not(.item-without-title) {
margin-bottom: 0.5em;
}
a>span {
margin-right: auto;
margin-top: 0.5em;
}
a.item-without-title>span {
display: none;
}
@ -588,7 +596,7 @@
}
&:hover a span { opacity: 1 };
a.item-without-title span {
a.item-without-title>span {
display: none;
}

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

@ -233,8 +233,8 @@ registerBlockType('tainacan/dynamic-items-list', {
} }
className={ (!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '') }>
<img
src={ thumbHelper.getSrc(item['thumbnail'], (layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full'), item['document_mimetype']) }
srcSet={ thumbHelper.getSrcSet(item['thumbnail'], (layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full'), item['document_mimetype']) }
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>

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

@ -1,5 +1,7 @@
import Vue from 'vue';
import CarouselTermsListTheme from './carousel-terms-list-theme.vue';
import { ThumbnailHelperPlugin } from '../../../admin/js/utilities.js';
import VueBlurHash from 'vue-blurhash';
// Vue Dev Tools!
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
@ -77,7 +79,9 @@ document.addEventListener("DOMContentLoaded", () => {
}
}
};
Vue.use(VueBlurHash);
Vue.use(ThumbnailHelperPlugin);
new Vue( Object.assign({ el: '#' + blockId }, vueOptions) );
}
}

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

@ -29,45 +29,30 @@
:href="term.url"
target="_blank">
<div class="term-items-grid">
<img
:src="
termItems[term.id][0] && termItems[term.id][0].thumbnail && termItems[term.id][0].thumbnail['tainacan-medium'][0] && termItems[term.id][0].thumbnail['tainacan-medium'][0]
?
termItems[term.id][0].thumbnail['tainacan-medium'][0]
:
(termItems[term.id][0] && termItems[term.id][0].thumbnail && termItems[term.id][0].thumbnail['thumbnail'][0] && termItems[term.id][0].thumbnail['thumbnail'][0]
?
termItems[term.id][0].thumbnail['thumbnail'][0]
:
`${tainacanBaseUrl}/assets/images/placeholder_square.png`)
"
:alt="termItems[term.id][0] && termItems[term.id][0].name ? termItems[term.id][0].name : $root.__( 'Thumbnail', 'tainacan' ) ">
<img
:src="
termItems[term.id][1] && termItems[term.id][1].thumbnail && termItems[term.id][1].thumbnail['tainacan-medium'][0] && termItems[term.id][1].thumbnail['tainacan-medium'][0]
?
termItems[term.id][1].thumbnail['tainacan-medium'][0]
:
(termItems[term.id][1] && termItems[term.id][1].thumbnail && termItems[term.id][1].thumbnail['thumbnail'][0] && termItems[term.id][1].thumbnail['thumbnail'][0]
?
termItems[term.id][1].thumbnail['thumbnail'][0]
:
`${tainacanBaseUrl}/assets/images/placeholder_square.png`)
"
:alt="termItems[term.id][1] && termItems[term.id][1].name ? termItems[term.id][1].name : $root.__( 'Thumbnail', 'tainacan' ) ">
<img
:src="
termItems[term.id][2] && termItems[term.id][2].thumbnail && termItems[term.id][2].thumbnail['tainacan-medium'][0] && termItems[term.id][2].thumbnail['tainacan-medium'][0]
?
termItems[term.id][2].thumbnail['tainacan-medium'][0]
:
(termItems[term.id][2] && termItems[term.id][2].thumbnail && termItems[term.id][2].thumbnail['thumbnail'][0] && termItems[term.id][2].thumbnail['thumbnail'][0]
?
termItems[term.id][2].thumbnail['thumbnail'][0]
:
`${tainacanBaseUrl}/assets/images/placeholder_square.png`)
"
:alt="termItems[term.id][2] && termItems[term.id][2].name ? termItems[term.id][2].name : $root.__( 'Thumbnail', 'tainacan' ) ">
<blur-hash-image
:height="termItems[term.id][2] ? $thumbHelper.getHeight(termItems[term.id][0]['thumbnail'], 'tainacan-medium') : 275"
:width="termItems[term.id][0] ? $thumbHelper.getWidth(termItems[term.id][0]['thumbnail'], 'tainacan-medium') : 275"
:src="termItems[term.id][0] ? $thumbHelper.getSrc(termItems[term.id][0]['thumbnail'], 'tainacan-medium', termItems[term.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
:srcset="termItems[term.id][0] ? $thumbHelper.getSrcSet(termItems[term.id][0]['thumbnail'], 'tainacan-medium', termItems[term.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
:hash="termItems[term.id][0] ? $thumbHelper.getBlurhashString(termItems[term.id][0]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
:alt="termItems[term.id][0] && termItems[term.id][0].thumbnail_alt ? termItems[term.id][0].thumbnail_alt : (termItems[term.id][0] && termItems[term.id][0].name ? termItems[term.id][0].name : $root.__( 'Thumbnail', 'tainacan' ))"
:transition-duration="500" />
<blur-hash-image
:height="termItems[term.id][1] ? $thumbHelper.getHeight(termItems[term.id][1]['thumbnail'], 'tainacan-medium') : 275"
:width="termItems[term.id][1] ? $thumbHelper.getWidth(termItems[term.id][1]['thumbnail'], 'tainacan-medium') : 275"
:src="termItems[term.id][1] ? $thumbHelper.getSrc(termItems[term.id][1]['thumbnail'], 'tainacan-medium', termItems[term.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
:srcset="termItems[term.id][1] ? $thumbHelper.getSrcSet(termItems[term.id][1]['thumbnail'], 'tainacan-medium', termItems[term.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
:hash="termItems[term.id][1] ? $thumbHelper.getBlurhashString(termItems[term.id][1]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
:alt="termItems[term.id][1] && termItems[term.id][1].thumbnail_alt ? termItems[term.id][1].thumbnail_alt : (termItems[term.id][1] && termItems[term.id][1].name ? termItems[term.id][1].name : $root.__( 'Thumbnail', 'tainacan' ))"
:transition-duration="500" />
<blur-hash-image
:height="termItems[term.id][2] ? $thumbHelper.getHeight(termItems[term.id][2]['thumbnail'], 'tainacan-medium') : 275"
:width="termItems[term.id][2] ? $thumbHelper.getWidth(termItems[term.id][2]['thumbnail'], 'tainacan-medium') : 275"
:src="termItems[term.id][2] ? $thumbHelper.getSrc(termItems[term.id][2]['thumbnail'], 'tainacan-medium', termItems[term.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
:srcset="termItems[term.id][2] ? $thumbHelper.getSrcSet(termItems[term.id][2]['thumbnail'], 'tainacan-medium', termItems[term.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
:hash="termItems[term.id][2] ? $thumbHelper.getBlurhashString(termItems[term.id][2]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
:alt="termItems[term.id][2] && termItems[term.id][2].thumbnail_alt ? termItems[term.id][2].thumbnail_alt : (termItems[term.id][2] && termItems[term.id][2].name ? termItems[term.id][2].name : $root.__( 'Thumbnail', 'tainacan' ))"
:transition-duration="500" />
</div>
<span v-if="!hideName">{{ term.name ? term.name : '' }}</span>
</a>

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

@ -19,12 +19,12 @@
margin-right: 6px;
div {
@include display-grid;
-ms-grid-columns: 33% 33% 33%;
grid-template-columns: 33% 33% 33%;
-ms-grid-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
-ms-grid-rows: 50% 50%;
grid-template-rows: 50% 50%;
grid-column-gap: 2px;
grid-row-gap: 2px;
grid-gap: 5px;
gap: 5px;
width: 60px;
height: 40px;
margin: 4px auto 8px auto;
@ -32,14 +32,14 @@
&>div:first-of-type {
flex-basis: 100%;
@include grid-child(1, 3, 1, 3);
width: 41px;
height: 42px;
width: 100%;
height: 100%;
}
&>div {
flex-basis: 50%;
width: 20px;
height: 20px;
width: 100%;
height: 100%;
background: var(--tainacan-block-gray4, $gray4);
transition: background-color ease 0.5s;
}
@ -163,20 +163,22 @@
}
.term-items-grid {
@include display-grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows: 50% 50%;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
width: 100%;
grid-gap: 5px;
gap: 5px;
box-sizing: border-box;
img:first-of-type {
&>*:first-of-type {
flex-basis: 100%;
@include grid-child(1, 3, 1, 3);
}
img {
flex-basis: 50%;
&>* {
flex-basis: 50%;
width: 100%;
height: auto;
padding: 2px;
margin-bottom: 0px;
}
}
@ -377,7 +379,7 @@
.term-items-grid {
@include display-grid;
grid-template-columns: 33% 33% 33%;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50% 50%;
img:first-of-type {

52
src/views/gutenberg-blocks/tainacan-terms/carousel-terms-list/index.js
View File

@ -10,6 +10,7 @@ import TermsModal from '../terms-list/terms-modal.js';
import tainacan from '../../js/axios.js';
import axios from 'axios';
import qs from 'qs';
import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js';
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
import DeprecatedBlocks from './carousel-terms-list-deprecated.js';
@ -154,6 +155,8 @@ registerBlockType('tainacan/carousel-terms-list', {
setAttributes({ maxTermsPerScreen: maxTermsPerScreen });
}
const thumbHelper = ThumbnailHelperFunctions();
function prepareItem(term, termItems) {
return (
<li
@ -177,44 +180,17 @@ registerBlockType('tainacan/carousel-terms-list', {
{ !showTermThumbnail ?
<div class="term-items-grid">
<img
src={
termItems[0] && termItems[0].thumbnail && termItems[0].thumbnail['tainacan-medium'][0] && termItems[0].thumbnail['tainacan-medium'][0]
?
termItems[0].thumbnail['tainacan-medium'][0]
:
(termItems[0] && termItems[0].thumbnail && termItems[0].thumbnail['thumbnail'][0] && termItems[0].thumbnail['thumbnail'][0]
?
termItems[0].thumbnail['thumbnail'][0]
:
`${tainacan_blocks.base_url}/assets/images/placeholder_square.png`)
}
alt={ termItems[0] && termItems[0].name ? termItems[0].name : __( 'Thumbnail', 'tainacan' ) }/>
<img
src={
termItems[1] && termItems[1].thumbnail && termItems[1].thumbnail['tainacan-medium'][0] && termItems[1].thumbnail['tainacan-medium'][0]
?
termItems[1].thumbnail['tainacan-medium'][0]
:
(termItems[1] && termItems[1].thumbnail && termItems[1].thumbnail['thumbnail'][0] && termItems[1].thumbnail['thumbnail'][0]
?
termItems[1].thumbnail['thumbnail'][0]
:
`${tainacan_blocks.base_url}/assets/images/placeholder_square.png`)
}
alt={ termItems[1] && termItems[1].name ? termItems[1].name : __( 'Thumbnail', 'tainacan' ) }/>
<img
src={
termItems[2] && termItems[2].thumbnail && termItems[2].thumbnail['tainacan-medium'][0] && termItems[2].thumbnail['tainacan-medium'][0]
?
termItems[2].thumbnail['tainacan-medium'][0]
:
(termItems[2] && termItems[2].thumbnail && termItems[2].thumbnail['thumbnail'][0] && termItems[2].thumbnail['thumbnail'][0]
?
termItems[2].thumbnail['thumbnail'][0]
:
`${tainacan_blocks.base_url}/assets/images/placeholder_square.png`)
}
alt={ termItems[2] && termItems[2].name ? termItems[2].name : __( 'Thumbnail', 'tainacan' ) }/>
src={ termItems[0] ? thumbHelper.getSrc(termItems[0]['thumbnail'], 'tainacan-medium', termItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
srcset={ termItems[0] ? thumbHelper.getSrcSet(termItems[0]['thumbnail'], 'tainacan-medium', termItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
alt={ termItems[0] && termItems[0].thumbnail_alt ? termItems[0].thumbnail_alt : (termItems[0] && termItems[0].name ? termItems[0].name : __( 'Thumbnail', 'tainacan' )) } />
<img
src={ termItems[1] ? thumbHelper.getSrc(termItems[1]['thumbnail'], 'tainacan-medium', termItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
srcset={ termItems[1] ? thumbHelper.getSrcSet(termItems[1]['thumbnail'], 'tainacan-medium', termItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
alt={ termItems[1] && termItems[1].thumbnail_alt ? termItems[1].thumbnail_alt : (termItems[1] && termItems[1].name ? termItems[1].name : __( 'Thumbnail', 'tainacan' )) } />
<img
src={ termItems[2] ? thumbHelper.getSrc(termItems[2]['thumbnail'], 'tainacan-medium', termItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
srcset={ termItems[2] ? thumbHelper.getSrcSet(termItems[2]['thumbnail'], 'tainacan-medium', termItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
alt={ termItems[2] && termItems[2].thumbnail_alt ? termItems[2].thumbnail_alt : (termItems[2] && termItems[2].name ? termItems[2].name : __( 'Thumbnail', 'tainacan' )) } />
</div>
:
<img