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

Use block button styles for quiz actions #4023

Merged
merged 8 commits into from
Mar 9, 2021

Conversation

yscik
Copy link
Contributor

@yscik yscik commented Mar 1, 2021

Closes #3973

This is a temporary solution to make sure that buttons on the quiz page don't stand out for new courses that use block-based buttons everywhere else. We'll want to to a wider revamp of Sensei's frontend styles in the future.

Changes proposed in this Pull Request

  • Disable Sensei button styles on the single quiz page if the lesson has Sensei blocks (lesson actions/contact teacher)
  • Update quiz action buttons markup, set secondary actions to outline style
  • Also update Contact teacher button style to just be a link on this page, so it's less distracting

Testing instructions

  • Have a lesson with a quiz
  • Add a lesson actions block. Open lesson quiz on the frontend. Check that the quiz actions look like block-based buttons.
  • Remove lesson actions (and contact teacher) block from the lesson. Check that quiz actions now look like the Sensei-style variants.

Compatibility, template changes

While this change tries to not break things, some custom CSS made for Sensei buttons might have to be updated:

  • Markup for the quiz action buttons changed (input[type=submit] => button)
  • CSS specificity for Sensei default button styles increased (.quiz => .quiz:not(.quiz-blocks))

Screenshot / Video

Blocks:

image

Not blocks:

image

@yscik yscik added this to the 3.9.0 milestone Mar 1, 2021
@yscik yscik requested a review from a team March 1, 2021 17:55
@yscik yscik added the PHP Templates This change modifies one or more PHP Templates. label Mar 1, 2021
@donnapep
Copy link
Collaborator

donnapep commented Mar 3, 2021

The buttons appear to be stacking for me regardless of which theme I try. Following screenshot is Twenty Twenty One:

Screen Shot 2021-03-03 at 2 38 06 PM

@yscik
Copy link
Contributor Author

yscik commented Mar 4, 2021

Added the CSS to display correctly in all cases @ a25f369


<?php } // End If Statement ?>

<?php if ( isset( $reset_quiz_allowed ) && $reset_quiz_allowed ) { ?>
<?php if ( true || isset( $reset_quiz_allowed ) && $reset_quiz_allowed ) { ?>
Copy link
Member

@jom jom Mar 5, 2021

Choose a reason for hiding this comment

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

true (also line 1345)

50idqt

Copy link
Member

@jom jom left a comment

Choose a reason for hiding this comment

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

Once the debug code is removed, I think this is ready 🚢 .

assets/css/frontend.scss Show resolved Hide resolved
Copy link
Member

@jom jom left a comment

Choose a reason for hiding this comment

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

Looks good!

@yscik yscik merged commit 978f8ce into master Mar 9, 2021
@yscik yscik deleted the change/quiz-action-button-styles branch March 9, 2021 17:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
PHP Templates This change modifies one or more PHP Templates.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add Quiz Actions block
3 participants