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 = {
maxDescription: 50,
maxDescription: 200,
compact: false,
};
@ -174,8 +174,8 @@ export default class Card extends React.PureComponent {
const description = (
<div className='status-card__content'>
{title}
{!(horizontal || compact) && <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>}
<span className='status-card__host'>{provider}</span>
<p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>
<span className='status-card__host'><Icon id='link' /> {provider}</span>
</div>
);
@ -221,7 +221,7 @@ export default class Card extends React.PureComponent {
);
} else {
embed = (
<div className='status-card__image'>
<div className='status-card__image status-card__image--empty'>
<Icon id='file-text' />
</div>
);

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

@ -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 {