Poor readability of the user card due to profile banner usage #1184

Open
opened 2022-08-12 10:05:12 +00:00 by fristi · 7 comments
Member

Mirrored from https://akkoma.dev/AkkomaGang/pleroma-fe/issues/128


One of the things that has always irked me about pleroma-fe, is how the profile banner is used as a background for the whole user card. This can cause problems with readability of the user bio, depending on the combination of image and theme used.

Take my own profile for example:

on a dark theme
on a light theme

Especially on the light theme, the username and handle are poorly readable due to the combination of the image and black text. It's somewhat better with the dark theme, though not great either. The problem only gets worse once you start considering themes with lower contrasts.

I would suggest changing the user card so that the profile banner is actually used as a banner, like in other microblogs like mastodon and misskey. This will also make it easier for a user to get their profile to look more consistent across the different microblogs.

On a side note, if we're to redesign the user card, we might also take into account making it look better in notifications, since it currently is just a squashed mess:

User card in notifications

I'm currently working on a little something to move some of the buttons into the top-right menu to free up more space, but I think this could also be far more condensed if the user card as a whole got a little redesign.

Mirrored from https://akkoma.dev/AkkomaGang/pleroma-fe/issues/128 --- One of the things that has always irked me about pleroma-fe, is how the profile banner is used as a background for the whole user card. This can cause problems with readability of the user bio, depending on the combination of image and theme used. Take my own profile for example: ![on a dark theme](https://cdn.subcon.town/files/dark.png) ![on a light theme](https://cdn.subcon.town/files/light.png) Especially on the light theme, the username and handle are poorly readable due to the combination of the image and black text. It's somewhat better with the dark theme, though not great either. The problem only gets worse once you start considering themes with lower contrasts. I would suggest changing the user card so that the profile banner is actually used as a banner, like in other microblogs like mastodon and misskey. This will also make it easier for a user to get their profile to look more consistent across the different microblogs. On a side note, if we're to redesign the user card, we might also take into account making it look better in notifications, since it currently is just a squashed mess: ![User card in notifications](https://cdn.subcon.town/files/notif.png) I'm currently working on a little something to move some of the buttons into the top-right menu to free up more space, but I think this could also be far more condensed if the user card as a whole got a little redesign.
Owner

yeah, the whole thing needs to be rearranged and I didn't have much time or chance to think how to make it better (with all the other things happening).

Notifications being squashed are not a problem anymore, since we are using popovers instead of inline user card:
image

yeah, the whole thing needs to be rearranged and I didn't have much time or chance to think how to make it better (with all the other things happening). Notifications being squashed are not a problem anymore, since we are using popovers instead of inline user card: ![image](/attachments/b1d25735-3935-48d8-b015-7402aa59ff0d)
112 KiB
Author
Member

I'll have to check if we already have those popover cards in akkoma-fe dev branch, otherwise I'll have to ask float about it. Having popovers makes things a lot easier tbh.

I'll have to check if we already have those popover cards in akkoma-fe dev branch, otherwise I'll have to ask float about it. Having popovers makes things a lot easier tbh.
Owner

that's what i've been working on in past couple of months (and why some bugs are still not solved)

that and vue3 support, which i believe Pleroma-FE (Akkoma version) already has.

that's what i've been working on in past couple of months (and why some bugs are still not solved) that and vue3 support, which i believe Pleroma-FE (Akkoma version) already has.
Author
Member

what does vue3 add that's useful? Keep in mind I know absolutely nothing of vue, most of what I've been doing is just messing around with the html structure and css rules.

what does vue3 add that's useful? Keep in mind I know absolutely nothing of vue, most of what I've been doing is just messing around with the html structure and css rules.
Owner

the main thing it adds that we capitalize on is lag-free teleports (in vue2 it's done by using v-portal but that causes lag because it rerenders stuff).

  • helps us make 3 column mode possible
  • removes lag when switching between 2 column and mobile mode
  • helps us make those popovers possible

also potentially it works faster, but i haven't noticed difference myself.

the main thing it adds that we capitalize on is lag-free teleports (in vue2 it's done by using v-portal but that causes lag because it rerenders stuff). - helps us make 3 column mode possible - removes lag when switching between 2 column and mobile mode - helps us make those popovers possible also potentially it works faster, but i haven't noticed difference myself.
Author
Member

You'd think moving a box around into a third column would be something simple 🤷
I guess this just shows how little I know about vue, or any reactive js framework for that matter.

Anyway I doubt I'll need to know much of this for just redesigning the user card.

You'd think moving a box around into a third column would be something simple :shrug: I guess this just shows how little I know about vue, or any reactive js framework for that matter. Anyway I doubt I'll need to know much of this for just redesigning the user card.
Owner

yeah exactly, moving boxes was not supported - you could only delete box and redraw it again from scratch.

and yeah this knowledge is not required, even a sketch on a napkin would be something at this point.

yeah exactly, moving boxes was not supported - you could only delete box and redraw it again from scratch. and yeah this knowledge is not required, even a sketch on a napkin would be something at this point.
Sign in to join this conversation.
No milestone
No project
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
pleroma/pleroma-fe#1184
No description provided.