about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/features/status
diff options
context:
space:
mode:
authorThibaut Girka <thib@sitedethib.com>2018-09-10 17:51:00 +0200
committerThibG <thib@sitedethib.com>2018-09-10 19:53:55 +0200
commitcc5826521619e64022a965e2d414fd29c834612c (patch)
tree1cf4912060f4bd81e803a73553b154aa0ac6599e /app/javascript/flavours/glitch/features/status
parent49eaf72faf5b8b6f574a759a990c230f82c3b891 (diff)
[Glitch] Ensure link thumbnails are not stretched to super low quality
Port front-end changes from c36b9cc5a6cf3feacb925213f5530c90dd31fa7a to glitch-soc
Diffstat (limited to 'app/javascript/flavours/glitch/features/status')
-rw-r--r--app/javascript/flavours/glitch/features/status/components/card.js10
1 files changed, 5 insertions, 5 deletions
diff --git a/app/javascript/flavours/glitch/features/status/components/card.js b/app/javascript/flavours/glitch/features/status/components/card.js
index d3e322c36..f7d980066 100644
--- a/app/javascript/flavours/glitch/features/status/components/card.js
+++ b/app/javascript/flavours/glitch/features/status/components/card.js
@@ -59,6 +59,8 @@ export default class Card extends React.PureComponent {
 
   renderLink () {
     const { card, maxDescription } = this.props;
+    const { width }  = this.state;
+    const horizontal = card.get('width') > card.get('height') && (card.get('width') + 100 >= width);
 
     let image    = '';
     let provider = card.get('provider_name');
@@ -75,17 +77,15 @@ export default class Card extends React.PureComponent {
       provider = decodeIDNA(getHostname(card.get('url')));
     }
 
-    const className = classnames('status-card', {
-      'horizontal': card.get('width') > card.get('height'),
-    });
+    const className = classnames('status-card', { horizontal });
 
     return (
-      <a href={card.get('url')} className={className} target='_blank' rel='noopener'>
+      <a href={card.get('url')} className={className} target='_blank' rel='noopener' ref={this.setRef}>
         {image}
 
         <div className='status-card__content'>
           <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>
-          <p className='status-card__description'>{(card.get('description') || '').substring(0, maxDescription)}</p>
+          {!horizontal && <p className='status-card__description'>{(card.get('description') || '').substring(0, maxDescription)}</p>}
           <span className='status-card__host'>{provider}</span>
         </div>
       </a>