Skip to content
This repository has been archived by the owner on Jan 31, 2024. It is now read-only.

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

Open
justdaj opened this issue Dec 3, 2023 · 9 comments
Open

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

justdaj opened this issue Dec 3, 2023 · 9 comments
Milestone

Comments

@justdaj
Copy link
Contributor

justdaj commented Dec 3, 2023

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) and color: var(--bg); for the new span

Purpose

To make a multiple-choice poll or obvious

@Mar0xy
Copy link
Contributor

Mar0xy commented Dec 3, 2023

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
Copy link
Contributor Author

justdaj commented Dec 3, 2023

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
Copy link
Contributor

Mar0xy commented Dec 3, 2023

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

image

@justdaj
Copy link
Contributor Author

justdaj commented Dec 3, 2023

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

@Mar0xy
Copy link
Contributor

Mar0xy commented Dec 3, 2023

It uses the accent color of the theme
image

@justdaj
Copy link
Contributor Author

justdaj commented Dec 3, 2023

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
Copy link

diziara commented Dec 3, 2023

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
Copy link
Contributor

Mar0xy commented Dec 3, 2023

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
Copy link
Contributor

i like bold + color

@Mar0xy Mar0xy added this to the 2023.12.0 milestone Dec 4, 2023
moyitpro pushed a commit to chikorita157/Sakurakey that referenced this issue Dec 30, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants