add new css class that auto wrap to allow more share links
This commit is contained in:
parent
f2c59e7108
commit
2c82fb609a
4 changed files with 27 additions and 3 deletions
|
@ -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';
|
||||
|
|
10
client/scss/social-share-link/_social-share-link.scss
Normal file
10
client/scss/social-share-link/_social-share-link.scss
Normal 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;
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
13
client/src/components/SocialShareLink/index.jsx
Normal file
13
client/src/components/SocialShareLink/index.jsx
Normal 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;
|
Loading…
Reference in a new issue