Unified styling of avatars #3846
Conversation
Avatars now have consistent styling across all pages; border radius can be adjusted with a SASS variable ($ui-avatar-border-size)
|
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. |
|
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. |
|
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. |
|
FYI: You can disable it by CSS (e.g. custom.scss or userstyles): |
|
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. |
|
There are actually two styles:
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. |
|
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:
You can see the differences here: https://jsfiddle.net/phx80hyf/1/ |
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.