add new css class that auto wrap to allow more share links

This commit is contained in:
Rizda Dwi Prasetya 2018-10-04 15:47:55 +07:00
parent f2c59e7108
commit 2c82fb609a
4 changed files with 27 additions and 3 deletions

View file

@ -35,6 +35,7 @@
@import '~row/_row';
@import '~vertical-split/_vertical-split';
@import '~tooltip/_tooltip';
@import '~social-share-link/_social-share-link';
@import '~channel-claims-display/_channel-claims-display';
@import '~dropzone/_dropzone';

View file

@ -0,0 +1,10 @@
.social-share-link {
flex-wrap: wrap;
margin-right: -0.5em;
margin-left: -0.5em;
}
.social-share-link > a{
padding-right:0.5em;
padding-left:0.5em;
}

View file

@ -1,9 +1,9 @@
import React from 'react';
import SpaceBetween from '@components/SpaceBetween';
import SocialShareLink from '@components/SocialShareLink';
const AssetShareButtons = ({ host, name, shortId }) => {
return (
<SpaceBetween >
<SocialShareLink >
<a
className='link--primary'
target='_blank'
@ -39,7 +39,7 @@ const AssetShareButtons = ({ host, name, shortId }) => {
>
mastodon
</a>
</SpaceBetween>
</SocialShareLink>
);
};

View file

@ -0,0 +1,13 @@
import React from 'react';
class SocialShareLink extends React.Component {
render () {
return (
<div className={'space-between social-share-link'}>
{this.props.children}
</div>
);
}
}
export default SocialShareLink;