Commit cc8e7ea2 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

Remove unused avatar sizes

- Update avatars to use only sizes from the 8px grid
parent b9798c15
...@@ -69,7 +69,7 @@ export default { ...@@ -69,7 +69,7 @@ export default {
:link-href="authorUrl" :link-href="authorUrl"
:img-src="authorAvatar" :img-src="authorAvatar"
:img-alt="authorName" :img-alt="authorName"
:img-size="36" :img-size="40"
class="avatar-cell d-none d-sm-block" class="avatar-cell d-none d-sm-block"
/> />
<div class="commit-detail flex-list"> <div class="commit-detail flex-list">
......
...@@ -7,9 +7,6 @@ $avatar-sizes: ( ...@@ -7,9 +7,6 @@ $avatar-sizes: (
18: ( 18: (
border-radius: $border-radius-small border-radius: $border-radius-small
), ),
19: (
border-radius: $border-radius-small
),
20: ( 20: (
border-radius: $border-radius-small border-radius: $border-radius-small
), ),
...@@ -28,17 +25,11 @@ $avatar-sizes: ( ...@@ -28,17 +25,11 @@ $avatar-sizes: (
line-height: 32px, line-height: 32px,
border-radius: $border-radius-default border-radius: $border-radius-default
), ),
36: (
border-radius: $border-radius-default
),
40: ( 40: (
font-size: 16px, font-size: 16px,
line-height: 38px, line-height: 38px,
border-radius: $border-radius-default border-radius: $border-radius-default
), ),
46: (
border-radius: $border-radius-default
),
48: ( 48: (
font-size: 20px, font-size: 20px,
line-height: 48px, line-height: 48px,
...@@ -54,37 +45,16 @@ $avatar-sizes: ( ...@@ -54,37 +45,16 @@ $avatar-sizes: (
line-height: 64px, line-height: 64px,
border-radius: $border-radius-large border-radius: $border-radius-large
), ),
70: (
font-size: 34px,
line-height: 70px,
border-radius: $border-radius-large
),
90: ( 90: (
font-size: 36px, font-size: 36px,
line-height: 88px, line-height: 88px,
border-radius: $border-radius-large border-radius: $border-radius-large
), ),
96: (
font-size: 48px,
line-height: 96px,
border-radius: $border-radius-large
),
100: ( 100: (
font-size: 36px, font-size: 36px,
line-height: 98px, line-height: 98px,
border-radius: $border-radius-large border-radius: $border-radius-large
), ),
110: (
font-size: 40px,
line-height: 108px,
font-weight: $gl-font-weight-normal,
border-radius: $border-radius-large
),
140: (
font-size: 72px,
line-height: 138px,
border-radius: $border-radius-large
),
160: ( 160: (
font-size: 96px, font-size: 96px,
line-height: 158px, line-height: 158px,
...@@ -97,13 +67,13 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i ...@@ -97,13 +67,13 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i
.avatar-circle { .avatar-circle {
float: left; float: left;
margin-right: 15px; margin-right: $gl-padding;
border-radius: $avatar-radius; border-radius: $avatar-radius;
border: 1px solid $gray-normal; border: 1px solid $gray-normal;
@each $size, $size-config in $avatar-sizes { @each $size, $size-config in $avatar-sizes {
&.s#{$size} { &.s#{$size} {
@include avatar-size(#{$size}px, if($size < 36, 8px, 16px)); @include avatar-size(#{$size}px, if($size < 48, 8px, 16px));
} }
} }
} }
......
...@@ -154,8 +154,6 @@ ...@@ -154,8 +154,6 @@
} }
.avatar-cell { .avatar-cell {
width: 46px;
img { img {
margin-right: 0; margin-right: 0;
} }
......
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
%li.commit.flex-row.js-toggle-container{ id: "commit-#{commit.short_id}" } %li.commit.flex-row.js-toggle-container{ id: "commit-#{commit.short_id}" }
.avatar-cell.d-none.d-sm-block .avatar-cell.d-none.d-sm-block
= author_avatar(commit, size: 36, has_tooltip: false) = author_avatar(commit, size: 40, has_tooltip: false)
.commit-detail.flex-list .commit-detail.flex-list
.commit-content.qa-commit-content .commit-content.qa-commit-content
......
...@@ -8,7 +8,7 @@ import getDiffWithCommit from '../mock_data/diff_with_commit'; ...@@ -8,7 +8,7 @@ import getDiffWithCommit from '../mock_data/diff_with_commit';
const TEST_AUTHOR_NAME = 'test'; const TEST_AUTHOR_NAME = 'test';
const TEST_AUTHOR_EMAIL = 'test+test@gitlab.com'; const TEST_AUTHOR_EMAIL = 'test+test@gitlab.com';
const TEST_AUTHOR_GRAVATAR = `${TEST_HOST}/avatar/test?s=36`; const TEST_AUTHOR_GRAVATAR = `${TEST_HOST}/avatar/test?s=40`;
const TEST_SIGNATURE_HTML = '<a>Legit commit</a>'; const TEST_SIGNATURE_HTML = '<a>Legit commit</a>';
const TEST_PIPELINE_STATUS_PATH = `${TEST_HOST}/pipeline/status`; const TEST_PIPELINE_STATUS_PATH = `${TEST_HOST}/pipeline/status`;
...@@ -65,7 +65,7 @@ describe('diffs/components/commit_item', () => { ...@@ -65,7 +65,7 @@ describe('diffs/components/commit_item', () => {
const imgElement = avatarElement.querySelector('img'); const imgElement = avatarElement.querySelector('img');
expect(avatarElement).toHaveAttr('href', commit.author.web_url); expect(avatarElement).toHaveAttr('href', commit.author.web_url);
expect(imgElement).toHaveClass('s36'); expect(imgElement).toHaveClass('s40');
expect(imgElement).toHaveAttr('alt', commit.author.name); expect(imgElement).toHaveAttr('alt', commit.author.name);
expect(imgElement).toHaveAttr('src', commit.author.avatar_url); expect(imgElement).toHaveAttr('src', commit.author.avatar_url);
}); });
......
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