Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Survey Task: Chooser and ChoiceButton styling updates #6238

Open
5 tasks
seanmiller26 opened this issue Aug 27, 2024 · 0 comments
Open
5 tasks

Survey Task: Chooser and ChoiceButton styling updates #6238

seanmiller26 opened this issue Aug 27, 2024 · 0 comments
Assignees
Labels
design Design and/or UX enhancement New feature or request

Comments

@seanmiller26
Copy link
Contributor

seanmiller26 commented Aug 27, 2024

Package

Choose from the list:

  • app-content-pages
  • app-project
  • [ x ] lib-classifier
  • lib-panoptes-js
  • lib-react-components
  • unknown

Is your feature request related to a problem? Please describe.

Changing the animal choice designs to be more intentional and future-proof. This also addresses mobile friendliness.

Describe the solution you'd like

There are three display options for a survey task: 1 column, 2 columns, or 3 columns, with or without a thumbnail.

1 column styling:
A consistent cell size of 60px H x 500 W. 16pt font. This stretches the full width of the task area.

Screenshot 2024-09-05 at 1 12 28 PM

2 column styling:
A consistent cell size of 60px H x 250px W. 16pt font. Each line should alternate between a #FFFFFF fill and a #EFF2F5 fill.

Screenshot 2024-09-05 at 12 17 09 PM Screenshot 2024-09-05 at 12 17 15 PM Screenshot 2024-09-05 at 12 32 45 PM

3 column styling:
Cell size of 60px H x 166px W. 14pt font. Each line should alternate between a #FFFFFF fill and a #EFF2F5 fill.

Screenshot 2024-09-05 at 12 14 42 PM Screenshot 2024-09-05 at 12 15 35 PM Screenshot 2024-09-05 at 12 31 23 PM

No thumbnail:
Screenshot 2024-09-05 at 12 30 07 PM

Figma for reference https://www.figma.com/design/ASqNlLhicNRzEDhYDA2t8j/Survey?node-id=0-1&m=dev&t=PxDxXDB67AH8V9Aa-1

Tied closely with #6237

@seanmiller26 seanmiller26 added enhancement New feature or request design Design and/or UX labels Aug 27, 2024
@mcbouslog mcbouslog self-assigned this Sep 5, 2024
@seanmiller26 seanmiller26 changed the title Survey Task: styling updates Survey Task: 'choice' styling updates Sep 5, 2024
@mcbouslog mcbouslog changed the title Survey Task: 'choice' styling updates Survey Task: Chooser and ChoiceButton styling updates Sep 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design Design and/or UX enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants