There are multiple posts with group badge layout ideas and so I am going to link to a couple here so we have this one post to rule them all.
First, I present to you another idea which is mostly the same as what others have already proposed (the “inline” layout). But, I also move the discussion list lock, sticky, and following badges with this.
I started from scratch with this and wanted to make the smallest number of changes I possibly could while still unhiding avatars both in the discussion list and post stream.
/* Group Badges */
/* Desktop */
@media (min-width: 768px) {
.PostUser-badges {
float: none;
position: relative;
margin-left: 15px;
width: auto;
}
.DiscussionListItem-badges {
float: right;
margin-top: 12px;
position: relative;
right: 0px;
}
.paneShowing .DiscussionListItem-badges {
right: 0px;
}
.paneShowing .DiscussionListItem-title {
margin-right: 40px;
}
.DiscussionListItem-info .item-tags, .UserPage .DiscussionListItem-info .item-tags {
position: static !important;
}
}
/* Mobile */
@media (max-width: 767px){
.PostUser-badges {
position: static;
margin-left: 15px;
width: auto !important;
}
.DiscussionListItem-badges {
float: right;
margin-top: 12px;
position: relative;
right: -8px;
}
.DiscussionListItem-title {
margin-right: 40px;
}
}
/* Common */
.PostUser-badges .Badge {
margin-left: -5px;
}
.DiscussionListItem-badges .Badge {
margin-left: -5px;
}
Both of these screenshots are from a phone. But, the desktop version is the same.
And now, on to two existing posts about this.
Not the very first, but one of the first in-depth threads about this with a lot of examples focusing on the inline badge type layout like the one above:
https://discuss.flarum.org/d/2595-suggestion-inline-avatar-badges
A related extension inspired by the above thread:
https://discuss.flarum.org/d/26376-inline-group-badges
Finally, my other recent posts about this topic... this thread includes a curved layout that some people really seemed to like. But, I don’t know why... now I’m not 100% sold on it. No matter what, if there are a lot of badges, it looks too cluttered to have them on the avatar in any way, in my opinion. I now lean towards one of the inline layouts which completely separates the avatar and the badges.
https://discuss.flarum.org/d/27058-avatar-badges-ui-suggestions
I now realize (I honestly didn’t realize this until a couple days ago) this debate has been going on almost for as long as Flarum has been around.
