Suggestion: Inline avatar badges

arteteco

I used this mix of @[deleted] and @MirHamid CSS to have the badges on the right of the username and going below if the screen is too small. Thanks for sharing!

@media (max-width: 768px) {
.PostUser-badges {
    position: relative;
    top: 0px;
    left: 0px;
    width: 32px;
}
}

.PostUser-badges.badges {
  float: none;
  width: auto;
  margin-left: 4px;
  top: -2px;
}
.PostUser-badges.badges li span {
  margin-left: 4px;
}
.PostUser .UserOnline {
  position: absolute;
  left: -87px;
  top: -3px;
  z-index: -1;
}
.PostUser .UserOnline .icon {
  font-size: 64px;
  border: 2px solid #fff;
  border-radius: 50%;
  line-height: 64px;
  box-shadow: 0 0px 3px 3px;
}

aaronlbpeterman

arteteco @[deleted]
Is there a way to make online circle work on mobile also?

meetdilip

aaronlbpeterman This ?

@media only screen and (max-width: 480px) {

.PostUser-badges {
    position: relative;
    top: 0px;
    left: 0px;
    width: 32px;
}


.PostUser-badges.badges {
  float: none;
  width: auto;
  margin-left: 4px;
  top: -2px;
}
.PostUser-badges.badges li span {
  margin-left: 4px;
}
.PostUser .UserOnline {
  position: absolute;
  left: -87px;
  top: -3px;
  z-index: -1;
}
.PostUser .UserOnline .icon {
  font-size: 64px;
  border: 2px solid #fff;
  border-radius: 50%;
  line-height: 64px;
  box-shadow: 0 0px 3px 3px;
}

}

Try 600px if 480px is giving problem.

aaronlbpeterman

meetdilip Unfortunately did not work (users avatars are not highlighted even at desktop now while using code above).

If someone have working version for mobile please share 🙂

I found out that this version works for desktop (and not for mobile 😅 ):

@media (max-width: 768px) {
.PostUser-badges {
    position: relative;
    top: 0px;
    left: 0px;
    width: 32px;
}
}

.PostUser-badges.badges {
  float: none;
  width: auto;
  margin-left: 4px;
  top: -2px;
}
.PostUser-badges.badges li span {
  margin-left: 4px;
}
.PostUser .UserOnline {
  position: absolute;
  left: -87px;
  top: -3px;
  z-index: -1;
}
.PostUser .UserOnline .icon {
  font-size: 64px;
  border: 2px solid #fff;
  border-radius: 50%;
  line-height: 64px;
  box-shadow: 0 0px 3px 3px;
}

davwheat

aaronlbpeterman

I just made an extension that should handle the group badges -- working on allowing the online badge to be moved, too.

https://discuss.flarum.org/d/26376-inline-group-badges

meetdilip

aaronlbpeterman Unfortunately did not work (users avatars are not highlighted even at desktop now while using code above).

The code says if screen max-width is less than 480px, use the below code. {}

Other than that, I did nothing. The code is same as given by the original author. If screen max-width is more than 480px, the system will ignore this batch of code, nothing else.

Justoverclock

aaronlbpeterman this work for me:

https://flarum.it/d/42-badge-grado-e-destra-del-nome-utente-e-online-circle

aaronlbpeterman

meetdilip Should work in theory, but tried several options for my phone (750px width) above and below this value however got no result. So pixel width is not the cause of this not working.

pupsik

@davwheat, @Justoverclock

This is not what @aaronlbpeterman talking about.

users avatars are not highlighted on mobile view, when user is online.

davwheat

pupsik

My bad -- clicked the wrong reply 🙈

meetdilip

Get me an example page where I can try. Or simply fetch the code from desktop version and put it with the mobile screen media query.

meetdilip

This might help

@media (max-width: 768px) {

.PostUser-avatar {
    left: -85px;
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 64px;
    font-size: 32px;
    line-height: 64px;
    border: solid 2px green;
}
}

Worked for me

Justoverclock

is there a way to change the "green online color" for the avatar?

meetdilip

This ?

.PostUser .UserOnline .fa-circle {
    color: green;
}

Justoverclock

Thank u! I will try tomorrow 😀

Justoverclock

mmmhhh, could be a bug with best answer?

aldob

Digital how do you imagine it then?

thimiraonline

I think it's better to align those icons to the right side of the name, just like in Facebook groups.

BatuhanBakay

Pollux Badges on the right side of the username:

.PostUser-badges {
float: none;
margin-left: 0;
width: auto;
}

.PostUser-badges .Badge {
margin-left: 10px;
}

how can we make it show on mobile

Pollux

BatuhanBakay how can we make it show on mobile

My code was just a quick proof of concept, not a full-fledged solution. Take it as a starting point for further refinements, it wasn't meant to be anything more than that.

« Previous Page