Commit b4f67a72 authored by mgabdev's avatar mgabdev

Updated card component

Set new max description. Removed compact prop. Updated variables, classes and positions.
parent eade0870
...@@ -58,16 +58,12 @@ export default class Card extends React.PureComponent { ...@@ -58,16 +58,12 @@ export default class Card extends React.PureComponent {
static propTypes = { static propTypes = {
card: ImmutablePropTypes.map, card: ImmutablePropTypes.map,
maxDescription: PropTypes.number,
onOpenMedia: PropTypes.func.isRequired, onOpenMedia: PropTypes.func.isRequired,
compact: PropTypes.bool,
defaultWidth: PropTypes.number, defaultWidth: PropTypes.number,
cacheWidth: PropTypes.func, cacheWidth: PropTypes.func,
}; };
static defaultProps = { static defaultProps = {
maxDescription: 50,
compact: false,
}; };
state = { state = {
...@@ -131,37 +127,52 @@ export default class Card extends React.PureComponent { ...@@ -131,37 +127,52 @@ export default class Card extends React.PureComponent {
ref={this.setRef} ref={this.setRef}
className='status-card__image status-card-video' className='status-card__image status-card-video'
dangerouslySetInnerHTML={content} dangerouslySetInnerHTML={content}
style={{ height }} style={{
height,
paddingBottom: 0,
}}
/> />
); );
} }
render () { render () {
const { card, maxDescription, compact } = this.props; const { card } = this.props;
const { width, embedded } = this.state; const { width, embedded } = this.state;
if (card === null) { if (card === null) {
return null; return null;
} }
const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name'); const maxDescription = 150;
const horizontal = (!compact && card.get('width') > card.get('height') && (card.get('width') + 100 >= width)) || card.get('type') !== 'link' || embedded; const cardImg = card.get('image');
const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name');
const horizontal = (card.get('width') > card.get('height') && (card.get('width') + 100 >= width)) || card.get('type') !== 'link' || embedded;
const interactive = card.get('type') !== 'link'; const interactive = card.get('type') !== 'link';
const className = classnames('status-card', { horizontal, compact, interactive }); const className = classnames('status-card', {
const title = interactive ? <a className='status-card__title' href={card.get('url')} title={card.get('title')} rel='noopener' target='_blank'><strong>{card.get('title')}</strong></a> : <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>; horizontal,
const ratio = card.get('width') / card.get('height'); interactive,
const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio); compact: !cardImg,
});
const title = interactive ?
<a className='status-card__title' href={card.get('url')} title={card.get('title')} rel='noopener' target='_blank'>
<strong>{card.get('title')}</strong>
</a>
: <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>;
const description = ( const description = (
<div className='status-card__content'> <div className='status-card__content'>
{title} {title}
{!(horizontal || compact) && <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>} {!horizontal && <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>}
<span className='status-card__host'>{provider}</span> <span className='status-card__host'>
<Icon id='link' fixedWidth />
{' '}
{provider}
</span>
</div> </div>
); );
let embed = ''; let embed = '';
let thumbnail = <div style={{ backgroundImage: `url(${card.get('image')})`, width: horizontal ? width : null, height: horizontal ? height : null }} className='status-card__image-image' />; let thumbnail = <div style={{ backgroundImage: `url(${cardImg})` }} className='status-card__image-image' />;
if (interactive) { if (interactive) {
if (embedded) { if (embedded) {
...@@ -176,7 +187,6 @@ export default class Card extends React.PureComponent { ...@@ -176,7 +187,6 @@ export default class Card extends React.PureComponent {
embed = ( embed = (
<div className='status-card__image'> <div className='status-card__image'>
{thumbnail} {thumbnail}
<div className='status-card__actions'> <div className='status-card__actions'>
<div> <div>
<button onClick={this.handleEmbedClick}><Icon id={iconVariant} /></button> <button onClick={this.handleEmbedClick}><Icon id={iconVariant} /></button>
...@@ -190,10 +200,10 @@ export default class Card extends React.PureComponent { ...@@ -190,10 +200,10 @@ export default class Card extends React.PureComponent {
return ( return (
<div className={className} ref={this.setRef}> <div className={className} ref={this.setRef}>
{embed} {embed}
{!compact && description} {description}
</div> </div>
); );
} else if (card.get('image')) { } else if (cardImg) {
embed = ( embed = (
<div className='status-card__image'> <div className='status-card__image'>
{thumbnail} {thumbnail}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment