Editing a page layout with a smartphone corrupts desktop browsers view

Bug #1951263 reported by Stefan Bäcker
8
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Mahara
High
Unassigned

Bug Description

Mahara 21.04.1 (same with demo.mahara.org)
Ubuntu Server 20.04.3 LTS
MariaDB 10.3
Firefox 94 / Chrome 95

Editing a page layout with a smartphone (or mobile device emulation in firefox) or narrowing down a desktop browser window until the mobile view kicks in reorders all boxes into a single column layout. This saves the page in a 1 column width layout using only one of the twelve columns used in the desktop view, giving a distorted picture. While this might be acceptable for a users own pages, this is definitely not ok for group owned pages intended for collaborative work.

Steps to reproduce:

on smartphone (or narrowed down browser) create page
enter layout editor
add text box
leave editor
watch page with desktop browser

see attached image for sample

Revision history for this message
Stefan Bäcker (stefan-baecker-29) wrote :
Revision history for this message
Kristina Hoeppner (kris-hoeppner) wrote :

Hi Stefan. Thanks for the report. We are aware of this and were hoping to fix it along with the upgrade to the latest version of Gridstack. A work-in-progress patch is available at https://reviews.mahara.org/#/c/12116/ but doesn't yet resolve the issue. More work is required.

Changed in mahara:
status: New → In Progress
importance: Undecided → High
milestone: none → 22.04.0
Revision history for this message
Kristina Hoeppner (kris-hoeppner) wrote :

Robert made some adjustments for the new version of Gridstack in https://reviews.mahara.org/#/c/12111/ that is helping. It's not a perfect solution yet, but better than what you see at the moment. Still more work to be done.

Revision history for this message
Kristina Hoeppner (kris-hoeppner) wrote :

Status quo:

When a page is created in desktop mode, block dimensions are saved. When the block is edited in mobile mode (at 750px, there is no tablet mode), the new edited dimensions are saved and thus overwrite the desktop dimensions, which are dropped from the database. Mobile has the default width set to 1 column and that's why the columns are made skinny.

'Editing' can mean a few different things:

- Editing the dimensions
- Editing block content and saving the changes by clicking the 'Save' button
- Sometimes also viewing the page as some blocks trigger a layout change to adjust the content held within them.

Changes to be made:

1. Page created in desktop but changes made in mobile: Build logic to ignore the width set in mobile mode and keep desktop dimensions.
2. New page created in mobile: Set the default width to the default desktop width instead of using 1. It should be saved as 'default' rather than a particular width as we are planning on changing the default width to 12 columns: https://bugs.launchpad.net/mahara/+bug/1952143
3. In Mobile: When to block configuration is updated by clicking the 'Save' button don't change the block dimension, but leave it on what is there. Only change the block dimension when the block is actively resized on mobile, but not when block content is saved. Ideally, also not when a block is moved up or down, but that may not be possible.
4. Can we ignore the height? A) Do we need to save it or can be dispense with it? B) Do we save it but don't use for calculations as our blocks float to the top and are as long as the content should be.

To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers

Bug attachments