transfem-org / Sharkey

🌎 A Sharkish microblogging platform 🚀
https://joinsharkey.org/
74 stars 19 forks source link

feat: Highlight text when a poll is multiple choice #202

Open justdaj opened 7 months ago

justdaj commented 7 months ago

Summary

Recently the words "Multiple Choices" has been added to a poll, but it would be improved further if it was more visually obvious. I appreciate you may not want to deviate too much from upstream, but what about adding a class to the message which can then be styled?

Example:

image

Quick change to packages/frontend/src/components/MkPoll.vue, line 21 to add a class to the span.

An addition to the CSS to reverse the colours, making background-color: var(--fg) andcolor: var(--bg); for the new span

Purpose

To make a multiple-choice poll or obvious

Mar0xy commented 7 months ago

We didn't want to style it due to the fact that it would look off compared to all the other text so we went with the option of having that text and having different text in the confirmation pop up where it also states that you can vote multiple times.

justdaj commented 7 months ago

I doubt most people will read the second line of a pop-up. They just click-and-run -- popups in this scenarios are usually just acknowledgements of a task.

Just my thought. Thanks anyway

Mar0xy commented 7 months ago

I have looked into another coloring option and came up with this

image

justdaj commented 7 months ago

Also works, but only on a dark theme. Would need to find contrasting colours for light to highlight "Multiple choices'"

Mar0xy commented 7 months ago

It uses the accent color of the theme image

justdaj commented 7 months ago

the text contrast is not sufficiently differential, especially for visually impaired, to delineate a helper/guidance/change . Try adjusting your monitors brightness or contrast and those two will become one

diziara commented 7 months ago

the text contrast is not sufficiently differential, especially for visually impaired, to delineate a helper/guidance/change . Try adjusting your monitors brightness or contrast and those two will become one

I would argue this specifically is on the theme developer for not having sufficient contrast, though I would personally prefer the text to be bold as well as a different color, not just a different color. There's a balance to be struck between usability and I think a background color on the text here isn't the right move. Bold text would be sufficient to draw attention without being as glaring out of place.

All that said, I would have personally given the multiple choices it's own line above the rest of the info at the bottom of the poll, at a slightly larger font size. It would look intentional, but still be sufficiently stand out to draw user attention, and wouldn't look as out of place as putting a background color on two words in the middle of a bunch of other words.

Mar0xy commented 7 months ago

to be bold

This is how it looks with bold image

And this is the bolder option which makes it a tiny bit thicker

image

Insert5StarName commented 7 months ago

i like bold + color