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

style(tabbed-view): change tab view to use stepper #4587

Merged
merged 1 commit into from
May 12, 2022

Conversation

syoopie
Copy link
Contributor

@syoopie syoopie commented May 11, 2022

The tab view was previous not scrollable on smaller screens / mobile, allowing for both scrollable and fullwidth is deferred to MUI v6
mui/material-ui#15324

Thus the solution is to change MUI tabs to steppers instead, so that it is more standardized with what is being used in the autograded pages as well.

fixes #4529

Examples:

No overflow

image

Overflow

image

@syoopie syoopie changed the title style(tabbed-view): fix tab view not scrollable style(tabbed-view): change tab view to use stepper May 11, 2022
@syoopie syoopie force-pushed the yoopie/fix-tab-overflow branch from 64fdce2 to a3e2d0d Compare May 11, 2022 10:28
</SvgIcon>
}
onClick={() => {
if (published || graderView) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need this check?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh that shouldnt be there it blocks students from changing questions

Refactored some code from the autograding pages to the manual grading pages
Change the tabbed view to use MUI Stepper instead of Tabs
@syoopie syoopie force-pushed the yoopie/fix-tab-overflow branch from a3e2d0d to 62ebaad Compare May 12, 2022 02:02
@cysjonathan
Copy link
Contributor

Style-wise LGTM, I'd prefer to not include Q infront of each question number to maintain consistency with autograded type of assessments. Can we make that change for consistency?

@ekowidianto
Copy link
Member

I think the Q isnt there already. Just that the images in the description is not updated.

Copy link
Member

@ekowidianto ekowidianto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job! LGTM!

@ekowidianto ekowidianto merged commit e3fdac3 into master May 12, 2022
@ekowidianto ekowidianto deleted the yoopie/fix-tab-overflow branch May 12, 2022 04:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

When on mobile or devices with small screens, some elements are reachable in current display
3 participants