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

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
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;
background-color: #fff;
padding: 5px;
display: table;
border: 1px solid #ddd;
overflow: hidden;
position: relative;
}
img {
border-radius: 3px;
}
}
.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%;
}
......@@ -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%;
}
......@@ -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}
......
<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}
......
<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>
......
<div class="js-masonry user-thumbnails">
{foreach from=$friends item=row}
{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-100 {cycle values='d0,d1'}">
<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}
{/foreach}
</div>
......@@ -4,8 +4,8 @@
{foreach from=$foruminfo item=postinfo name=item}
<li class="list-group-item flush">
<div class="usericon-heading">
<a href="{profile_url($postinfo->author)}" class="user-icon small-icon">
<img src="{profile_icon_url user=$postinfo->author maxheight=60 maxwidth=60}" alt="{str tag=profileimagetext arg1=$postinfo->author|display_default_name}" />
<a href="{profile_url($postinfo->author)}" class="user-icon user-icon-20 small-icon">
<img src="{profile_icon_url user=$postinfo->author maxheight=20 maxwidth=20}" alt="{str tag=profileimagetext arg1=$postinfo->author|display_default_name}" />
</a>
<h4 class="title list-group-item-heading">
......
......@@ -7,8 +7,8 @@
<div class="card {if $wallpost->private} bg-warning{/if} wallpost">
<h4 class="card-header has-link">
<a href="{$wallpost->profileurl}" class="userinfo has-user-icon">
<span class="user-icon left">
<img src="{profile_icon_url user=$wallpost maxheight=60 maxwidth=60}" alt="{str tag=profileimagetext arg1=$wallpost|display_default_name}" />
<span class="user-icon user-icon-40 left">
<img src="{profile_icon_url user=$wallpost maxheight=40 maxwidth=40}" alt="{str tag=profileimagetext arg1=$wallpost|display_default_name}" />
</span>
{$wallpost->displayname}<span class="postedon text-small text-midtone"> - {$wallpost->postdate|format_date}</span>
</a>
......
......@@ -60,7 +60,7 @@
</strong>
{foreach from=$forum->moderators item=mod}
<a href="{profile_url($mod)}">
<a href="{profile_url($mod)}" class="user-icon user-icon-20 user-icon-inline">
<img src="{profile_icon_url user=$mod maxwidth=20 maxheight=20}" alt="{str tag=profileimagetext arg1=$mod|display_default_name}">
</a>
......@@ -110,7 +110,7 @@
</p>
{foreach from=$groupadmins item=groupadmin}
<a href="{profile_url($groupadmin)}" class="badge badge-default">
<img src="{profile_icon_url user=$groupadmin maxheight=20 maxwidth=20}" alt="{str tag=profileimagetext arg1=$groupadmin|display_default_name}" class="user-icon-alt"> {$groupadmin|display_name}
<span class="user-icon user-icon-20 user-icon-inline"><img src="{profile_icon_url user=$groupadmin maxheight=20 maxwidth=20}" alt="{str tag=profileimagetext arg1=$groupadmin|display_default_name}"></span> {$groupadmin|display_name}
</a>
{/foreach}
</div>
......
......@@ -6,13 +6,13 @@
<div class="media forum-post {if !$post->approved} alert-warning {/if}">
<div class="forumpostleft media-left text-small">
{if $deleteduser}
<img src="{profile_icon_url user=null maxwidth=40 maxheight=40}" valign="middle" alt="{str tag=profileimagetextanonymous}" class="media-object">
<span class="user-icon user-icon-40"><img src="{profile_icon_url user=null maxwidth=40 maxheight=40}" valign="middle" alt="{str tag=profileimagetextanonymous}" class="media-object"></span>
<div class="poster">
<span>{$poster|full_name}</span>
</div>
{else}
<img src="{profile_icon_url user=$post->poster maxwidth=40 maxheight=40}" alt="{str tag=profileimagetext arg1=$post->poster|display_default_name}" class="media-object">
<span class="user-icon user-icon-40"><img src="{profile_icon_url user=$post->poster maxwidth=40 maxheight=40}" alt="{str tag=profileimagetext arg1=$post->poster|display_default_name}" class="media-object"></span>
<div class="poster">
<a href="{profile_url($post->poster)}"{if in_array($post->poster, $groupadmins)} class="groupadmin"{elseif $post->moderator} class="moderator"{/if}>{$post->poster|display_name}
......
......@@ -150,7 +150,7 @@
</p>
{foreach from=$groupadmins item=groupadmin}
<a href="{profile_url($groupadmin)}" class="badge badge-default">
<img src="{profile_icon_url user=$groupadmin maxwidth=20 maxheight=20}" alt="{str tag=profileimagetext arg1=$groupadmin|display_default_name}" class="user-icon-alt">
<span class="user-icon user-icon-20 user-icon-inline"><img src="{profile_icon_url user=$groupadmin maxwidth=20 maxheight=20}" alt="{str tag=profileimagetext arg1=$groupadmin|display_default_name}"></span>
{$groupadmin|display_name}
</a>
{/foreach}
......@@ -160,10 +160,9 @@
<p class="text-small text-inline">
{str tag="moderatorslist" section="interaction.forum"}
</p>
{foreach from=$moderators item=mod}
<a href="{profile_url($mod)}" class="badge badge-default">
<img src="{profile_icon_url user=$mod maxwidth=20 maxheight=20}" alt="{str tag=profileimagetext arg1=$mod|display_default_name}" class="user-icon-alt">
<span class="user-icon user-icon-20 user-icon-inline"><img src="{profile_icon_url user=$mod maxwidth=20 maxheight=20}" alt="{str tag=profileimagetext arg1=$mod|display_default_name}"></span>
{$mod|display_name}
</a>
{/foreach}
......
......@@ -316,12 +316,6 @@
}
}
.user-thumbnails {
.user-icon {
margin: 5px;
}
}
//Google apps
.google-app {
font-style: normal;
......@@ -818,3 +812,13 @@ div.form-group .form-control-label {
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
// table cells that need to be fixed 70px width
.width-70 {
width: 70px;
}
// Forum select wrap too close to text
.forumselectwrap {
margin-left: 10px;
}
......@@ -150,12 +150,19 @@
position: relative;
padding-left: 50px;
min-height: 50px;
line-height: 28px;
.user-icon {
position: absolute;
left: 20px;
top: 15px;
}
.user-name {
display: inline-block;
vertical-align: middle;
line-height: 1.5;
}
}
}
......@@ -216,20 +223,10 @@
padding-bottom: 8px;
.user-icon {
display: block;
margin: 0 10px 0 0;
&.small-icon {
padding: 0;
width: 20px;
height: 20px;
img {
width: 22px;
height: 22px;
}
}
margin: 0 5px 0 0;
}
.list-group-item-heading {
margin: 0;
width: 50%;
&.middle {
margin: 10px 0;
}
......
......@@ -4,18 +4,15 @@
.user-icon {
padding: 0;
position: absolute;
margin: 4px 0 5px 9px;
margin: 6px 0 5px 7px;
z-index: 3;
left: 90px;
display: block;
width: 29px;
height: 29px;
width: 26px;
height: 26px;
@include media-breakpoint-up(md) {
left: 45px;
}
img {
left: 1px;
}
&:hover,
&:focus {
color: $navbar-toggle-hover-color;
......
.user-icon {
border-radius: 3px;
background-color: $card-bg;
padding: 5px;
padding: 3px;
display: table;
border: 1px solid $thumbnail-border-color;
overflow: hidden;
position: relative;
&.left {
position:absolute;
left: 5px;
top: 5px;
display: block;
z-index: 5;
width: 45px;
height: 45px;
&.small-icon {
width: 35px;
height: 35px;
}
}
&.position-bottom {
position:absolute;
bottom:17%;
}
&.user-icon-larger{
width: 85px;
height: 85px;
}
.list-group-item &, &.small-icon {
padding: 3px;
}
......@@ -43,10 +31,12 @@
max-width: 20%;
}
img {
border-radius: 3px;
margin: 0;
opacity: 0.9;
position: relative;
width: 20px;
height: 20px;
object-fit: cover;
}
p {
margin-top: 3px;
......@@ -63,13 +53,6 @@
}
}
.user-icon-alt {
border-radius: 3px;
.label &{
margin: 1px 4px 0 -3px;
}
}
.label .user-icon {
display: inline-block;
}
......@@ -119,3 +102,82 @@ a.user-icon, a .user-icon {
}
}
}
// User icon sizes
.user-icon-20 {
line-height: 1;
img {
width: 20px;
height: 20px;
}
}
.user-icon-25 {
img {
width: 25px;
height: 25px;
}
}
.user-icon-40 {
img {
width: 40px;
height: 40px;
}
}
.user-icon-50 {
line-height: 1;
img {
width: 50px;
height: 50px;
}
}
.user-icon-60 {
img {
width: 60px;
height: 60px;
}
}
.user-icon-100 {
img {
width: 100px;
height: 100px;
}
}
.user-icon-inline {
display: inline-block;
vertical-align: middle;
margin-right: 3px;
}
// Profile pictures page user icons cell
.profileiconcell {
img {
width: 100px;
height: 100px;
object-fit: cover;
}
}
// Thumbnail grid user icons spacing
.user-thumbnails {
.user-icon {
margin: 0 10px 10px 0;
}
}
// Profile info block user icon
.bt-profileinfo,
.bt-profileinfo-editor {
.user-icon {
img {
width: 80px;
height: 80px;
}
}
}
// Select-2 user list user icons
.select2-user-icon {
width: 40px;
height: 40px;
object-fit: cover;
}
......@@ -86,7 +86,7 @@
margin-left: auto;
margin-right: 0;
.user-icon {
max-width: 35px;
max-width: 50px;
display: block;
}
h5 {
......
......@@ -7,9 +7,7 @@
padding-left: 15px;
.forumpostleft {
min-width: 120px;
.media-object {
margin-top: 5px;
}
padding-right: 20px;
}
.title {
margin: 0;
......
......@@ -286,3 +286,12 @@ textarea.resizable {
}
}
}
.progress {
background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 10px, #eeeeee 10px, #eeeeee 20px);
.progress-bar.small-progress {
span {
color: #666666;
}
}
}
......@@ -161,9 +161,12 @@ body.presentation-iframe {
}
}
// Online users
.peoplelistinfo {
clear: both;
.leftdiv {
float: left;
margin-bottom: 5px;
}
.rightdiv {
margin-left: 60px;
......
......@@ -7,19 +7,13 @@
}
.user-icon {
z-index: 5;
width: 60px;
height: 60px;
position: absolute;
right: 10px;
top: 10px;
padding: 5px; // override more specific padding
border: 1px solid $thumbnail-border-color;
img {
display: table-cell;
vertical-align: middle;
padding: 5px;
&:hover,
&:focus {
background-color: $card-bg;
}
}
a {
......@@ -48,3 +42,8 @@
.loginas {
padding-right: 60px;
}
// account settings user block has overlap of text
body.admin .user-card .profile-block.card-header {
min-height: 90px;
}
......@@ -77,4 +77,11 @@
margin: 0;
}
}
// wallpost blocks don't need secdonary card border color
.wallpost {
.card-header {
border-color: $card-border-color;
}
}
}
......@@ -39,8 +39,8 @@
<a href="{profile_url($user)}" class="username">
{$user|display_name}
</a>
<a href="{profile_url($user)}" class="user-icon">
<img src="{profile_icon_url user=$user maxheight=100 maxwidth=100}" alt="{str tag=profileimagetext arg1=$user|display_default_name}">
<a href="{profile_url($user)}" class="user-icon user-icon-60">
<img src="{profile_icon_url user=$user maxheight=60 maxwidth=60}" alt="{str tag=profileimagetext arg1=$user|display_default_name}">
</a>
</h3>
<div class="card-body">
......
{include file="header.tpl"}
<div class="card">
<table id="notificationstable" class="fullwidth table">
<thead>
<thead>
<tr>
<th></th>
<th></th>
<th>{str tag='institution'}</th>
{foreach from=$types item='type'}
{foreach from=$types item='type'}
<th>{$type}</th>
{/foreach}
</tr>
</thead>
<tbody>
{foreach from=$users item='user' key='userid'}
<tr class="{cycle values="r0,r1"}">
<td class='center'><img src="{profile_icon_url user=$user.user maxheight=40 maxwidth=40}" alt="{str tag=profileimagetext arg1=$user.user|display_default_name}"/></td>
<td>{$user.user|display_name}</td>
<td>
{foreach from=$user.user->institutions item=i}
<div>{$i}</div>
{/foreach}
</td>
{foreach from=$types key='type' item='name'}
<td class="center">{if $user.methods.$type}{$user.methods.$type}{else}{str tag='none'}{/if}</td>
{/foreach}
</tr>
{/foreach}
</tbody>
{/foreach}
</tr>
</thead>
<tbody>
{foreach from=$users item='user' key='userid'}
<tr class="{cycle values="r0,r1"}">
<td class='center width-70'><span class="user-icon user-icon-40"><img src="{profile_icon_url user=$user.user maxheight=40 maxwidth=40}" alt="{str tag=profileimagetext arg1=$user.user|display_default_name}"/></span></td>
<td>{$user.user|display_name}</td>
<td>
{foreach from=$user.user->institutions item=i}
<div>{$i}</div>
{/foreach}
</td>
{foreach from=$types key='type' item='name'}
<td class="center">{if $user.methods.$type}{$user.methods.$type}{else}{str tag='none'}{/if}</td>
{/foreach}
</tr>
{/foreach}
</tbody>
</table>
</div>
{include file="footer.tpl"}