From f1a60d4b81ced3bc6d2bc7251b6f6f75d6d76593 Mon Sep 17 00:00:00 2001 From: Matthew Walsh Date: Sun, 18 Jun 2017 15:09:03 -0700 Subject: [PATCH] Unified avatar styling Avatars now have consistent styling across all pages; border radius can be adjusted with a SASS variable ($ui-avatar-border-size) --- .../features/account/components/header.js | 12 +++++------ app/javascript/styles/_mixins.scss | 2 +- app/javascript/styles/about.scss | 8 +++----- app/javascript/styles/accounts.scss | 20 ++++++++----------- app/javascript/styles/components.scss | 5 ++--- app/javascript/styles/stream_entries.scss | 13 +++++------- 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 f929f1162de..f5fce482a1e 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 {
- - - + + + + @{account.get('acct')} {lockedIcon}
diff --git a/app/javascript/styles/_mixins.scss b/app/javascript/styles/_mixins.scss index 67d768a6c6e..455062135a7 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 3512bdcb45d..7145d0092f4 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 801817d80e5..10f8bd2b9c2 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 e1176a654cc..025ef2f64b6 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 fcec32d4473..490e36faba2 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 8362096e1c4..bf8c12bc048 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%;