Avatar Badge Position Testing

askvortsov

I've temporarily enabled flarum/core2824 here on Discuss so we can test out how it feels before merging it. Please feel free to share thoughts and feedback!

peopleinside

askvortsov Thanks for this post and alert.
I need take time to test and to understand. A Good news, already done testing on my side.

Seems not too bad, need see with time.
The first impression was: OMG I don't like!

After a while I discovered in my community my face is not covered on Desktop but is on mobile so this new change will resolve this issue. I don't know but I will see on those day. Great idea to apply the changes here to see how look like live!

Thank you!

Arnold

askvortsov it's a very interesting idea and it looks not bad at all 🙂

But I personally prefer badges to be inline with a username (in desktop mode), like this

Justoverclock

love this change 🙂

SKevo

I dunno, I somehow can't get used to it. It just feels wrong to me and I prefer it to be in top right corner instead and let forum owners modify the position with CSS

What I would welcome is the ability to swap badges with online indicator (so badges are shown between profile picture and username in a row, and online status would be in the place of the badge (but in the bottom). But that's probably off-topic

EvilExecutor

SKevo Personally, I love this suggestion.

tankerkiller125

SKevo I basically agree, this change just feels.... Not Flarum after so many years of having it in the top right edge of the avatar. Plus I think on mobile things just seem super crunched together, but maybe it's always been like that and I just never noticed.

Darkle

tankerkiller125 I'm of the same opinion, all the images on the internet about Flarum show the badges up there, it would be a bit confusing, it's a detail that can be easily done via CSS.

With this I don't mean that I'm against it, I just think it would be a better option to put together all these changes and other improvements for a Flarum UI update (I think it was something planned in the milestones, but the descriptions don't appear anymore) this way you could mark a before and after between the old UI and the new one.

Justoverclock

maybe could be useful to move user badges into another location, but personally i like the avatar in this position

almalino

I have no preference . Both position have cons and pros

Ralkage

Arnold this location is also my preference 🙂 it gives the avatar more room to breath and I can actually bask in its fullness 🙈 though I am quite curious of the effects if a user has more than 5-10 badges… I know it looks wonky af even in its current state but I am honest belief that having badges right after the username is the right way to go! (plus, there’s a bunch of real estate on that side that you could use).

SychO

I don't mind it that much but it looks off on smaller screens, so i do prefer the old positioning.

Mark73

SychO In my opinion, I think it's only better on mobile phones as it doesn't cover the avatar anymore as it used to

Arnold

Ralkage it gives the avatar more room to breath

This and also if a user has more than 1 badge you can clearly see what badges the user has 😁

askvortsov

I think another issue is that on mobile, the group icons are just way too large: on my device, they're about half the height of the avatar, which makes everything look very crowded regardless of position.

ctml

I prefer bottom for the primary reason that it doesn't intrude as much on the users avatar, however it does look a bit off on mobile as some others have said

Justoverclock

Maybe this should be fixed too on mobile

tolgaaaltas

I didn't like this change. When badges top of the avatar, it's also near to username but when you move them to bottom it's more less recognizable.

010101

I’ve seen a couple comments mentioning something about alignment or size. As a reminder, the only change has to do with the “top” CSS and “margin-top.” The left/right alignment and the size of the badges are the same.

This option at least keeps the badges on the avatar. The inline option I’ve seen many times is nice. But, that’s even less “like Flarum.” I mention this because I saw comments about this not feeling like Flarum.

The main goal though is to stop hiding people’s faces. So, if folks don’t like this, my next vote would be to make that inline version the UI in core.

Or, the badges could easily be moved so they start on the left. I didn’t do that though because they don’t start on the left when at the top. This change was purposely done so that hardly nothing is changed, except two CSS rules.

Before we completely decide I’d like to try making badges a tiny bit smaller on mobile, and see what they look like starting on the left.

tolgaaaltas

010101 The main goal though is to stop hiding people’s faces.

Maybe it's a better idea to enlarge the badges when the cursor is over on post than to move them down.