Commit 11d1b081 authored by Pat Kira's avatar Pat Kira Committed by Robert Lyon
Browse files

Bug 1548522 - Fixed friend thumbnails overlap on load

behatnotneeded

Change-Id: I11f32c1186bf45d95b3b5ac33d4d0e3d87ba0fa6
(cherry picked from commit f5f1b03b)
parent 7378f7e0
...@@ -119,12 +119,18 @@ jQuery(function($) { ...@@ -119,12 +119,18 @@ jQuery(function($) {
/* /*
* Initialise masonry for thumbnail gallery * Initialise masonry for thumbnail gallery
*/ */
function initThumbnailMasonry() { function initThumbnailMasonry() {
$('.js-masonry.thumbnails').masonry({ $('.js-masonry.thumbnails').masonry({
itemSelector: '.thumb' itemSelector: '.thumb'
}); });
} }
function initUserThumbnailMasonry() {
$('.js-masonry.user-thumbnails').masonry({
itemSelector: '.user-icon'
});
}
function handleInputDropdown(context) { function handleInputDropdown(context) {
var val = context.find('select').find('option:selected').text(); var val = context.find('select').find('option:selected').text();
if (val.length > 40) { if (val.length > 40) {
...@@ -175,10 +181,12 @@ jQuery(function($) { ...@@ -175,10 +181,12 @@ jQuery(function($) {
$(window).on('resize colresize', function(){ $(window).on('resize colresize', function(){
carouselHeight(); carouselHeight();
initThumbnailMasonry(); initThumbnailMasonry();
initUserThumbnailMasonry();
}); });
$(window).on('load', function() { $(window).on('load', function() {
carouselHeight(); carouselHeight();
initUserThumbnailMasonry();
}); });
$('.block.collapse').on('shown.bs.collapse', function() { $('.block.collapse').on('shown.bs.collapse', function() {
......
<div class="friends"> <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} {foreach from=$groupmembers item=groupmember}
<a href="{profile_url($groupmember)}" class="item user-icon metadata user-icon-larger"> <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}"> <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}">
......
<div class="js-masonry user-thumbnails">
{foreach from=$friends item=row} {foreach from=$friends item=row}
<div class="js-masonry" data-masonry-options='{ "itemSelector": ".item", "gutter" : 10 }'>
{foreach from=$row item=friend} {foreach from=$row item=friend}
<a href="{profile_url($friend)}" class="item user-icon metadata user-icon-larger {cycle values='d0,d1'}"> <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> <p class="member-name">{$friend|display_default_name|escape}</p>
</a> </a>
{/foreach} {/foreach}
</div>
{/foreach} {/foreach}
</div>
...@@ -248,6 +248,12 @@ ...@@ -248,6 +248,12 @@
} }
} }
.user-thumbnails {
.user-icon {
margin: 5px;
}
}
//Google apps //Google apps
.google-app { .google-app {
font-style: normal; font-style: normal;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment