moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'link-previews-mobile' into 'develop' 

Stack link previews on mobile

See merge request soapbox-pub/soapbox-fe!499
This commit is contained in:
Alex Gleason 2021-05-12 03:58:49 +00:00
parent 9a4ae568b4 a2e2771739
commit 656e67a744
2 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/soapbox/features/status/components/card.js
View File

@ -166,7 +166,7 @@ export default class Card extends React.PureComponent {
const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name'); const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name');
const interactive = card.get('type') !== 'link'; const interactive = card.get('type') !== 'link';
const horizontal = (!compact && cardWidth > cardHeight && (cardWidth + 100 >= width)) || interactive || embedded; const horizontal = (!compact && cardWidth > cardHeight && (cardWidth + 100 >= width)) || interactive || embedded;
const className = classnames('status-card', { horizontal, compact, interactive }); const className = classnames('status-card', { horizontal, compact, interactive }, `status-card--${card.get('type')}`);
const title = interactive ? <a className='status-card__title' href={card.get('url')} title={card.get('title')} rel='noopener' target='_blank'><strong>{card.get('title')}</strong></a> : <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>; const title = interactive ? <a className='status-card__title' href={card.get('url')} title={card.get('title')} rel='noopener' target='_blank'><strong>{card.get('title')}</strong></a> : <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>;
const ratio = this.getRatio(card); const ratio = this.getRatio(card);
const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio); const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);

16
app/styles/components/status.scss
View File

@ -605,10 +605,6 @@ a.status-card {
width: 100%; width: 100%;
} }
.status-card__image-image {
border-radius: 4px 4px 0 0;
}
.status-card__title { .status-card__title {
white-space: inherit; white-space: inherit;
} }
@ -637,6 +633,18 @@ a.status-card.compact:hover {
background-position: center center; background-position: center center;
} }
@media (max-width: 600px) {
.status-card--link {
flex-direction: column;
.status-card__image {
width: 100%;
height: 200px;
flex: none;
}
}
}
.status__favicon { .status__favicon {
width: 16px; width: 16px;
height: 16px; height: 16px;