bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ProfileInfoPanel: style join date and stats

Browse source
This commit is contained in:
Alex Gleason 2021-09-13 13:36:37 -05:00
parent 3606901e87
commit 8faea0b3cc
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
4 changed files with 27 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/soapbox/features/ui/components/profile_info_panel.js
View file

@ -135,7 +135,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
<div className='profile-info-panel-content__bio' dangerouslySetInnerHTML={content} /> <div className='profile-info-panel-content__bio' dangerouslySetInnerHTML={content} />
} }
{isLocal(account) && <div className='profile-info-panel-content__badges__join-date'> {isLocal(account) && <div className='profile-info-panel-content__join-date'>
<Icon id='calendar' /> <Icon id='calendar' />
<FormattedMessage <FormattedMessage
id='account.member_since' defaultMessage='Joined {date}' values={{ id='account.member_since' defaultMessage='Joined {date}' values={{
@ -144,7 +144,10 @@ class ProfileInfoPanel extends ImmutablePureComponent {
/> />
</div>} </div>}
<ProfileStats account={account} /> <ProfileStats
className='profile-info-panel-content__stats'
account={account}
/>
{(fields.size > 0 || identity_proofs.size > 0) && ( {(fields.size > 0 || identity_proofs.size > 0) && (
<div className='profile-info-panel-content__fields'> <div className='profile-info-panel-content__fields'>

6
app/soapbox/features/ui/components/profile_stats.js
View file

@ -4,6 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import { shortNumberFormat } from 'soapbox/utils/numbers'; import { shortNumberFormat } from 'soapbox/utils/numbers';
import { injectIntl, defineMessages } from 'react-intl'; import { injectIntl, defineMessages } from 'react-intl';
import classNames from 'classnames';
const messages = defineMessages({ const messages = defineMessages({
followers: { id: 'account.followers', defaultMessage: 'Followers' }, followers: { id: 'account.followers', defaultMessage: 'Followers' },
@ -16,10 +17,11 @@ class ProfileStats extends React.PureComponent {
static propTypes = { static propTypes = {
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
account: ImmutablePropTypes.map.isRequired, account: ImmutablePropTypes.map.isRequired,
className: PropTypes.string,
} }
render() { render() {
const { intl } = this.props; const { intl, className } = this.props;
const { account } = this.props; const { account } = this.props;
if (!account) { if (!account) {
@ -29,7 +31,7 @@ class ProfileStats extends React.PureComponent {
const acct = account.get('acct'); const acct = account.get('acct');
return ( return (
<div className='profile-stats'> <div className={classNames('profile-stats', className)}>
<NavLink className='profile-stat' to={`/@${acct}/followers`} onClick={this.handleClose} title={intl.formatNumber(account.get('followers_count'))}> <NavLink className='profile-stat' to={`/@${acct}/followers`} onClick={this.handleClose} title={intl.formatNumber(account.get('followers_count'))}>
<strong className='profile-stat__value'> <strong className='profile-stat__value'>
{shortNumberFormat(account.get('followers_count'))} {shortNumberFormat(account.get('followers_count'))}

30
app/styles/components/profile-info-panel.scss
View file

@ -20,20 +20,26 @@
margin: 5px 0; margin: 5px 0;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
}
&__join-date { &__join-date {
display: block; display: flex;
margin-top: 5px; font-size: 14px;
color: var(--primary-text-color--faint);
align-items: center;
line-height: normal;
.fa { .fa {
margin-right: 8px; margin-right: 8px;
} font-size: 20px;
}
}
span { &__stats {
color: var(--primary-text-color); margin-top: 15px;
font-size: 15px;
line-height: 1.25; .profile-stat {
} font-size: 16px;
} }
} }
@ -56,7 +62,7 @@
small { small {
display: block; display: block;
font-size: 16px; font-size: 15px;
line-height: 1.5; line-height: 1.5;
color: var(--primary-text-color--faint); color: var(--primary-text-color--faint);
font-weight: 400; font-weight: 400;

4
app/styles/components/profile-stats.scss
View file

@ -23,8 +23,4 @@
display: flex; display: flex;
color: var(--primary-text-color--faint); color: var(--primary-text-color--faint);
} }
&:hover {
text-decoration: underline;
}
} }