Refactor classifier layout per survey task

[mcbouslog]

Package

• lib-classifier

Linked Issue and/or Talk Post

• closes Survey task: increase task area width to 540px for workflow with survey task #6237 , closes Task area is not responsive for Survey tasks #5093

Describe your changes

• add usesSurveyTask view to Workflow store
• pass usesSurveyTask from Layout to CurrentLayout
• update CenteredLayout, MaxWidth, and NoMaxWidth with larger task area if usesSurveyTask
• MaxWidth and NoMaxWidth between 769px-1120px use 9fr 5fr for viewer task areas, these changes include aligning viewer and task vertically at 1119px if usesSurveyTask
• center task nav buttons (Done & Talk, Done, Next, Back)

How to Review

Helpful explanations that will make your reviewer happy:

• What Zooniverse project should my reviewer use to review UX?
  • staging test project with survey task: https://local.zooniverse.org:3000/projects/markb-panoptes/survey-task-test-project/classify/workflow/2434?env=staging
• What user actions should my reviewer step through to review this PR?
  1. load workflow with survey task
  2. note wider task area with survey task
  3. change display width and note how layout changes (horizontal vs vertical viewer and task alignment)
• Which storybook stories should be reviewed?
  • http://localhost:6006/?path=/story/layouts-centered--with-survey-task
  • http://localhost:6006/?path=/story/layouts-maximum-width--with-survey-task
  • http://localhost:6006/?path=/story/layouts-no-max-width--with-survey-task
• Are there plans for follow up PR’s to further fix this bug or develop this feature? see other survey task issues

Checklist

PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.

General

• Tests are passing locally and on Github
• Documentation is up to date and changelog has been updated if appropriate
• You can yarn panic && yarn bootstrap or docker-compose up --build and FEM works as expected
• FEM works in all major desktop browsers: Firefox, Chrome, Edge, Safari (Use Browserstack account as needed)
• FEM works in a mobile browser

General UX

Example Staging Project: i-fancy-cats

• All pages of a FEM project load: Home Page, Classify Page, and About Pages
• Can submit a classification
• Can sign-in and sign-out
• The component is accessible
  • Can be used with a screen reader BBC guide to VoiceOver
  • Can be used from the keyboard WebAIM guide to keyboard testing
  • It is passing accessibility checks in the storybook

Refactoring

• The PR creator has described the reason for refactoring
• The refactored component(s) continue to work as expected

[coveralls]

coverage: 78.689% (-0.07%) from 78.755%
when pulling 3cf009b on lib-classifier_layout-with-survey-task
into a4fba3d on master.

[goplayoutside3]

A couple of things before approval:

1. Functions that start with use are reserved for custom React hooks. Because the function to detect if a workflow has a survey task is a store view, it should instead be named hasSurveyTask. I think that'll be just a quick find + replace everywhere that says usesSurveyTask in this PR.
2. In the survey task area, the choice carousel of images is left-aligned when it should be centered in the task area. This style bug is already present on production and can be seen if viewing the classifier layout on a mobile screen such an ipad. Here's a few screenshots:

[seanmiller26]

@goplayoutside3 Your 2nd concern might be better addressed in a separate PR related to #6239. Thoughts, @mcbouslog?

[mcbouslog]

A couple of things before approval:

1. Functions that start with use are reserved for custom React hooks. Because the function to detect if a workflow has a survey task is a store view, it should instead be named hasSurveyTask. I think that'll be just a quick find + replace everywhere that says usesSurveyTask in this PR.

@goplayoutside3 - the Workflow store also includes usesTranscriptionTask and usesMachineLearnt, I could do a quick find and replace for those as well?

[mcbouslog]

2. In the survey task area, the choice carousel of images is left-aligned when it should be centered in the task area. This style bug is already present on production and can be seen if viewing the classifier layout on a mobile screen such an ipad.

@goplayoutside3 Your 2nd concern might be better addressed in a separate PR related to #6239. Thoughts, @mcbouslog?

@seanmiller26 - yes the Choice image Carousel will be further refactored in #6239 (expanded to full width of choice box), but I will add a interim edit to center align the current image Carousel to fix the current issue that's more noticeable with the larger task area width.

[mcbouslog]

@seanmiller26 - I'll deploy this to https://fe-project-branch.preview.zooniverse.org after homepage and stats pages deployment for your review. I'll message you on Slack once it's available.

I think the key question will be widths of 1040px and below, and how the subject and task areas alignment change in workflows with and without a survey task.

[seanmiller26]

@mcbouslog I have some time to review today. Is this ready to preview?

[mcbouslog]

@mcbouslog I have some time to review today. Is this ready to preview?

Yes!

• staging: https://fe-project-branch.preview.zooniverse.org/projects/markb-panoptes/survey-task-test-project?env=staging
• production ( ⚠️ live project ⚠️ ): https://fe-project-branch.preview.zooniverse.org/projects/zooniverse/gravity-spy

[seanmiller26]

I'm not sure exactly the scope of this specific PR, but I have some styling to address.

• Padding should be 20px on all sides except the bottom, underneath the Done buttons = 30px.

• Padding between the choices and the Done buttons should be 30px. Note: the 'Showing x' and 'Clear Filters' won't be in this area anymore, but that rearrangement will probably in in another PR.

Otherwise the basic adjustment to 540px looks good. And I like where it switches to a vertical layout.

[seanmiller26]

Noticed this behavior right around the 1279-1280px view.

Maybe this is better addressed in the choices PR.