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

REALLY forces carousel images to squared cropped version.

This commit is contained in:
mateuswetah 2021-09-17 17:27:51 -03:00
parent 03f502a822
commit 36f3614313
5 changed files with 66 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/assets/css/tainacan-gutenberg-block-carousel-items-list.css
View File

@ -140,6 +140,11 @@
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a:hover { .wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a:hover {
color: inherit; color: inherit;
text-decoration: none; } text-decoration: none; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container .is-forced-square > a > div {
padding-bottom: 100% !important; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container .is-forced-square > a > div img {
object-fit: cover;
object-position: center; }
.wp-block-tainacan-carousel-items-list .preview-warning { .wp-block-tainacan-carousel-items-list .preview-warning {
width: 100%; width: 100%;
font-size: 0.875rem; font-size: 0.875rem;
@ -233,6 +238,24 @@
display: block; display: block;
padding: 0px; padding: 0px;
margin-bottom: 0.5em; } margin-bottom: 0.5em; }
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.is-forced-square .items-list-item--image-wrap {
padding-top: 100%;
display: block;
content: '';
width: 100%;
position: relative; }
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.is-forced-square img {
display: block;
padding: 0px;
margin-bottom: 0.5em;
object-fit: cover;
position: absolute;
height: 100%;
width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0; }
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item:hover a { .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item:hover a {
color: inherit; color: inherit;
text-decoration: none; } text-decoration: none; }

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

File diff suppressed because one or more lines are too long

8
src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/edit.js
View File

@ -61,7 +61,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
return ( return (
<li <li
key={ item.id } key={ item.id }
className={ 'item-list-item ' + (maxItemsPerScreen ? 'max-itens-per-screen-' + maxItemsPerScreen : '') }> className={ 'item-list-item ' + (maxItemsPerScreen ? ' max-itens-per-screen-' + maxItemsPerScreen : '') + (cropImagesToSquare ? ' is-forced-square' : '') }>
{ loadStrategy == 'selection' ? { loadStrategy == 'selection' ?
( tainacan_blocks.wp_version < '5.4' ? ( tainacan_blocks.wp_version < '5.4' ?
<IconButton <IconButton
@ -80,10 +80,12 @@ export default function({ attributes, setAttributes, className, isSelected, clie
id={ isNaN(item.id) ? item.id : 'item-id-' + item.id } id={ isNaN(item.id) ? item.id : 'item-id-' + item.id }
href={ item.url } href={ item.url }
target="_blank"> target="_blank">
<div class="items-list-item--image-wrap">
<img <img
src={ thumbHelper.getSrc(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype']) } src={ thumbHelper.getSrc(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype']) }
srcSet={ thumbHelper.getSrcSet(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype']) } srcSet={ thumbHelper.getSrcSet(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype']) }
alt={ item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : __( 'Thumbnail', 'tainacan' )) }/> alt={ item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : __( 'Thumbnail', 'tainacan' )) }/>
</div>
{ !hideTitle ? <span>{ item.title ? item.title : '' }</span> : null } { !hideTitle ? <span>{ item.title ? item.title : '' }</span> : null }
</a> </a>
</li> </li>
@ -370,8 +372,8 @@ export default function({ attributes, setAttributes, className, isSelected, clie
} }
<ToggleControl <ToggleControl
label={__('Crop Images', 'tainacan')} label={__('Crop Images', 'tainacan')}
help={ cropImagesToSquare && maxItemsPerScreen > 4 ? __('Do not use square cropeed version of the item thumbnail.', 'tainacan') : __('Toggle to use square cropped version of the item thumbnail.', '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 && maxItemsPerScreen > 4 } checked={ cropImagesToSquare }
onChange={ ( isChecked ) => { onChange={ ( isChecked ) => {
cropImagesToSquare = isChecked; cropImagesToSquare = isChecked;
setAttributes({ cropImagesToSquare: cropImagesToSquare }); setAttributes({ cropImagesToSquare: cropImagesToSquare });

31
src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/style.scss
View File

@ -168,6 +168,14 @@
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
.is-forced-square>a>div {
padding-bottom: 100% !important;
img {
object-fit: cover;
object-position: center;
}
}
} }
} }
@ -285,6 +293,29 @@
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
&.is-forced-square {
.items-list-item--image-wrap {
padding-top: 100%;
display: block;
content: '';
width: 100%;
position: relative;
}
img {
display: block;
padding: 0px;
margin-bottom: 0.5em;
object-fit: cover;
position: absolute;
height: 100%;
width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
&:hover a { &:hover a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;

3
src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/theme.vue
View File

@ -64,7 +64,8 @@
ref="myItemSwiperSlide" ref="myItemSwiperSlide"
:key="index" :key="index"
v-for="(item, index) of items" v-for="(item, index) of items"
class="item-list-item"> class="item-list-item"
:class="{ 'is-forced-square': cropImagesToSquare }">
<a <a
:id="isNaN(item.id) ? item.id : 'item-id-' + item.id" :id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
:href="item.url" :href="item.url"