Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unified styling of avatars #3846

wants to merge 2 commits into from


Copy link

@KScl KScl commented Jun 18, 2017

Avatars now have one unified style across the entire application; the border size can be adjusted with $ui-avatar-border-size for those that prefer rounded avatars (or sharp corners).

This also removes the unnecessary motion effect given to avatars when viewing a user's profile from the web interface, as it clashed with everything else.

KScl added 2 commits June 18, 2017 16:10
Avatars now have consistent styling across all pages; border radius can be adjusted with a SASS variable ($ui-avatar-border-size)
Copy link

Gargron commented Jun 18, 2017

I am sorry but I like the round->square animation and I believe that there is no need for consistency in shapes when the context of the displayed content is different. In timelines the avatars are informational, the space is to be used effectively. But when the avatar is large and centered over an area that displays the header image, a round shape is more appropriate. And a nice hover effect for expanding the corners. Design is sometimes subjective and I understand some people don't agree but I generally do not accept subjective design changes, otherwise a lot of the PRs would be changing this stuff back and forth.

Copy link

Xkeeper0 commented Jun 19, 2017

The avatar display is inconsistent and the animations are pointless, distracting, and can't be disabled with CSS. Using the same asset (avatars) in two different display styles gives you the worst of both worlds, where you can't use the corner areas because they're clipped on profiles but you can't just leave them blank because they show up on timelines.

Copy link
Contributor Author

KScl commented Jun 19, 2017

This is more of an attempt to settle this argument once and for all. Consistent display of avatars is important for the people that actually draw and design their avatars, so they can adapt their design as necessary so no visual information is lost or hidden. It's impossible to do that if avatars look completely different based on where you're viewing them from.

And with it being a one-variable change to set rounded avatars in place of square ones, there wouldn't be further arguments over round vs square as everyone would get what they wanted one way or the other.

But as long as the inconsistency stays, I don't see the argument ever reaching a conclusion from either side.

@akihikodaki akihikodaki added the ui Front-end, design label Jun 19, 2017
Copy link

unarist commented Jun 19, 2017

FYI: You can disable it by CSS (e.g. custom.scss or userstyles):

.account__header__avatar { border-radius: 8% !important; }

Copy link

zerojay commented Jun 20, 2017

The inconsistent look of the avatars is something that I find rather odd. Square with slightly rounded edges in the timeline, squared with larger rounded edges when looking at someone's profile (after clicking on their name) and then circular when looking at their page directly in a web browser. The inconsistency is somewhat jarring and means I don't know what parts of the profile image are going to be seen at any given time.

Copy link

Gargron commented Jun 20, 2017

There are actually two styles:

  • Square with rounded corners (timelines, profile avatar on hover)
  • Round (profile avatar before hover)

The public profiles don't have the hover animation because they don't have anything dynamic at all because they're rendered as plain HTML. So there are a lot of dynamic parts missing and the templates are duplicates across React and Haml. But that's a different issue.

It's also useless to argue about predicting how the avatar is gonna be displayed. The web UI is just one application. Various native apps will follow different platform-specific design patterns, or make their own choices. Halcyon, for example, is a 1:1 replicate of the web Twitter UI. Your avatars will be displayed by software that isn't Mastodon, like GNU social, Friendica, Pleroma, Hubzilla, etc. You can't predict how it's going to be displayed. So that is a moot point. From an aesthetic point of view, as I outlined above, it makes sense to display a round image when it's overlaid on top of a header image, also when it's overall larger.

I thank @STJrInuyasha for the effort but I will close this PR.

@Gargron Gargron closed this Jun 20, 2017
Copy link

The "Well, we can't control how it shows up elsewhere" argument is so pointless it's almost laughable. This isn't a pull request to fix other applications -- it's to fix this one.

Also, there are actually three styles:

  • Timeline view (~8% border radius)
  • Profile view in a column, hovering (~33%)
  • Profile view w/o hover (50%)

You can see the differences here:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
ui Front-end, design

Successfully merging this pull request may close these issues.

None yet

6 participants