Unified avatar styling
Avatars now have consistent styling across all pages; border radius can be adjusted with a SASS variable ($ui-avatar-border-size)
This commit is contained in:
parent
2513d92c54
commit
f1a60d4b81
|
@ -5,9 +5,7 @@ import emojify from '../../../emoji';
|
|||
import escapeTextContentForBrowser from 'escape-html';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
import IconButton from '../../../components/icon_button';
|
||||
import Motion from 'react-motion/lib/Motion';
|
||||
import spring from 'react-motion/lib/spring';
|
||||
import { connect } from 'react-redux';
|
||||
import Avatar from '../../../components/avatar';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
const messages = defineMessages({
|
||||
|
@ -130,7 +128,6 @@ export default class Header extends ImmutablePureComponent {
|
|||
me: PropTypes.number.isRequired,
|
||||
onFollow: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
autoPlayGif: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
render () {
|
||||
|
@ -180,9 +177,10 @@ export default class Header extends ImmutablePureComponent {
|
|||
<div className='account__header__wrapper'>
|
||||
<div className='account__header' style={{ backgroundImage: `url(${account.get('header')})` }}>
|
||||
<div>
|
||||
<Avatar account={account} autoPlayGif={this.props.autoPlayGif} />
|
||||
|
||||
<span className='account__header__display-name' dangerouslySetInnerHTML={displayNameHTML} />
|
||||
<a href={account.get('url')} target='_blank' rel='noopener'>
|
||||
<span className='account__header__avatar'><Avatar src={account.get('avatar')} animate size={90} /></span>
|
||||
<span className='account__header__display-name' dangerouslySetInnerHTML={displayNameHTML} />
|
||||
</a>
|
||||
<span className='account__header__username'>@{account.get('acct')} {lockedIcon}</span>
|
||||
<div className='account__header__content' dangerouslySetInnerHTML={{ __html: emojify(text) }} />
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
@mixin avatar-radius() {
|
||||
border-radius: 4px;
|
||||
border-radius: $ui-avatar-border-size;
|
||||
background: transparent no-repeat;
|
||||
background-position: 50%;
|
||||
background-clip: padding-box;
|
||||
|
|
|
@ -172,16 +172,14 @@
|
|||
text-align: center;
|
||||
|
||||
.avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
@include avatar-size(80px);
|
||||
margin: 0 auto;
|
||||
margin-bottom: 15px;
|
||||
|
||||
img {
|
||||
@include avatar-radius();
|
||||
@include avatar-size(80px);
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -46,17 +46,16 @@
|
|||
}
|
||||
|
||||
.avatar {
|
||||
width: 120px;
|
||||
@include avatar-size(120px);
|
||||
margin: 0 auto;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
@include avatar-radius();
|
||||
@include avatar-size(120px);
|
||||
display: block;
|
||||
border-radius: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -283,16 +282,14 @@
|
|||
}
|
||||
|
||||
.avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
@include avatar-size(60px);
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
|
||||
img {
|
||||
@include avatar-radius();
|
||||
@include avatar-size(60px);
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -359,15 +356,14 @@
|
|||
}
|
||||
|
||||
& > div {
|
||||
@include avatar-size(48px);
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@include avatar-radius();
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.display-name {
|
||||
|
|
|
@ -1004,12 +1004,11 @@
|
|||
}
|
||||
|
||||
.account__header__avatar {
|
||||
background-size: 90px 90px;
|
||||
@include avatar-radius();
|
||||
@include avatar-size(90px);
|
||||
display: block;
|
||||
height: 90px;
|
||||
margin: 0 auto 10px;
|
||||
overflow: hidden;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.account-authorize {
|
||||
|
|
|
@ -64,19 +64,17 @@
|
|||
|
||||
.status__avatar {
|
||||
position: absolute;
|
||||
@include avatar-size(48px);
|
||||
left: 14px;
|
||||
top: 14px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
|
||||
& > div {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
@include avatar-size(48px);
|
||||
}
|
||||
|
||||
img {
|
||||
@include avatar-radius();
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -164,12 +162,11 @@
|
|||
}
|
||||
|
||||
.avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
@include avatar-size(48px);
|
||||
|
||||
img {
|
||||
@include avatar-radius();
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -26,3 +26,6 @@ $ui-base-color: $classic-base-color !default; // Darkest
|
|||
$ui-primary-color: $classic-primary-color !default; // Lighter
|
||||
$ui-secondary-color: $classic-secondary-color !default; // Lightest
|
||||
$ui-highlight-color: $classic-highlight-color !default; // Vibrant
|
||||
|
||||
// Avatar border size (8% default, 100% for rounded avatars)
|
||||
$ui-avatar-border-size: 8%;
|
||||
|
|
Loading…
Reference in New Issue