Updated max lines of status content

Improving visibility
This commit is contained in:
mgabdev 2020-01-15 11:14:44 -05:00
parent f40ff36f1b
commit 4787060608
3 changed files with 25 additions and 24 deletions

View File

@ -7,7 +7,7 @@ import Permalink from './permalink';
import classnames from 'classnames'; import classnames from 'classnames';
import Icon from 'gabsocial/components/icon'; import Icon from 'gabsocial/components/icon';
const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top) const MAX_HEIGHT = 200;
export default class StatusContent extends React.PureComponent { export default class StatusContent extends React.PureComponent {

View File

@ -7,36 +7,37 @@ import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
const mapStateToProps = (state, { id }) => ({ const mapStateToProps = (state, { id }) => ({
status: state.getIn(['statuses', id]), status: state.getIn(['statuses', id]),
account: state.getIn(['accounts', state.getIn(['statuses', id, 'account'])]), account: state.getIn(['accounts', state.getIn(['statuses', id, 'account'])]),
}); });
@connect(mapStateToProps) @connect(mapStateToProps)
export default class StatusQuote extends React.PureComponent { export default class StatusQuote extends React.PureComponent {
static contextTypes = { static contextTypes = {
router: PropTypes.object, router: PropTypes.object,
}; };
static propTypes = {
status: ImmutablePropTypes.map.isRequired,
};
render() { static propTypes = {
const { status, account } = this.props; status: ImmutablePropTypes.map.isRequired,
};
const statusUrl = `/${account.get('acct')}/posts/${status.get('id')}`; render() {
const { status, account } = this.props;
return ( const statusUrl = `/${account.get('acct')}/posts/${status.get('id')}`;
<NavLink to={statusUrl} className="status__quote">
<DisplayName account={account} />
<StatusContent return (
status={status} <NavLink to={statusUrl} className="status__quote">
expanded={false} <DisplayName account={account} />
/> <StatusContent
</NavLink> status={status}
); expanded={false}
} onClick
collapsable
/>
</NavLink>
);
}
} }

View File

@ -428,7 +428,7 @@
} }
.status__content.status__content--collapsed { .status__content.status__content--collapsed {
max-height: 20px * 15; // 15 lines is roughly above 500 characters max-height: 20px * 10; // 10 lines x 20px per line of text
} }
.status__content__read-more-button { .status__content__read-more-button {