Commit 74bfb4a6 authored by Evonne Cheung's avatar Evonne Cheung Committed by Robert Lyon
Browse files

Bug #1822911 User icons not appearing circular in some themes 

Use object-fit:cover to force non-square images to size to the min
width/height of the image loaded so that it displays the center of
the image in the correct ratio, hence fixing the issue of oval shapes.

Added extra classes to tell theme what size the images are to display,
ie .user-icon-20, .user-icon-40, .user-icon-60, etc, and
.user-icon-inline for when username is displayed inline with user icon.

behatnotneeded

Change-Id: I28e0b37d0961c3be0195f4baef704262a0547af0
parent a081099b

htdocs/theme/modern/sass/components/_user-icon.scss

+18 −18
Original line number Diff line number Diff line 
a.user-icon {

  border: 0;

  padding: 0;

  background: none;

.user-icon {

  border-radius: 50%;



  img {

      border-radius: 50%;

      border: 0px solid #FFF;

  }

  &:hover {

    background-color: transparent;

}

  &.user-icon-larger img {



// turns thumbnail user-icons in grid back to rectangular

.user-thumbnails .user-icon {

    border-radius: 3px;

    img {

        border-radius: 3px;

    background-color: #fff;

    padding: 5px;

    display: table;

    border: 1px solid #ddd;

    overflow: hidden;

    position: relative;

    }

}

.card-header.profile-block a:not(.secondary-link).user-icon {

    border: 0;



// Profile images page

.profileiconcell img {

    border-radius: 50%;

}



// Select-2 user list user icons

.select2-user-icon {

    border-radius: 50%;

}

htdocs/theme/primaryschool/sass/components/_user-icon.scss

+12 −9
Original line number Diff line number Diff line
@@ -6,17 +6,20 @@ 
    }

}



.user-icon-alt {

    border-radius: 50%;

}





.friends .user-icon {

// turns thumbnail user-icons in grid back to rectangular

.user-thumbnails .user-icon {

    border-radius: 3px;

    img {

        border-radius: 3px;

    }

}



// Profile images page

.profileiconcell img {

    border-radius: 50%;

}



// display layout create custom layout thumbnail

.layoutthumb {

    border-radius: 3px;

// Select-2 user list user icons

.select2-user-icon {

    border-radius: 50%;

}

htdocs/theme/raw/plugintype/artefact/comment/templates/commentlist.tpl

+1 −1
Original line number Diff line number Diff line
@@ -3,7 +3,7 @@ 
{foreach from=$data item=item}

    <div id="comment{$item->id}" class="comment-item list-group-item {if $item->pubmessage}list-group-item-warning{elseif $item->deletedmessage}deleted {/if} {cycle name=rows values='r0,r1'} {if $item->indent} indent-{$item->indent}{/if} {if !$item->deletedmessage && $item->attachments}has-attachment{/if}">

        <div class="usericon-heading">

            <span class="user-icon float-left" role="presentation" aria-hidden="true">

            <span class="user-icon user-icon-40 float-left" role="presentation" aria-hidden="true">

                {if $item->author && !$item->author->deleted}

                    <img src="{profile_icon_url user=$item->author maxheight=40 maxwidth=40}" valign="middle" alt="{str tag=profileimagetext arg1=$item->author|display_default_name}"/>

                {else}

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

+2 −2
Original line number Diff line number Diff line 
<div class="friends">

<div class="friends card-body">

    <div class="listing blocktype">

        <div class="listrow card-body">

        <div class="listrow">

        {if $groupmembers}

            {$groupmembers.tablerows|safe}

        {/if}

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

+1 −1
Original line number Diff line number Diff line 
<div class="friends">

    <div class="js-masonry user-thumbnails">

        {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-100">

                <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}">

                 <p class="member-name">{$groupmember|display_default_name}</p>

            </a>