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

New: Allow any component to use mobileBody for smaller devices (fixes #538) #539

Merged
merged 4 commits into from
May 29, 2024

Conversation

swashbuck
Copy link
Contributor

@swashbuck swashbuck commented May 15, 2024

Fix #538

New

  • Introduces the mobileBody property for component headers

Testing

  1. Add a body and mobileBody value to any component.
  2. Switch to mobile view (less than medium breakpoint) and ensure that body text uses mobileBody instead of body.
  3. Switch back to desktop view (medium breakpoint or higher) and ensure that body text uses body instead of mobileBody.

Future consideration

Add mobileBody and mobileInstruction to the core component schemas. Then, remove them from the schemas of components like Hot Graphic and Narrative. Would require migration scripts.

@swashbuck swashbuck self-assigned this May 15, 2024
@swashbuck swashbuck added the enhancement New feature or request label May 15, 2024
Copy link
Contributor

Choose a reason for hiding this comment

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

👀

Copy link
Contributor

@kirsty-hames kirsty-hames left a comment

Choose a reason for hiding this comment

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

This works as expected thanks @swashbuck.

Should we do the same for component.hbs body? I think Core wise, Media is the only component still using hbs templates.

@kirsty-hames
Copy link
Contributor

Add mobileBody and mobileInstruction to the core component schemas. Then, remove them from the schemas of components like Hot Graphic and Narrative. Would require migration scripts.

Does this need raising as a separate issue so it's not forgotten when the PR is merged?

@swashbuck
Copy link
Contributor Author

Does this need raising as a separate issue so it's not forgotten when the PR is merged?

@kirsty-hames Great idea. I've created issues for these two plugins.

adaptlearning/adapt-contrib-hotgraphic#308
adaptlearning/adapt-contrib-narrative#302

@swashbuck
Copy link
Contributor Author

Should we do the same for component.hbs body? I think Core wise, Media is the only component still using hbs templates.

@kirsty-hames I've added mobileBody to component.hbs. However, it appears that the expectation is for individual plugins to determine whether body or mobileBody would be used (same for instruction and mobileInstruction). This is different from the header.jsx template which determines the appropriate property to use within the template itself.

So, for this to work in Media and other plugins that still use the older template, updates to the Media plugin's JS would be needed. The change in 2b565d8 will help to facilitate this, though.

@swashbuck swashbuck merged commit c8e4c95 into master May 29, 2024
@swashbuck swashbuck deleted the issue/538 branch May 29, 2024 19:30
@oliverfoster
Copy link
Member

🎉 This PR is included in version 6.48.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request released
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Mobile body and instruction behave differently
4 participants