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

Card: fix icons in embedded video player

Browse source
This commit is contained in:
Alex Gleason 2021-10-02 15:02:07 -05:00
parent ba09e2ebc9
commit 0a4ffc3624
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -173,7 +173,7 @@ export default class Card extends React.PureComponent {
<div className='status-card__content'>
{title}
<p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>
<span className='status-card__host'><Icon id='link' /> {provider}</span>
<span className='status-card__host'><Icon src={require('@tabler/icons/icons/link.svg')} /> {provider}</span>
</div>
);
@ -185,10 +185,10 @@ export default class Card extends React.PureComponent {
if (embedded) {
embed = this.renderVideo();
} else {
let iconVariant = 'play';
let iconVariant = require('@tabler/icons/icons/player-play.svg');
if (card.get('type') === 'photo') {
iconVariant = 'search-plus';
iconVariant = require('@tabler/icons/icons/zoom-in.svg');
}
embed = (
@ -197,8 +197,8 @@ export default class Card extends React.PureComponent {
<div className='status-card__actions'>
<div>
<button onClick={this.handleEmbedClick}><Icon id={iconVariant} /></button>
{horizontal && <a href={card.get('url')} target='_blank' rel='noopener'><Icon id='external-link' /></a>}
<button onClick={this.handleEmbedClick}><Icon src={iconVariant} /></button>
{horizontal && <a href={card.get('url')} target='_blank' rel='noopener'><Icon src={require('@tabler/icons/icons/external-link.svg')} /></a>}
</div>
</div>
</div>

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

@ -544,6 +544,11 @@
position: relative;
bottom: -1px;
}
.svg-icon {
width: 20px;
height: 20px;
}
}
}
@ -592,12 +597,19 @@ a.status-card {
}
.status-card__host {
display: block;
display: flex;
margin-top: 10px;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
align-items: center;
.svg-icon {
height: 15px;
width: 15px;
margin-right: 3px;
}
}
.status-card__image {