Usercard Redesign Experiment

[Lilly]

i really like both of this new user card design (which our site is using) and the user directory card view, and i do hope they end up as supported components at some point.

[mattdm (Matthew Miller)]

@kynic

@seanblue

but making the whole background brink pink is awful.

yea that’s awful, dunno why they made it this way.

I, for one, like the bright, solid backgrounds – pink or otherwise.

[JammyDodger]

I quite like them in the screenshot of dark mode and thought they looked pretty jazzy. I don’t use dark mode though, so it may defeat the object of it if there’s a big burst of colour.

[Lilly]

btw, i on our site, i override the background with this:

common css

#user-card {
  background: #eeeeee;
...
}

[tobiaseigen]

I use dark mode pretty much everywhere and I agree that the bright colors are a bit distracting/overwhelming. In my opinion, they even add a bit of stress and urgency which is not the intent for sure. Would there be a way to tone down the user card colors so they still look gorgeous but are not so bright?

Personally I think this experiment has been great and I hope it leads to improvements to core discourse.

[seanblue]

@JammyDodger

I quite like them in the screenshot of dark mode and thought they looked pretty jazzy. I don’t use dark mode though, so it may defeat the object of it if there’s a big burst of colour.

I use dark mode in part because I’m sensitive to really bright screens (especially at night) so it does indeed defeat the purpose of dark mode.

[twofoursixeight]

@seanblue

I’m sensitive to really bright screens (especially at night) so it does indeed defeat the purpose of dark mode.

perhaps they should make it so that the usercards have a dark tint while in dark mode so that it is not really that bright and annoying overall

[Canapin (Coin-coin le Canapin)]

This is how @seanblue’s card would look like with a brightness filter on it:

Original

0.8 Brightness:

0.6 Brightness:

0.4 Brightness:

[jordan-vidrine]

@seanblue

I use dark mode in part because I’m sensitive to really bright screens (especially at night) so it does indeed defeat the purpose of dark mode.

Thanks to @Canapin suggestion above, I have made a slight adjustment here on meta for when the color-scheme is a dark version. The background should be a littler darker. Can you check to see if this is better?

[darkpixlz]

Yeah, imo that’s much better. I personally like the current thing with the background, but not a lot of people do, so at some point I’ll probably make a component which does the prominent color thing.

[jordan-vidrine]

This is on the timeline, just waiting for it to be integrated

[seanblue]

@jordan-vidrine

Thanks to @Canapin suggestion above, I have made a slight adjustment here on meta for when the color-scheme is a dark version. The background should be a littler darker.

Um, I think maybe something went wrong on mobile? I looks just as bright as before (or similar) and also it’s no longer blurred.

I don’t know what you went with, but I think something around the 0.6 brightness example would probably be good.

[jordan-vidrine]

Thats my fault, I didnt include the -webkit prefix in that PR, but it should now be fixed.

[seanblue]

The new version does look much better.

[Lilly]

update fixed on my forum too. thanks @jordan-vidrine. i really like that experimental user card TC, but it shouldn’t be experimental anymore

[ondrej]

@Lilly

shouldn’t be experimental anymore

I agree. Its too good to be tucked away as ‘experimental’.

[Don]

Hello

I noticed an issue with location. It seems after the first open usercard it keeps the location url on all other usercard. Thanks

[jordan-vidrine]

Wow! Great catch! I will look into this.

[rahim123]

Hi there, I ran across a bit of an issue where the usercard appears partially off-screen. It seems to only happen when the browser is maximized and using a higher zoom and/or higher dpi setting.

Sam's Simple Theme

@Arkshine Hi, appreciate the reply. I think it happens when the zoom level is higher. I first noticed the issue on Firefox, where I have the default zoom set to 110%, and also layout.css.devPixelsPerPx set to 1.1 . But I can also reproduce it with Chromium’s default settings by just zooming in a bit (it appears to only happen when the browser is maximized): [image] Ah, ok. I think I’ll cross-post this issue there. It seems like the usercard component should take care of its own CSS to avoid …

It’s more noticeable with Sam’s Simple Theme, but it starts to happen with the “Default” theme too depending on the zoom level and how many frequent posters appear:

[Arkshine]

I tried your settings, but It doesn’t seem I’m able to reproduce.

Just to be sure – are you zooming in after you open a user card modal, or does the user card always appear as your screenshot every time you click on an avatar?