~cytrogen/masto-fe

0091b28ffea9baa7f5b95f294b4b1221b8bbf018 — Christian Schmidt 3 years ago 11b34a9
[Glitch] Use CSS to trim long card descriptions

Port e713c545b89ec86742161775b834c7f56d4377c2 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
M app/javascript/flavours/glitch/features/status/components/card.jsx => app/javascript/flavours/glitch/features/status/components/card.jsx +2 -14
@@ 17,16 17,6 @@ const getHostname = url => {
  return parser.hostname;
};

const trim = (text, len) => {
  const cut = text.indexOf(' ', len);

  if (cut === -1) {
    return text;
  }

  return text.slice(0, cut) + (text.length > len ? '…' : '');
};

const domParser = new DOMParser();

const addAutoPlay = html => {


@@ 54,7 44,6 @@ export default class Card extends React.PureComponent {

  static propTypes = {
    card: ImmutablePropTypes.map,
    maxDescription: PropTypes.number,
    onOpenMedia: PropTypes.func.isRequired,
    compact: PropTypes.bool,
    defaultWidth: PropTypes.number,


@@ 63,7 52,6 @@ export default class Card extends React.PureComponent {
  };

  static defaultProps = {
    maxDescription: 50,
    compact: false,
  };



@@ 176,7 164,7 @@ export default class Card extends React.PureComponent {
  }

  render () {
    const { card, maxDescription, compact, defaultWidth } = this.props;
    const { card, compact, defaultWidth } = this.props;
    const { width, embedded, revealed } = this.state;

    if (card === null) {


@@ 195,7 183,7 @@ export default class Card extends React.PureComponent {
    const description = (
      <div className='status-card__content' lang={language}>
        {title}
        {!(horizontal || compact) && <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>}
        {!(horizontal || compact) && <p className='status-card__description' title={card.get('description')}>{card.get('description')}</p>}
        <span className='status-card__host'>{provider}</span>
      </div>
    );

M app/javascript/flavours/glitch/styles/components/status.scss => app/javascript/flavours/glitch/styles/components/status.scss +4 -0
@@ 833,6 833,10 @@ a.status-card {

.status-card__description {
  color: $darker-text-color;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.status-card__host {