diff --git a/app/soapbox/features/status/components/card.js b/app/soapbox/features/status/components/card.js index db291f612..f49df788e 100644 --- a/app/soapbox/features/status/components/card.js +++ b/app/soapbox/features/status/components/card.js @@ -67,7 +67,7 @@ export default class Card extends React.PureComponent { }; static defaultProps = { - maxDescription: 50, + maxDescription: 200, compact: false, }; @@ -174,8 +174,8 @@ export default class Card extends React.PureComponent { const description = (
{title} - {!(horizontal || compact) &&

{trim(card.get('description') || '', maxDescription)}

} - {provider} +

{trim(card.get('description') || '', maxDescription)}

+ {provider}
); @@ -221,7 +221,7 @@ export default class Card extends React.PureComponent { ); } else { embed = ( -
+
); diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss index bf9abcb65..3378e42cc 100644 --- a/app/styles/components/status.scss +++ b/app/styles/components/status.scss @@ -476,6 +476,7 @@ border-radius: 4px; color: var(--primary-text-color); margin-top: 14px; + min-height: 150px; text-decoration: none; overflow: hidden; @@ -552,19 +553,17 @@ a.status-card { .status-card__title { display: block; + font-size: 16px; font-weight: 500; - margin-bottom: 5px; - color: var(--primary-text-color--faint); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + margin-bottom: 10px; + color: var(--primary-text-color); text-decoration: none; } .status-card__content { flex: 1 1 auto; overflow: hidden; - padding: 14px 14px 14px 8px; + padding: 16px; } .status-card__description { @@ -573,7 +572,7 @@ a.status-card { .status-card__host { display: block; - margin-top: 5px; + margin-top: 10px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; @@ -581,7 +580,7 @@ a.status-card { } .status-card__image { - flex: 0 0 100px; + flex: 0 0 40%; background: var(--brand-color--med); position: relative; @@ -593,6 +592,10 @@ a.status-card { left: 50%; transform: translate(-50%, -50%); } + + &--empty { + flex: 0 0 80px; + } } .status-card.horizontal { @@ -617,19 +620,6 @@ a.status-card { &.interactive { border: 0; } - - .status-card__content { - padding: 8px; - padding-top: 10px; - } - - .status-card__title { - white-space: nowrap; - } - - .status-card__image { - flex: 0 0 60px; - } } a.status-card.compact:hover {