Avatars overlap in friends block

[Aaron Wells]

Reported by Patric Lougheed on the forum: https://mahara.org/interaction/forum/topic.php?id=7524&offset=0&limit=10#post30271

In 15.10.1 all avatars that are portrait shaped are overlapping with the names of the avatar above and below them. I checked in all the themes and this occurs. This does not happen when you are in edit mode though.

It would be great to have the option that the avatar is forced to be square like in Moodle.

Cheers,

Patric

UPDATE: It seems each div goes from "position: absolute" in edit mode to "position: relative" in view mode. This problem is also happening in the image gallery block. All the thumbnails are overlapping on each other.

[Liam (liam-sharpe)]

I wasn't able to replicate the bug. See attachment for what I could see. Can you please regenerate the CSS and have another look? Does your instance have any customizations?

[Patric Lougheed (patriclougheed-com)]

Nothing custom and displays correctly in Firefox but the overlap occurs in Chrome.

[Patric Lougheed (patriclougheed-com)]

I think I am narrowing this down and it is strange. While testing I noticed that sometimes the block displays correctly in Chrome and then not. I have found that if I go back to the profile page from another page it looks correct but if I refresh the page it overlaps. I see a new error in the console:

"Failed to get text for stylesheet 11748.147: No style sheet with given id found"

This only appears when the avatars overlap. Not sure where this is coming from.

[Patric Lougheed (patriclougheed-com)]

I am still having this issue even after an upgrade to 16.04 with fresh files. I have narrowed it down to what I think it could be. There seems to be a an issue with the Masonary JS and initial image loading:

http://stackoverflow.com/questions/14089419/on-refreshing-page-masonry-work-ok-but-first-time-overlaps

[Patric Lougheed (patriclougheed-com)]

By the way, I upgraded the Masonary JS to v4 and the problem persists.

[Kristina Hoeppner (kris-hoeppner)]

Patric, which operating system do you use?

[Kristina Hoeppner (kris-hoeppner)]

I added some friends to my block and even without a picture, the avatars are overlapping and don't show the name of the person unless the are in the last row or no further avatar is below them. This was on Ubuntu 14.04 and Firefox 46.

[Kristina Hoeppner (kris-hoeppner)]

That screenshot above was when I viewed my own profile page. When I viewed my profile page as a different user once, I saw the block correctly, but couldn't replicate this a second time and it was back to showing only the last row of friends with their names.

There is also an overlap in the pagination, which is dealt with in bug #1581183.

[Patric Lougheed (patriclougheed-com)]

I have confirmed this problem on Windows 7 and 10 in the latest versions of Firefox and Chrome. Just tried it in IE11 and the layout of the avatars was much worst. Not just overlapping but rows were broken. Doing a page refresh got rid of some of the broken rows but overlapping was still an issue.

[Mahara Bot (dev-mahara)]

Patch for "master" branch: https://reviews.mahara.org/6472

[Kristina Hoeppner (kris-hoeppner)]

Patric, can you please give the patch https://reviews.mahara.org/#/c/6472/ a go and see if it resolves the problem for you with the overlapping avatars?

[Patric Lougheed (patriclougheed-com)]

Hi Kristina,

Already did and looking good so far. Avatars now position themselves where space allows. Tested in Chrome and Firefox. Extreme layout issues in IE have gone as well.

[Kristina Hoeppner (kris-hoeppner)]

Great to hear, Patric. :-)

[Mahara Bot (dev-mahara)]

Reviewed: https://reviews.mahara.org/6472
Committed: https://git.mahara.org/mahara/mahara/commit/f5f1b03b89965a7bbdfc49a9966d3c77b09712b3
Submitter: Son Nguyen (<email address hidden>)
Branch: master

commit f5f1b03b89965a7bbdfc49a9966d3c77b09712b3
Author: Pat Kira <email address hidden>
Date: Fri May 13 10:27:10 2016 +1200

Bug 1548522 - Fixed friend thumbnails overlap on load

behatnotneeded

Change-Id: I11f32c1186bf45d95b3b5ac33d4d0e3d87ba0fa6

[Mahara Bot (dev-mahara)]

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

[Mahara Bot (dev-mahara)]

Patch for "15.10_STABLE" branch: https://reviews.mahara.org/6484

[Mahara Bot (dev-mahara)]

Reviewed: https://reviews.mahara.org/6483
Committed: https://git.mahara.org/mahara/mahara/commit/0d8e97101eebe4a17c224ada11cb02349030eab8
Submitter: Son Nguyen (<email address hidden>)
Branch: 16.04_STABLE

commit 0d8e97101eebe4a17c224ada11cb02349030eab8
Author: Pat Kira <email address hidden>
Date: Fri May 13 10:27:10 2016 +1200

Bug 1548522 - Fixed friend thumbnails overlap on load

behatnotneeded

Change-Id: I11f32c1186bf45d95b3b5ac33d4d0e3d87ba0fa6
(cherry picked from commit f5f1b03b89965a7bbdfc49a9966d3c77b09712b3)

[Mahara Bot (dev-mahara)]

Reviewed: https://reviews.mahara.org/6484
Committed: https://git.mahara.org/mahara/mahara/commit/11d1b081cf16ca01e2c09a8dbd7534d8aafa648a
Submitter: Son Nguyen (<email address hidden>)
Branch: 15.10_STABLE

commit 11d1b081cf16ca01e2c09a8dbd7534d8aafa648a
Author: Pat Kira <email address hidden>
Date: Fri May 13 10:27:10 2016 +1200

Bug 1548522 - Fixed friend thumbnails overlap on load

behatnotneeded

Change-Id: I11f32c1186bf45d95b3b5ac33d4d0e3d87ba0fa6
(cherry picked from commit f5f1b03b89965a7bbdfc49a9966d3c77b09712b3)