Suggestion: Inline avatar badges

MirHamid

.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;
}

that is possible with Pollux thank you

Pollux

MirHamid

Regarding the badges, in fact both variants are doable with pure CSS:

Badges on the right side of the username:

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

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

Badges on the left side of the username:

.PostUser {
    float: left;
}

.PostUser h3 {
    float: right;
    margin: 0;
}

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

.PostUser-badges .Badge {
    margin: 0 5px 0 0;
}

The preview of the composer needs a little more work, but that should be easy.

MirHamid you can not create this just with css

You can do that, that's the second of my two versions.

MirHamid

[deleted] just share page link

[deleted]

MirHamid Its not public yet, maybe a other person with the level ranks extension can post here?

Ralkage

[deleted] you can find the relative LESS values here. Try playing around with them using your browser's inspector to see what fits your needs 😉

You can also post your question in the Level Ranks discussion, DM me, or ask in the Flarum Community Discord 🙂

psylancholy

[deleted] @Ralkage @MirHamid I use the Level Ranks extension on my forum too. Some kind of redesign (maybe just making it more centered) would also be appreciated.

OVOXO

MirHamid

psylancholy
i like this one

you can not create this just with css

psylancholy

MirHamid how can this be implemented?

psylancholy

psylancholy
MirHamid bump

MirHamid

psylancholy where are you from?
you need to edit that extension codes
this design just show my idea

psylancholy

MirHamid background? persian
do you think you can help me with this?

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

psylancholy

@MirHamid can you help me set up the level ui on my forum?

DursunCan

[deleted] There is such an error in the view.
http://prntscr.com/tjp1lt

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.

« Previous Page