add inline scrims

[LeoMcA]

Description

Add inline scrims throughout curriculum.

Needs to wait for the related yari PR to be merged before merging.

Related issues and pull requests

• https://mozilla-hub.atlassian.net/browse/MP-1508
• enhance(curriculum): add inline scrim design to custom element yari#11866

@chrisdavidmills could you check these scrims correspond to the ones you put in the doc? Feel free to update any wording/move things around as you see fit. I'll get this up on stage so you can see how it looks.

[chrisdavidmills]

Great stuff @LeoMcA. I've checked it against my Google Doc, and all of the URLs, display titles and embed positions look to be correct. I just had a couple of minor comments.

[chrisdavidmills]

Perfect, I think this is ready to go. I will hold off on merging it until the associated yari work is ready.

[LeoMcA]

@chrisdavidmills The scrims are on staging if you'd like to take a look: https://developer.allizom.org/en-US/curriculum/getting-started/soft-skills/#1.4_collaboration_and_teamwork

[chrisdavidmills]

@LeoMcA OK, I've had a look and I think these look nice and function well. My only outstanding comments are:

• When you click to load the scrim and it pops up full window width, you get a little message popping up at the bottom of the embed that says "OPError: Not Allowed". The embed works fine, but I wonder if this might put some users off a bit. Not sure if this is something that needs to be looked at on our side of Scrimba's side?
• The embeds in the page are the full width of the content column. IMO, they look a bit big and in-your-face on desktop. Would it be worth considering making them a bit smaller (say 70% of column width) on desktop, and centering them vertically?
• In my Google doc, Miruna expressed concern that one of the scrims was also linked to as a regular link. I thought about this, and wondered if we ought to remove the links that link to the same embedded scrims. Does it seem weird, or is it helpful to have regular link versions available too? Or maybe we should just remove the links in cases where you've got the embed right next to the regular link. What do you think?

[LeoMcA]

When you click to load the scrim and it pops up full window width, you get a little message popping up at the bottom of the embed that says "OPError: Not Allowed". The embed works fine, but I wonder if this might put some users off a bit. Not sure if this is something that needs to be looked at on our side of Scrimba's side?

Yes, I need to raise this with Scrimba

The embeds in the page are the full width of the content column. IMO, they look a bit big and in-your-face on desktop. Would it be worth considering making them a bit smaller (say 70% of column width) on desktop, and centering them vertically?

I've made them a little smaller, will deploy the change to staging

In my Google doc, Miruna expressed concern that one of the scrims was also linked to as a regular link. I thought about this, and wondered if we ought to remove the links that link to the same embedded scrims. Does it seem weird, or is it helpful to have regular link versions available too? Or maybe we should just remove the links in cases where you've got the embed right next to the regular link. What do you think?

I'd keep the regular links, at least for now: we haven't fully figured out server side rendering of custom elements yet, and I don't want that to be a release blocker. Without it, if the custom element doesn't load (due to client side JS being disabled, or other reasons), and if we deduplicate the links, we'd end up with no link to the scrim. The PDF also requires the links, as it just ignores the custom element.

[chrisdavidmills]

I've made them a little smaller, will deploy the change to staging

@LeoMcA The new size looks great; GTG from my end.