Responsive sizing option for interactives

[ascholerChemeketa]

Motivated by:
https://mail.google.com/mail/u/0/#search/interactives/FMfcgzQbfxdJxxTPHVVmjpTkClctsRZC

Discussed:
https://mail.google.com/mail/u/0/#search/interactives/KtbxLwHPwxLFDrvvqwrQDTtCGWSBRjZXpL

Sample of final behavior:
https://computerscience.chemeketa.edu/ascholer/pretext-test/interactives/section-interactive-server.html

[ascholerChemeketa]

Draft for now...
Investigating Mitch's request re Authored interactives.

[gabindu]

Just so this is not forgotten, is there any progress on this? ;-) Thanks!

[ascholerChemeketa]

This is still on my radar. There was this additional discussion on the -dev mailing list:
https://groups.google.com/g/pretext-dev/c/_SVu3giiFGs/m/VvzOwkj4AwAJ

There have been a lot of other PRs in the queue (both my queue and the general one).

On the scale "Makes the interactives completely unusable" to "It could be slightly prettier", where does the current behavior rank for what you are trying to do?

[gabindu]

It's not a huge deal (so definitely not "unusable") in the current form - but I'd say it's a bit more serious than just "could be prettier": Even if I agree with Rob (from the -dev discussion) that in principle, students should be encouraged to use a "bigger" device/screen for serious work, I think the reality is that they more often than not revert to using their phones. Even I myself often use my phone to quickly check something before a class - and having an oversized interactive can have some cumbersome effects - see my next point below:

One problem I haven't seen mentioned yet with the current design (where the interactive is larger than the container on small screens), is that scrolling (by swiping) the main page suddenly produces unwanted behaviour, as one is almost forced to scroll on the interactive - but that can (in my case) scroll inside the interactive, instead of the actual page.

All this to say, I think this PR (and a fully responsive design) is important - and I personally like what it does, especially with the added configuration you discussed on the -dev group:

• the @responsive option (defaulting to "off") maintains backwards compatibility and other edge cases (though I'd like it if one could make it a global choice, instead of setting it to "on" for each interactive separately)
• @design-width vs @width: I personally would probably just stick with the @width percentage for simplicity, but the added flexibility of @design-width will certainly be appreciated by some authors.
• the "open in new tab" link is an excellent idea, though it should maybe also be configurable?

In any case, thanks so much for working on this!

[ascholerChemeketa]

Updated, rebased, force pushed. Ready for review.

Updated website sample here:
https://computerscience.chemeketa.edu/ascholer/pretext-test/interactives/section-interactive-authored.html
https://computerscience.chemeketa.edu/ascholer/pretext-test/interactives/section-interactive-server.html

Second page has some new demos of the responsive vs fixed layout options.

Will also post on -dev