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

Improve collections carousel and items grid styles (#136)

This commit is contained in:
weryques 2018-10-31 13:32:43 -03:00
parent d10164cb1e
commit 2e66996980
2 changed files with 44 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/gutenberg-blocks/tainacan-collections/collections-carousel/index.js
View File

@ -134,6 +134,7 @@ registerBlockType('tainacan/collections-carousel', {
content: contentTemp.length ?
(<div>
<Carousel
offset={20}
arrowLeft={arrowLeft}
arrowRight={arrowRight}
addArrowClickHandler
@ -179,11 +180,12 @@ registerBlockType('tainacan/collections-carousel', {
<div key={collection.id}>
<div style={{
display: 'flex',
flexDirection: 'column',
marginLeft: '20px'}}>
flexDirection: 'column'}}>
{ isInEdit ? (
<IconButton
isSmall
isPrimary
style={{position: 'absolute'}}
label={ __('Remove', 'tainacan') }
onClick={() => {
@ -194,9 +196,8 @@ registerBlockType('tainacan/collections-carousel', {
) : null }
<div className={`${className}__carousel-item`}>
<div style={{width: '99px', marginRight: '3px'}} className={`${className}__carousel-item-first`}>
{items[0] ? prepareItem(items[0], null, collection.name) : null}
<div style={{width: '87px', marginRight: '3px'}} className={`${className}__carousel-item-first`}>
{items[0] ? prepareItem(items[0], {display: 'flex', height: '87px'}, collection.name) : null}
</div>
<div className={`${className}__carousel-item-others`}>
@ -204,6 +205,7 @@ registerBlockType('tainacan/collections-carousel', {
{items[2] ? prepareItem(items[2], {width: '42px', height: '42px'}, collection.name) : null}
</div>
</div>
<small style={{
maxWidth: '130px',
marginLeft: '10px'}}>
@ -357,6 +359,7 @@ registerBlockType('tainacan/collections-carousel', {
<div>
{ contentTemp.length ?
<Carousel
offset={20}
arrowLeft={arrowLeft}
arrowRight={arrowRight}
addArrowClickHandler

67
src/gutenberg-blocks/tainacan-items/items-grid/index.js
View File

@ -16,22 +16,16 @@ registerBlockType('tainacan/items-grid', {
items: {
type: 'array',
source: 'query',
selector: 'picture',
selector: 'img',
query: {
img: {
source: 'query',
selector: 'img',
query: {
src: {
source: 'attribute',
attribute: 'src'
},
alt: {
source: 'attribute',
attribute: 'alt'
},
}
}
src: {
source: 'attribute',
attribute: 'src'
},
alt: {
source: 'attribute',
attribute: 'alt'
},
},
default: []
},
@ -45,6 +39,10 @@ registerBlockType('tainacan/items-grid', {
selector: 'div'
},
},
supports: {
align: ['full', 'left', 'right', 'wide'],
html: false
},
edit({ attributes, setAttributes, className }){
console.log('edit', attributes);
@ -55,16 +53,21 @@ registerBlockType('tainacan/items-grid', {
function prepareItem(item) {
return (
<picture>
<img
src={
(item.thumbnail && item.thumbnail.thumb) ?
item.thumbnail.thumb :
( (item.img && item.img[0].src) ?
item.img[0].src : `${tainacan_plugin.base_url}/admin/images/placeholder_square.png`)
}
alt={ item.title ? item.title : item.alt } />
</picture>
<img
style={{
width: '150px',
height: '150px',
padding: 0
}}
src={
(item.thumbnail && item.thumbnail.thumb) ?
item.thumbnail.thumb :
((item && item.src) ?
item.src : `${tainacan_plugin.base_url}/admin/images/placeholder_square.png`)
}
alt={item.title ? item.title : item.alt}/>
);
}
@ -128,9 +131,10 @@ registerBlockType('tainacan/items-grid', {
setAttributes({
content: (
<div style={{
columnCount: 4,
columnGap: 0,
rowGap: 0,
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
alignContent: 'flex-start',
}}>
{ items }
</div>
@ -189,9 +193,10 @@ registerBlockType('tainacan/items-grid', {
</Modal> : null }
<div style={{
columnCount: 4,
columnGap: 0,
rowGap: 0,
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
alignContent: 'flex-start',
}}>
{ items }
</div>