Hides superluous details on small screens (#2175)
* Hides superluous details on small screans. * Addressed feedback from #2175.
This commit is contained in:
parent
74c474a652
commit
78af88e1f4
5 changed files with 29 additions and 14 deletions
|
@ -1,7 +1,6 @@
|
|||
import { Link } from 'react-router';
|
||||
|
||||
const outerStyle = {
|
||||
display: 'block',
|
||||
padding: '15px',
|
||||
fontSize: '16px',
|
||||
textDecoration: 'none'
|
||||
|
@ -12,17 +11,17 @@ const iconStyle = {
|
|||
marginRight: '5px'
|
||||
};
|
||||
|
||||
const ColumnLink = ({ icon, text, to, href, method }) => {
|
||||
const ColumnLink = ({ icon, text, to, href, method, hideOnMobile }) => {
|
||||
if (href) {
|
||||
return (
|
||||
<a href={href} style={outerStyle} className='column-link' data-method={method}>
|
||||
<a href={href} style={outerStyle} className={`column-link ${hideOnMobile ? 'hidden-on-mobile' : ''}`} data-method={method}>
|
||||
<i className={`fa fa-fw fa-${icon}`} style={iconStyle} />
|
||||
{text}
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Link to={to} style={outerStyle} className='column-link'>
|
||||
<Link to={to} style={outerStyle} className={`column-link ${hideOnMobile ? 'hidden-on-mobile' : ''}`}>
|
||||
<i className={`fa fa-fw fa-${icon}`} style={iconStyle} />
|
||||
{text}
|
||||
</Link>
|
||||
|
@ -35,7 +34,8 @@ ColumnLink.propTypes = {
|
|||
text: React.PropTypes.string.isRequired,
|
||||
to: React.PropTypes.string,
|
||||
href: React.PropTypes.string,
|
||||
method: React.PropTypes.string
|
||||
method: React.PropTypes.string,
|
||||
hideOnMobile: React.PropTypes.bool
|
||||
};
|
||||
|
||||
export default ColumnLink;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue