sforkowany z mirror/soapbox
Card: fix icons in embedded video player
rodzic
ba09e2ebc9
commit
0a4ffc3624
|
@ -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>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Ładowanie…
Reference in New Issue