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: flex;
display: -ms-grid; display: -ms-grid;
display: grid; display: grid;
-ms-grid-columns: 33% 33% 33%; -ms-grid-columns: 1fr 1fr 1fr;
grid-template-columns: 33% 33% 33%; grid-template-columns: 1fr 1fr 1fr;
-ms-grid-rows: 50% 50%; -ms-grid-rows: 50% 50%;
grid-template-rows: 50% 50%; grid-template-rows: 50% 50%;
grid-column-gap: 2px; grid-gap: 5px;
grid-row-gap: 2px; gap: 5px;
width: 60px; width: 60px;
height: 40px; height: 40px;
margin: 4px auto 8px auto; } margin: 4px auto 8px auto; }
@ -35,12 +35,12 @@
-ms-grid-row-span: 2; -ms-grid-row-span: 2;
grid-column: 1/3; grid-column: 1/3;
grid-row: 1/3; grid-row: 1/3;
width: 41px; width: 100%;
height: 42px; } height: 100%; }
.components-panel__body .term-carousel-view-modes button.term-carousel-view-mode-grid div > div { .components-panel__body .term-carousel-view-modes button.term-carousel-view-mode-grid div > div {
flex-basis: 50%; flex-basis: 50%;
width: 20px; width: 100%;
height: 20px; height: 100%;
background: var(--tainacan-block-gray4, #555758); background: var(--tainacan-block-gray4, #555758);
transition: background-color ease 0.5s; } transition: background-color ease 0.5s; }
.components-panel__body .term-carousel-view-modes button.term-carousel-view-mode-thumbnail { .components-panel__body .term-carousel-view-modes button.term-carousel-view-mode-thumbnail {
@ -139,10 +139,13 @@
display: flex; display: flex;
display: -ms-grid; display: -ms-grid;
display: grid; display: grid;
grid-template-columns: 33% 33% 33%; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50% 50%; grid-template-rows: 1fr 1fr;
width: 100%; } 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-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%; flex-basis: 100%;
-ms-grid-column: 1; -ms-grid-column: 1;
-ms-grid-column-span: 2; -ms-grid-column-span: 2;
@ -150,11 +153,10 @@
-ms-grid-row-span: 2; -ms-grid-row-span: 2;
grid-column: 1/3; grid-column: 1/3;
grid-row: 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%; flex-basis: 50%;
width: 100%; width: 100%;
height: auto; height: auto;
padding: 2px;
margin-bottom: 0px; } margin-bottom: 0px; }
.wp-block-tainacan-carousel-terms-list .preview-warning { .wp-block-tainacan-carousel-terms-list .preview-warning {
width: 100%; width: 100%;
@ -313,7 +315,7 @@
display: flex; display: flex;
display: -ms-grid; display: -ms-grid;
display: grid; display: grid;
grid-template-columns: 33% 33% 33%; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50% 50%; } 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 { .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item .term-items-grid img:first-of-type {
flex-basis: 100%; 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 { .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 { .wp-block-tainacan-dynamic-items-list .spinner-container {
min-height: 56px; min-height: 56px;
padding: 1em; padding: 1em;
@ -117,19 +121,23 @@
top: -78px !important; } top: -78px !important; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-collection-header .collection-header-image { .wp-block-tainacan-dynamic-items-list .dynamic-items-collection-header .collection-header-image {
background-color: transparent; } } 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 { .wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 1px solid var(--tainacan-block-gray3, #cbcbcb); 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) { @media only screen and (max-width: 768px) {
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar { .wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar {
flex-wrap: wrap; } flex-wrap: wrap; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar .search-button { .wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar .search-button {
order: 4; order: 4;
position: absolute; position: absolute;
margin-top: 0.75em; } bottom: 0.875em;
left: 1.0em; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar input { .wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar input {
width: 100% !important; width: 100% !important;
order: 5; order: 5;
@ -181,28 +189,6 @@
width: 100%; width: 100%;
border: 1px solid var(--tainacan-block-gray3, #cbcbcb); border: 1px solid var(--tainacan-block-gray3, #cbcbcb);
box-shadow: none; } 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 { .wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item {
display: flex; display: flex;
align-items: flex-start; } 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.items-layout-grid li.item-list-item,
.wp-block-tainacan-dynamic-items-list ul.items-list-edit.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; position: relative;
display: block; display: flex;
flex-wrap: wrap;
width: 100%; width: 100%;
flex-basis: 220px; flex-basis: 100%;
margin: auto; } 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.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 { .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item a {
color: var(--tainacan-block-gray5, #454647); color: var(--tainacan-block-gray5, #454647);
border: none; border: none;
font-weight: bold; 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.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 { .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item img {
flex-basis: 100%;
height: auto; height: auto;
width: 100%; 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; } 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.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.item-without-title 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; } 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.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 { .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.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 { .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item:hover a span {
opacity: 1; } 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.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-edit.items-layout-mosaic .mosaic-container li.item-list-item a.item-without-title > span {
display: none; } 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.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 { .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; } top: -78px !important; }
.wp-block-tainacan-facets-list .facets-collection-header .collection-header-image { .wp-block-tainacan-facets-list .facets-collection-header .collection-header-image {
background-color: transparent; } } 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 { .wp-block-tainacan-facets-list .facets-search-bar {
width: 100%; width: 100%;
display: flex; display: flex;
@ -211,7 +213,7 @@
border: 1px solid var(--tainacan-block-gray3, #cbcbcb) !important; } 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.facets-layout-grid,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid { .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid {
padding: 0; padding: 0 2em;
flex-wrap: wrap; flex-wrap: wrap;
display: flex; display: flex;
display: -ms-grid; 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

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

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

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

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

@ -151,11 +151,12 @@
<ul <ul
v-if="layout !== 'mosaic'" v-if="layout !== 'mosaic'"
:style="{ :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-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 <li
:key="item" :key="item"
v-for="item in Number(maxItemsNumber)" v-for="item in Number(maxItemsNumber)"
@ -207,8 +208,8 @@
v-if="showImage" v-if="showImage"
:height="$thumbHelper.getHeight(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))" :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' ))" :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'])" :src="$thumbHelper.getSrc(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ), item['document_mimetype'])"
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], ( 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' ))" :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' ))" :alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))"
:transition-duration="500" /> :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'; @import '../../gutenberg-blocks-variables.scss';
.wp-block-tainacan-dynamic-items-list { .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
.spinner-container { .spinner-container {
@ -142,12 +148,16 @@
} }
// Search control bar // Search control bar
&.alignfull .dynamic-items-search-bar {
padding: 1.00em 2em 0.75em 2em;
}
.dynamic-items-search-bar { .dynamic-items-search-bar {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 1px solid var(--tainacan-block-gray3, $gray3); border-bottom: 1px solid var(--tainacan-block-gray3, $gray3);
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) { @media only screen and (max-width: 768px) {
flex-wrap: wrap; flex-wrap: wrap;
@ -155,7 +165,8 @@
.search-button { .search-button {
order: 4; order: 4;
position: absolute; position: absolute;
margin-top: 0.75em; bottom: 0.875em;
left: 1.0em;
} }
input { input {
width: 100% !important; width: 100% !important;
@ -223,27 +234,6 @@
} }
// Style for both grid and list View Modes ---------------------------------------------------- // 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 { ul.items-list-edit li.item-list-item {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@ -388,26 +378,44 @@
li.item-list-item { li.item-list-item {
position: relative; position: relative;
display: block; display: flex;
flex-wrap: wrap;
width: 100%; width: 100%;
flex-basis: 220px; // Helps with the flex fallback in case grid is not available; flex-basis: 100%;
margin: auto; justify-content: center;
align-items: center;
a { a {
color: var(--tainacan-block-gray5, $gray5); color: var(--tainacan-block-gray5, $gray5);
border: none; border: none;
font-weight: bold; font-weight: bold;
line-height: normal; line-height: normal;
display: flex;
flex-basis: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
&>div {
width: 100%;
}
} }
img { img {
flex-basis: 100%;
height: auto; height: auto;
width: 100%; width: 100%;
padding: 0px; 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; display: none;
} }
@ -588,7 +596,7 @@
} }
&:hover a span { opacity: 1 }; &:hover a span { opacity: 1 };
a.item-without-title span { a.item-without-title>span {
display: none; 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' : '') }> className={ (!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '') }>
<img <img
src={ thumbHelper.getSrc(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']) } 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' )) }/> alt={ item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : $root.__( 'Thumbnail', 'tainacan' )) }/>
<span>{ item.title ? item.title : '' }</span> <span>{ item.title ? item.title : '' }</span>
</a> </a>

4
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 Vue from 'vue';
import CarouselTermsListTheme from './carousel-terms-list-theme.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 Dev Tools!
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development'; Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
@ -78,6 +80,8 @@ document.addEventListener("DOMContentLoaded", () => {
} }
}; };
Vue.use(VueBlurHash);
Vue.use(ThumbnailHelperPlugin);
new Vue( Object.assign({ el: '#' + blockId }, vueOptions) ); 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" :href="term.url"
target="_blank"> target="_blank">
<div class="term-items-grid"> <div class="term-items-grid">
<img <blur-hash-image
:src=" :height="termItems[term.id][2] ? $thumbHelper.getHeight(termItems[term.id][0]['thumbnail'], 'tainacan-medium') : 275"
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] :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`"
termItems[term.id][0].thumbnail['tainacan-medium'][0] :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'"
(termItems[term.id][0] && termItems[term.id][0].thumbnail && termItems[term.id][0].thumbnail['thumbnail'][0] && termItems[term.id][0].thumbnail['thumbnail'][0] :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" />
termItems[term.id][0].thumbnail['thumbnail'][0] <blur-hash-image
: :height="termItems[term.id][1] ? $thumbHelper.getHeight(termItems[term.id][1]['thumbnail'], 'tainacan-medium') : 275"
`${tainacanBaseUrl}/assets/images/placeholder_square.png`) :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`"
:alt="termItems[term.id][0] && termItems[term.id][0].name ? termItems[term.id][0].name : $root.__( 'Thumbnail', 'tainacan' ) "> :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`"
<img :hash="termItems[term.id][1] ? $thumbHelper.getBlurhashString(termItems[term.id][1]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
:src=" :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' ))"
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] :transition-duration="500" />
? <blur-hash-image
termItems[term.id][1].thumbnail['tainacan-medium'][0] :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"
(termItems[term.id][1] && termItems[term.id][1].thumbnail && termItems[term.id][1].thumbnail['thumbnail'][0] && termItems[term.id][1].thumbnail['thumbnail'][0] :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`"
termItems[term.id][1].thumbnail['thumbnail'][0] :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' ))"
`${tainacanBaseUrl}/assets/images/placeholder_square.png`) :transition-duration="500" />
"
: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' ) ">
</div> </div>
<span v-if="!hideName">{{ term.name ? term.name : '' }}</span> <span v-if="!hideName">{{ term.name ? term.name : '' }}</span>
</a> </a>

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

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

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