Render issue with Masonry on Skins page

Bug #1592213 reported by MattD on 2016-06-14
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Mahara
High
Unassigned
15.10
High
Unassigned
16.04
High
Unassigned
16.10
High
Unassigned

Bug Description

On the page skin/index.php, when you create more than 3 skins, masonry fails to calculate the content and positions a skin box in the wrong position.

This always happens on page load when the function initUserThumbnailsMasonry() fires (theme.js).
From what i can see, when the function is called, content is not loaded, therefore creating a wrong dimension. Not 100% sure but if you follow the steps bellow maybe it will help determine the cause.

1. go to /skins/index.php.
2. create 4 new skin. Skin boxes will all align correctly.
3. Refresh the browser.
4. Notice the 4th skin box absolute positioning is incorrect and overlaps box 3.
5. Open up browser developer tools, navigate to view the raw js "theme.js".
6. Scroll to line 129 and add a break-point and refresh the browser.
7. Click through the break-point and the Skins will load correctly.
or
7. Click on a navigation link to open a new page eg "Shared with me" then go page to skins page via the link.
8. If you have the break-point set on the js, it will load correctly. If not, it will break.

I have tested this a bit and it doesn't always work :) Sometime if you refresh the page, it works. Other times it doesn't.

MattD (mattd-2) wrote :
tags: added: theming
tags: added: front-end
removed: theming

Reviewed: https://reviews.mahara.org/6614
Committed: https://git.mahara.org/mahara/mahara/commit/1a60bcbb8e5c5e6c6eafe9fa3ab4b5cfed95817f
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit 1a60bcbb8e5c5e6c6eafe9fa3ab4b5cfed95817f
Author: Pat Kira <email address hidden>
Date: Thu Jun 23 13:03:12 2016 +1200

Bug 1592213 - Fixed skin overlapping each other

Removed Masonry as all skin items are the same height, the layout of the
page can be acheived with css only

behatnotneeded

Change-Id: I4a469dc4698b5b06e53fa6310f2dc3f55ea23cab

Mahara Bot (dev-mahara) wrote :

Patch for "16.04_STABLE" branch: https://reviews.mahara.org/6624

Reviewed: https://reviews.mahara.org/6623
Committed: https://git.mahara.org/mahara/mahara/commit/266d26fcb578ca9252bdaf3516ca60b93b13b7d8
Submitter: Robert Lyon (<email address hidden>)
Branch: 15.10_STABLE

commit 266d26fcb578ca9252bdaf3516ca60b93b13b7d8
Author: Pat Kira <email address hidden>
Date: Thu Jun 23 13:03:12 2016 +1200

Bug 1592213 - Fixed skin overlapping each other

Removed Masonry as all skin items are the same height, the layout of the
page can be acheived with css only

behatnotneeded

Change-Id: I4a469dc4698b5b06e53fa6310f2dc3f55ea23cab
(cherry picked from commit 1a60bcbb8e5c5e6c6eafe9fa3ab4b5cfed95817f)

Mahara Bot (dev-mahara) wrote :

Reviewed: https://reviews.mahara.org/6624
Committed: https://git.mahara.org/mahara/mahara/commit/cfe97c910622c0a4e2d15e1ad3faaecd7f9f77bd
Submitter: Robert Lyon (<email address hidden>)
Branch: 16.04_STABLE

commit cfe97c910622c0a4e2d15e1ad3faaecd7f9f77bd
Author: Pat Kira <email address hidden>
Date: Thu Jun 23 13:03:12 2016 +1200

Bug 1592213 - Fixed skin overlapping each other

Removed Masonry as all skin items are the same height, the layout of the
page can be acheived with css only

behatnotneeded

Change-Id: I4a469dc4698b5b06e53fa6310f2dc3f55ea23cab

Robert Lyon (robertl-9) on 2016-10-21
Changed in mahara:
status: Fix Committed → Fix Released
Robert Lyon (robertl-9) on 2016-10-21
Changed in mahara:
milestone: 16.10.0 → none
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers