tykayn/mastodon
1
0
Fork 0
mirror of https://framagit.org/tykayn/mastodon.git synced 2023-08-25 08:33:12 +02:00
Code Issues Projects Releases Wiki Activity

Unified avatar styling

Browse Source 
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:
Matthew Walsh 2017-06-18 15:09:03 -07:00 committed by beatrix-bitrot
parent 2513d92c54
commit f1a60d4b81
7 changed files with 27 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/javascript/mastodon/features/account/components/header.js
View File

@ -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) }} />

2
app/javascript/styles/_mixins.scss
View File

@ -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;

8
app/javascript/styles/about.scss
View File

@ -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;
}
}

20
app/javascript/styles/accounts.scss
View File

@ -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 {

5
app/javascript/styles/components.scss
View File

@ -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 {

13
app/javascript/styles/stream_entries.scss
View File

@ -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;
}
}

3
app/javascript/styles/variables.scss
View File

@ -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%;