bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve link previews

Browse source
This commit is contained in:
Alex Gleason 2021-05-11 18:15:39 -05:00
parent ed38c7a421
commit b2fde53adc
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 15 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/soapbox/features/status/components/card.js
View file

@ -67,7 +67,7 @@ export default class Card extends React.PureComponent {
}; };
static defaultProps = { static defaultProps = {
maxDescription: 50, maxDescription: 200,
compact: false, compact: false,
}; };
@ -174,8 +174,8 @@ export default class Card extends React.PureComponent {
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>} <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' /> {provider}</span>
</div> </div>
); );
@ -221,7 +221,7 @@ export default class Card extends React.PureComponent {
); );
} else { } else {
embed = ( embed = (
<div className='status-card__image'> <div className='status-card__image status-card__image--empty'>
<Icon id='file-text' /> <Icon id='file-text' />
</div> </div>
); );

32
app/styles/components/status.scss
View file

@ -476,6 +476,7 @@
border-radius: 4px; border-radius: 4px;
color: var(--primary-text-color); color: var(--primary-text-color);
margin-top: 14px; margin-top: 14px;
min-height: 150px;
text-decoration: none; text-decoration: none;
overflow: hidden; overflow: hidden;
@ -552,19 +553,17 @@ a.status-card {
.status-card__title { .status-card__title {
display: block; display: block;
font-size: 16px;
font-weight: 500; font-weight: 500;
margin-bottom: 5px; margin-bottom: 10px;
color: var(--primary-text-color--faint); color: var(--primary-text-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-decoration: none; text-decoration: none;
} }
.status-card__content { .status-card__content {
flex: 1 1 auto; flex: 1 1 auto;
overflow: hidden; overflow: hidden;
padding: 14px 14px 14px 8px; padding: 16px;
} }
.status-card__description { .status-card__description {
@ -573,7 +572,7 @@ a.status-card {
.status-card__host { .status-card__host {
display: block; display: block;
margin-top: 5px; margin-top: 10px;
font-size: 13px; font-size: 13px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -581,7 +580,7 @@ a.status-card {
} }
.status-card__image { .status-card__image {
flex: 0 0 100px; flex: 0 0 40%;
background: var(--brand-color--med); background: var(--brand-color--med);
position: relative; position: relative;
@ -593,6 +592,10 @@ a.status-card {
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
&--empty {
flex: 0 0 80px;
}
} }
.status-card.horizontal { .status-card.horizontal {
@ -617,19 +620,6 @@ a.status-card {
&.interactive { &.interactive {
border: 0; 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 { a.status-card.compact:hover {