Bug 1548522 - Fixed friend thumbnails overlap on load

behatnotneeded

Change-Id: I11f32c1186bf45d95b3b5ac33d4d0e3d87ba0fa6

htdocs/theme/raw/js/theme.js

@@ -119,12 +119,18 @@ jQuery(function($) {
     /*
      * Initialise masonry for thumbnail gallery
      */
-     function initThumbnailMasonry() {
+    function initThumbnailMasonry() {
          $('.js-masonry.thumbnails').masonry({
              itemSelector: '.thumb'
          });
      }
 
+    function initUserThumbnailMasonry() {
+        $('.js-masonry.user-thumbnails').masonry({
+             itemSelector: '.user-icon'
+        });
+    }
+
     function handleInputDropdown(context) {
         var val = context.find('select').find('option:selected').text();
         if (val.length > 40) {
@@ -196,11 +202,13 @@ jQuery(function($) {
     $(window).on('resize colresize', function(){
         carouselHeight();
         initThumbnailMasonry();
+        initUserThumbnailMasonry();
         responsiveObjectVideo()
     });
 
     $(window).on('load', function() {
         carouselHeight();
+        initUserThumbnailMasonry();
     });
 
     $('.block.collapse').on('shown.bs.collapse', function() {

htdocs/theme/raw/plugintype/blocktype/groupmembers/templates/row.tpl

 <div class="friends">
-    <div class="js-masonry" data-masonry-options='{ "itemSelector": ".item", "gutter" : 10 }'>
+    <div class="js-masonry user-thumbnails">
         {foreach from=$groupmembers item=groupmember}
             <a href="{profile_url($groupmember)}" class="item user-icon metadata user-icon-larger">
                 <img src="{profile_icon_url user=$groupmember maxwidth=100 maxheight=100}" alt="{str tag=profileimagetext arg1=$groupmember|display_default_name}" title="{$groupmember|display_default_name|escape}">

htdocs/theme/raw/plugintype/blocktype/myfriends/templates/myfriendrows.tpl

+<div class="js-masonry user-thumbnails">
 {foreach from=$friends item=row}
-<div class="js-masonry" data-masonry-options='{ "itemSelector": ".item", "gutter" : 10 }'>
     {foreach from=$row item=friend}
         <a href="{profile_url($friend)}" class="item user-icon metadata user-icon-larger {cycle values='d0,d1'}">
-            <img src="{profile_icon_url user=$friend maxwidth=100 maxheight=100}" alt="{str tag=profileimagetext arg1=$friend|display_default_name}">
+            <img src="{profile_icon_url user=$friend maxwidth=100 maxheight=100}" alt="{str tag=profileimagetext arg1=$friend|display_default_name}" with="100" height="100">
             <p class="member-name">{$friend|display_default_name|escape}</p>
         </a>
     {/foreach}
-</div>
 {/foreach}
+</div>
 

htdocs/theme/raw/sass/_custom.scss

@@ -248,6 +248,12 @@
     }
 }
 
+.user-thumbnails {
+    .user-icon {
+        margin: 5px;
+    }
+}
+
 //Google apps
 .google-app {
     font-style: normal;