Avatar badges UI suggestions

010101

JohnP That looks nice. I like the white border.

010101

I've landed on a new arrangement for my forum and I'll share the code. It's a vertically stacked layout for the badges in most places. But, on mobile, badges are inline horizontally when viewing a post and replies. These adjustments look nice IMO, unhide the avatar, and separate the badges a little bit so that you can see the icon for each one.

As you'll see, this requires a lot of changes. Many more than the 2 small changes in the pull request that sparked this.

Screenshots first, then the code...

User profile

Discussion list (desktop)

A post (desktop)

Discussion list (mobile)

A post (mobile)

The code (paste into your custom CSS box within the admin)

/* Alt Discussion List Badges (Sticky & Lock) */

/* Stack badges vertically and overlap */
.DiscussionList .badges, .DiscussionList .badges>li {
    display: block;
    margin-bottom: -5px !important;
}

/* Reduce badge icon size by less than a pixel (original ~12px) */
.DiscussionList .Badge, .DiscussionList .Badge .Badge-icon {
    font-size: 11px;
    line-height: 18px;
}

/* Reduce color badge background width & height by 1px (original 22px) */
.DiscussionList .Badge {
    width: 21px;
    height: 21px;
}

/* Move badges off of avatar slightly (original -55px) - also push post title to the right 5px extra pixels */

@media (min-width: 768px) {
.DiscussionList .DiscussionListItem-badges {
    margin-left: -50px;
    margin-right: 5px;
}
}

/* Mobile rules for Alt Discussion List Badges (Sticky & Lock) */
/* Basically make things a little smaller */
@media (max-width: 767px) {
.DiscussionList .DiscussionListItem-badges {
    margin-left: -35px;
    margin-right: 5px;
}
.DiscussionList .Badge, .DiscussionList .Badge .DiscussionList .Badge-icon {
    font-size: 10px;
}
.DiscussionList .Badge {
    width: 19px;
    height: 19px;
}
}

/* Alt Post Stream Badges (Group Badges) */

/* Move badges off of avatar slightly (original -55px) - also push things to the right */
@media (min-width: 768px) {
.PostStream .PostUser-badges, .PostsUserPage .PostUser-badges {
    margin-left: -50px;
    margin-right: 10px;
    width: 47px;
}
}

/* Stack badges vertically and overlap */
.PostStream .badges, .PostStream .badges>li, .PostsUserPage .badges, .PostsUserPage .badges>li {
    display: block;
    margin-bottom: -8px;
}

/* Needed to put post back in original spot after adding margin-right of 10px to .PostUser-badges (original 105px) */
@media (min-width: 768px) {
.PostStream .Post, .PostsUserPage .Post {
    padding-left: 95px;
}
}

/* If you have 3+ badges this gives them more breathing room - moves post content over */
.PostStream .Post-body, .PostsUserPage .Post-body {
    margin-left: 8px;
}

/* Mobile for Alt Post Stream Badges (Group Badges) */
/* Put things "in-line" */
@media (max-width: 767px) {
.PostStream .PostUser-badges, .PostsUserPage .PostUser-badges {
    position: static;
    margin-left: 10px;
    margin-right: 10px;
}
.PostStream .PostUser-badges .Badge, .PostsUserPage .PostUser-badges .Badge {
    margin-left: -5px;
}
.PostStream .badges, .PostStream .badges>li, .PostsUserPage .badges, .PostsUserPage .badges>li {
    display: inline-block;
    margin-bottom: -8px;
}
}

/* Usercard fix */
.UserCard-profile .badges, .UserCard-profile .badges>li {
    display: inline-block;
}

/* Add thin border to badges */
.Badge {
border: 1px solid #ddd;
}

luceos

010101 out of curiosity, how does this look with 5 or more badges?

peopleinside

010101 you may need to add CSS for hide if more than 4 badges.
I'm unable to understand what is the CSS code for do that in the circle design but should be added also on the top and down badge.

screenshot

peopleinside

I like this and I put live on my communities.

ornanovitch

luceos out of curiosity, how does this look with 5 or more badges?

This is the whole problem of every badge css tricks I tried. Until now I just hide the user badges on my community (DiscussionPage) because we have some members with +/- 10 permission groups.

010101

luceos On the discussion list avatars you’ll have at most 3. Sticky, lock, and following. It looks good with 3. Within posts with 5+ badges? It will start to look odd. But, as-is you have that problem. If you want badges on the avatar, once you get to 5+ badges it’ll look weird with badges on top, bottom, or vertical. You either have to tell yourself that you’ll never assign more than a few to each member. Which works for most communities. Or, hide all or some of them.

Here’s an idea for the future: you always show lock, sticky, following, admin and moderator badges tied to the avatar. Because, that’s part of the Flarum look (although things change but I say this based on what others have said). Additional group badges can be in the on hover user card on desktop, and in a modal pop up on mobile.

Justoverclock

badges cant be showed on hover in a grid? in this way we can handle multiple badges

010101

Justoverclock Mobile though. I guess for mobile you could show them on tap.

hrvoje_hr

On my forum I'm running them both on top (on the left) and in the bottom.

On top are mod/admin badges, and on bottom are personal badges.

010101

Another idea just came to mind. Obviously possibilities are endless. But, I try to think of simple/minimal solutions. If you want to unhide avatars while still going with the badge attached to the avatar look... you can do something like I proposed above (vertical stack), but only up to 2 or 3. To see ALL badges you simply have to go to the person’s profile. Without adding a lot of code, I believe this could be done with simple CSS. The CSS would say hide any children after the first 2 or something like that.

010101

How about this? But, this requires javascript loading at the right time. And, there would need to be different spacing depending on which page you're on. In other words, badges in a circle around the avatar are possible. But, not something I have time to tackle right now.

010101

During my lunch break today I tweaked the previously mentioned CSS. Instead of being fully vertically stacked, the badges slightly curve. This CSS also only allows up to 4 badges to be visible in the post stream. If you have more than 4, the first 4 will show in the post stream, and all others will be in your profile. The first screenshot below demonstrates this. You'll see 4 badges in the stream, but the user actually has 5 badges in their profile header.

The idea is: show some badges next to posts, but if your community uses a TON of badges, then the extras will only be visible in profiles.

Screenshots:

/* Alt Discussion List Badges (Sticky & Lock) */

/* Stack badges vertically and overlap */
.DiscussionList .badges, .DiscussionList .badges>li {
    display: block;
    margin-bottom: -8px !important;
    margin-top: 2.7px;
}

.DiscussionList .badges>li:nth-child(2) {
    padding-left: 45px;
}

/* Reduce badge icon size by less than a pixel (original ~12px) */
.DiscussionList .Badge, .DiscussionList .Badge .Badge-icon {
    font-size: 10px;
    line-height: 16px;
}

/* Reduce color badge background width & height by 1px (original 22px) */
.DiscussionList .Badge {
    width: 18px;
    height: 18px;
}

/* Move badges off of avatar slightly (original -55px) - also push post title to the right 5px extra pixels */

@media (min-width: 768px) {
.DiscussionList .DiscussionListItem-badges {
    margin-left: -55px;
    margin-right: 15px;
}
}

/* Mobile rules for Alt Discussion List Badges (Sticky & Lock) */
/* Basically make things a little smaller */
@media (max-width: 767px) {
.DiscussionList .DiscussionListItem-badges {
    margin-left: -43px;
    margin-right: 15px;
}
.DiscussionList .badges>li:nth-child(2) {
    padding-left: 35px;
}
.DiscussionList .Badge, .DiscussionList .Badge .DiscussionList .Badge-icon {
    font-size: 8px;
    line-height: 14px;
}
.DiscussionList .Badge {
    width: 18px;
    height: 18px;
}
}

/* Alt Post Stream Badges (Group Badges) */

/* Move badges off of avatar slightly (original -55px) - also push things to the right */
@media (min-width: 768px) {
.PostStream .PostUser-badges, .PostsUserPage .PostUser-badges {
    margin-left: -50px;
    margin-right: 10px;
    width: 45px;
}
}

/* Stack badges vertically and overlap */
.PostStream .badges, .PostStream .badges>li, .PostsUserPage .badges, .PostsUserPage .badges>li {
    display: block;
    margin-bottom: -8px;
    margin-top: 0.1px;
}

.PostStream .badges>li:nth-child(n+5), .PostsUserPage .badges>li:nth-child(n+5) {
    display:none;
}

.PostStream .badges>li:nth-child(2), .PostsUserPage .badges>li:nth-child(2) {
    padding-left: 40px;
}
.PostStream .badges>li:nth-child(3), .PostsUserPage .badges>li:nth-child(3) {
    padding-left: 39px;
}

/* Needed to put post back in original spot after adding margin-right of 10px to .PostUser-badges (original 105px) */
@media (min-width: 768px) {
.PostStream .Post, .PostsUserPage .Post {
    padding-left: 95px;
}
}

/* If you have 3+ badges this gives them more breathing room - moves post content over */
.PostStream .Post-body, .PostsUserPage .Post-body {
    margin-left: 8px;
}

/* Mobile for Alt Post Stream Badges (Group Badges) */
/* Put things "in-line" */
@media (max-width: 767px) {
.PostStream .PostUser-badges, .PostsUserPage .PostUser-badges {
    position: static;
    margin-left: 10px;
    margin-right: 10px;
}
.PostStream .PostUser-badges .Badge, .PostsUserPage .PostUser-badges .Badge {
    margin-left: -5px;
}
.PostStream .badges, .PostStream .badges>li, .PostsUserPage .badges, .PostsUserPage .badges>li {
    display: inline-block;
    margin-bottom: -8px;
    padding: 0px !important;
}
.PostUser {
margin-right: 15px;
}
}

/* Usercard fix */
.UserCard-profile .badges, .UserCard-profile .badges>li {
    display: inline-block;
    padding: 0px !important;
}

/* Add thin border to badges */
.Badge {
border: 1px solid #ddd;
}

Darkle

010101 This is super cool and also works great with many badges, definitely something different!

ornanovitch

010101 sounds better for multiple badges, and it's pretty... fun I guess. I like it 🐈️

askvortsov One thing that might be worth considering though is some kind of indicator that there are more badges (a plus maybe?). And then if people hover, they'll see the user card.

👍️+++

Let's dream a little: if people hover the badges, the other badges circle entirely (with a little fade in) the avatar 😁

tankerkiller125

010101 I actually quite like the way those groups rotate around the avatar. It's different, but it's clean and not so horribly different that it makes me feel like it's "Not the Flarum way"

Justoverclock

i love this, maybe badges a little bit smaller, but i like it

010101

Justoverclock Yeah I struggle with how small is too small... Especially on mobile I think I could go smaller... But, would people have a hard time seeing the icon if I went any smaller? It's already down to 8px font size on mobile.

askvortsov

This is beautiful! One thing that might be worth considering though is some kind of indicator that there are more badges (a plus maybe?). And then if people hover, they'll see the user card.

010101

askvortsov Yet another idea... I know we never want to add too much to core. But, since the existing badge layout has been the way it is for years and many people like it, we leave that as the default. Then in the appearance section there's a new switch: "Alternative badge layout." And/or, the alternative badge layout could be a fof extension.

This way, you keep any old school loyal Flarum fans happy because the badges don't change. Unless... you flip a switch.

askvortsov

010101 For me, the #1 priority is making sure that these changes are possible (and not too difficult) via extension.

In core, we don't currently have "appearance switches" for anything else. I'm not sure we'd want to introduce that; instead, a micro-extension might be the way to go if possible.

peopleinside

askvortsov An extension will be the best.

I tried the new circle CSS but in my case with just two badges is not look very well so I will use the previous CSS where badges are in vertical.

An extension can let admins choose by their needs and preference and will be amazing.

For the situations where many badge are present the circle solution looks to be the good one.

010101

askvortsov Wouldn’t the extension just need to load different stylesheets? In a way that would override the defaults of course.

This extension could offer 3 or 4 layouts.

1) As-is but tiny icons (small icons let the avatar shine a little more but the icons may be hard to see, but some people may like that even if they are hard to see...)
2) Vertical (css above)
3) Curved (css above)
4) As-is for locked/sticky in discussion list, then that “inline” layout for posts.
5) Anything else someone comes up with

It feels like this is actually very important to do. Because, the badges are a major part of Flarum. I mean, I’ve spent a lot of time thinking about them because they add flare, and make Flarum “special.” They are one of the first things your eyes see.

So yeah, probably in core for now, leave badges as-is, close down my pull request if others agree. And then an extension is worked on.