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

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

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