diff options
| -rw-r--r-- | app/javascript/mastodon/features/account/components/header.js | 12 | ||||
| -rw-r--r-- | app/javascript/styles/_mixins.scss | 2 | ||||
| -rw-r--r-- | app/javascript/styles/about.scss | 8 | ||||
| -rw-r--r-- | app/javascript/styles/accounts.scss | 20 | ||||
| -rw-r--r-- | app/javascript/styles/components.scss | 5 | ||||
| -rw-r--r-- | app/javascript/styles/stream_entries.scss | 13 | ||||
| -rw-r--r-- | app/javascript/styles/variables.scss | 3 |
7 files changed, 27 insertions, 36 deletions
diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js index f929f1162..f5fce482a 100644 --- a/app/javascript/mastodon/features/account/components/header.js +++ b/app/javascript/mastodon/features/account/components/header.js @@ -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) }} /> diff --git a/app/javascript/styles/_mixins.scss b/app/javascript/styles/_mixins.scss index 67d768a6c..455062135 100644 --- a/app/javascript/styles/_mixins.scss +++ b/app/javascript/styles/_mixins.scss @@ -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; diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss index 3512bdcb4..7145d0092 100644 --- a/app/javascript/styles/about.scss +++ b/app/javascript/styles/about.scss @@ -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; } } diff --git a/app/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss index 801817d80..10f8bd2b9 100644 --- a/app/javascript/styles/accounts.scss +++ b/app/javascript/styles/accounts.scss @@ -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 { diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index e1176a654..025ef2f64 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -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 { diff --git a/app/javascript/styles/stream_entries.scss b/app/javascript/styles/stream_entries.scss index fcec32d44..490e36fab 100644 --- a/app/javascript/styles/stream_entries.scss +++ b/app/javascript/styles/stream_entries.scss @@ -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; } } diff --git a/app/javascript/styles/variables.scss b/app/javascript/styles/variables.scss index 8362096e1..bf8c12bc0 100644 --- a/app/javascript/styles/variables.scss +++ b/app/javascript/styles/variables.scss @@ -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%; |