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

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

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