mirror of
https://github.com/glitch-soc/mastodon.git
synced 2024-11-25 01:24:02 -05:00
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 escapeTextContentForBrowser from 'escape-html';
|
||||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||||
import IconButton from '../../../components/icon_button';
|
import IconButton from '../../../components/icon_button';
|
||||||
import Motion from 'react-motion/lib/Motion';
|
import Avatar from '../../../components/avatar';
|
||||||
import spring from 'react-motion/lib/spring';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
@ -130,7 +128,6 @@ export default class Header extends ImmutablePureComponent {
|
|||||||
me: PropTypes.number.isRequired,
|
me: PropTypes.number.isRequired,
|
||||||
onFollow: PropTypes.func.isRequired,
|
onFollow: PropTypes.func.isRequired,
|
||||||
intl: PropTypes.object.isRequired,
|
intl: PropTypes.object.isRequired,
|
||||||
autoPlayGif: PropTypes.bool.isRequired,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
@ -180,9 +177,10 @@ export default class Header extends ImmutablePureComponent {
|
|||||||
<div className='account__header__wrapper'>
|
<div className='account__header__wrapper'>
|
||||||
<div className='account__header' style={{ backgroundImage: `url(${account.get('header')})` }}>
|
<div className='account__header' style={{ backgroundImage: `url(${account.get('header')})` }}>
|
||||||
<div>
|
<div>
|
||||||
<Avatar account={account} autoPlayGif={this.props.autoPlayGif} />
|
<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} />
|
<span className='account__header__display-name' dangerouslySetInnerHTML={displayNameHTML} />
|
||||||
|
</a>
|
||||||
<span className='account__header__username'>@{account.get('acct')} {lockedIcon}</span>
|
<span className='account__header__username'>@{account.get('acct')} {lockedIcon}</span>
|
||||||
<div className='account__header__content' dangerouslySetInnerHTML={{ __html: emojify(text) }} />
|
<div className='account__header__content' dangerouslySetInnerHTML={{ __html: emojify(text) }} />
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
@mixin avatar-radius() {
|
@mixin avatar-radius() {
|
||||||
border-radius: 4px;
|
border-radius: $ui-avatar-border-size;
|
||||||
background: transparent no-repeat;
|
background: transparent no-repeat;
|
||||||
background-position: 50%;
|
background-position: 50%;
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
|
@ -172,16 +172,14 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
width: 80px;
|
@include avatar-size(80px);
|
||||||
height: 80px;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
@include avatar-radius();
|
||||||
|
@include avatar-size(80px);
|
||||||
display: block;
|
display: block;
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
border-radius: 48px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -46,17 +46,16 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
width: 120px;
|
@include avatar-size(120px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 120px;
|
@include avatar-radius();
|
||||||
height: 120px;
|
@include avatar-size(120px);
|
||||||
display: block;
|
display: block;
|
||||||
border-radius: 120px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -283,16 +282,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
width: 60px;
|
@include avatar-size(60px);
|
||||||
height: 60px;
|
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
@include avatar-radius();
|
||||||
|
@include avatar-size(60px);
|
||||||
display: block;
|
display: block;
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
border-radius: 60px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -359,15 +356,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
& > div {
|
& > div {
|
||||||
|
@include avatar-size(48px);
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
|
@include avatar-radius();
|
||||||
display: block;
|
display: block;
|
||||||
border-radius: 4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.display-name {
|
.display-name {
|
||||||
|
@ -1004,12 +1004,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.account__header__avatar {
|
.account__header__avatar {
|
||||||
background-size: 90px 90px;
|
@include avatar-radius();
|
||||||
|
@include avatar-size(90px);
|
||||||
display: block;
|
display: block;
|
||||||
height: 90px;
|
|
||||||
margin: 0 auto 10px;
|
margin: 0 auto 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 90px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.account-authorize {
|
.account-authorize {
|
||||||
|
@ -64,19 +64,17 @@
|
|||||||
|
|
||||||
.status__avatar {
|
.status__avatar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@include avatar-size(48px);
|
||||||
left: 14px;
|
left: 14px;
|
||||||
top: 14px;
|
top: 14px;
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
|
|
||||||
& > div {
|
& > div {
|
||||||
width: 48px;
|
@include avatar-size(48px);
|
||||||
height: 48px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
@include avatar-radius();
|
||||||
display: block;
|
display: block;
|
||||||
border-radius: 4px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -164,12 +162,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
width: 48px;
|
@include avatar-size(48px);
|
||||||
height: 48px;
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
@include avatar-radius();
|
||||||
display: block;
|
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-primary-color: $classic-primary-color !default; // Lighter
|
||||||
$ui-secondary-color: $classic-secondary-color !default; // Lightest
|
$ui-secondary-color: $classic-secondary-color !default; // Lightest
|
||||||
$ui-highlight-color: $classic-highlight-color !default; // Vibrant
|
$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
Block a user