Review block dimensions and layout in Gridstack

[Kristina Hoeppner]

Query at https://matrix.to/#/!wVXvWZqZjfoqrWaeON:matrix.org/$1678781905392iABNZ:chat.virtuos.uni-osnabrueck.de?via=matrix.org&via=chat.virtuos.uni-osnabrueck.de :

On the large screen of my laptop, I create a page in Mahara and place two blocks horizontally next to each other: a text on the left, an image next to it.
If I now view this page with my smartphone, the blocks are displayed below each other. This is not a problem.

Now I create a block on my smartphone between the two already existing blocks.
When I view the page later on the large screen of my laptop, the layout of the page has changed. All three blocks are now stacked vertically. The original two blocks are now no longer horizontally next to each other.

----------------------

Reply:

Confirmed: This is the current behaviour: When one goes to mobile and a block is added or changed, the dimensions and positioning of blocks are updated, resulting in the behaviour that you are seeing. We will have a chat to discuss if we can mitigate that.

learnOPENtechBECK had a somewhat similar enquiry a little while ago because the order of the blocks may also change. So we should look into those two things at the same time.

In Mahara 23.04, the default width will change to 12 columns (of Bootstrap grid), i.e. full width, which will mitigate odd looking portfolios when someone uses a mobile device primarily. However, it won't resolve the issue you brought up when you place blocks next to each other. We'll still need to deal with that in a better way.

One potential solution that Robert came up with was to record the desktop dimensions (and positions) and the mobile ones separately. We'd still need to look how that affects the placement of new blocks and the order of blocks. A bit complex with the grid being able to be changed a fair bit also in a tablet view etc.

We may in the first instance also need to upgrade to the latest Gridstack (it's moved quite quickly) as some of those issues may have been resolved natively and we'll have to check how our customisations affect the behaviour you are seeing.