Make mobile responsiveness better

[JuStTheDev]

Since the idea of scaling in DnD there is a problem displaying and handling DnD Content that is designed for landscape (lets say 16:9) screens on small portrait displays (lets say 0:16). The problem comes with the screen usage of only 9^2/16^2<32% of screen by the question itself.
Assuming we have a smartphone, its gonna be hard to touch-interact with a question in such cases.

I have an idea for addressing this issue. Let the editor create two layouts for the content. One for landscape screen (horizontal) and one for portrait screens (vertical). An idea how the editor could see the dnd-editor:

The editor can (or must) choose two background images each one for portrait an landscape.
Let's assume the editor creates some draggables and dropzones and arranges them in Step 2

He now switches over to newly introduced Step 3, which initially shows him all the draggables and dropzones put side by side together fitted into the aspect ratio of the portrait background image. He then rearranges the interactive element once again in this step.

He can neither add or remove any draggables or dropables in this step nor can he edit these elements beyond their geometrical properties.

In the front-end the design will then be chosen depending on the aspect ratio of the iframe/screen.

Data handling in terms of content-json has to be a bit more complicated and especially the content_user_data has to be tweaked much so that a user state created mobile works on a desktop later when user returns to the content and wants to continue his work.

I have ideas for all of these points and I'm willing to contribute this work but for contribution I want to check acceptance of my ideas in the forehand.

Hopefully a vivid discussion starts from here and we can create an even better solution for responsiveness than mine.

By the way. Since this is kind of connected to this issue:
I created an additional widget for DnD that lets you choose an amount of whitespace besides the background image where one can place draggables so that the user at the end hasfree space in the image where he can drag the draggables into. This illustrates the essential part of the DnD-Editor:

Cheers!

[jelenamilinovic]

Hi Julian and thanks for all the effort you are putting into making H5P better!

The solution you suggested would work nicely for standalone Drag and Drop. However, when using DnD in compound content types like Course Presentation and Interactive Video, content would still scale down on mobile because this is the way those content types are built. I don't think there is a way to force a vertical view on DnD inside CP or IV.

The idea is good, to give the option for separate mobile layout, as long as it is an option and not must. Because of the way responsiveness work in CP and IV I think it is best to implement your suggestion as a new content type.

Widget for DnD that lets you choose an amount of whitespace besides the background image looks like a great addition to DnD! Would be nice if you could have an additional selector to choose a place where the whitespace would show.

Best
Jelena