Merge branch '23545-distorted-images' into 'master'

23545 Fix distorted project and group avatars

## What does this MR do?
Wraps project and group avatars in image container to prevent distortion

## Are there points in the code the reviewer needs to double check?
- Group/project lists
- Group/project pages
- Group/project admin pages
- Group/project edit pages

## Screenshots (if relevant)

### Before
![Screen_Shot_2016-10-31_at_12.35.42_PM](/uploads/abaeef7ded89abbba7e08be686c9a609/Screen_Shot_2016-10-31_at_12.35.42_PM.png)

### After
![Screen_Shot_2016-10-31_at_12.35.28_PM](/uploads/cafe1b096cf66afde7f346e5610bf3f3/Screen_Shot_2016-10-31_at_12.35.28_PM.png)

## Does this MR meet the acceptance criteria?

- [ ] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG.md) entry added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [ ] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [ ] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [ ] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
Closes #23545

See merge request !7206

10 files changed, 23 insertions, 13 deletions

diff --git a/app/views/admin/groups/_group.html.haml b/app/views/admin/groups/_group.html.haml
index adfa1eaafc9..05c88ca1cc8 100644
--- a/app/views/admin/groups/_group.html.haml
+++ b/app/views/admin/groups/_group.html.haml
@@ -16,7 +16,8 @@
     %span.visibility-icon.has-tooltip{data: { container: 'body', placement: 'left' }, title: visibility_icon_description(group)}
       = visibility_level_icon(group.visibility_level, fw: false)
 
-  = image_tag group_icon(group), class: "avatar s40 hidden-xs"
+  .image-container.s40
+    = image_tag group_icon(group), class: "avatar s40 hidden-xs"
   .title
     = link_to [:admin, group], class: 'group-name' do
       = group.name
diff --git a/app/views/admin/groups/show.html.haml b/app/views/admin/groups/show.html.haml
index 0188ed448ce..a7c1a4f5038 100644
--- a/app/views/admin/groups/show.html.haml
+++ b/app/views/admin/groups/show.html.haml
@@ -13,7 +13,8 @@
         Group info:
       %ul.well-list
         %li
-          = image_tag group_icon(@group), class: "avatar s60"
+          .image-container.s60
+            = image_tag group_icon(@group), class: "avatar s60"
         %li
           %span.light Name:
           %strong= @group.name
diff --git a/app/views/admin/projects/index.html.haml b/app/views/admin/projects/index.html.haml
index 339cfc613fe..10dce6f3d8f 100644
--- a/app/views/admin/projects/index.html.haml
+++ b/app/views/admin/projects/index.html.haml
@@ -76,7 +76,8 @@
             .title
               = link_to [:admin, project.namespace.becomes(Namespace), project] do
                 .dash-project-avatar
-                  = project_icon(project, alt: '', class: 'avatar project-avatar s40')
+                  .image-container.s40
+                    = project_icon(project, alt: '', class: 'avatar project-avatar s40')
                 %span.project-full-name
                   %span.namespace-name
                     - if project.namespace
diff --git a/app/views/groups/edit.html.haml b/app/views/groups/edit.html.haml
index c766370d5a0..f84ac37fa8f 100644
--- a/app/views/groups/edit.html.haml
+++ b/app/views/groups/edit.html.haml
@@ -8,7 +8,8 @@
 
       .form-group
         .col-sm-offset-2.col-sm-10
-          = image_tag group_icon(@group), alt: '', class: 'avatar group-avatar s160'
+          .image-container.s160
+            = image_tag group_icon(@group), alt: '', class: 'avatar group-avatar s160'
           %p.light
             - if @group.avatar?
               You can change your group avatar here
diff --git a/app/views/groups/show.html.haml b/app/views/groups/show.html.haml
index fab61f447c2..275581b3af8 100644
--- a/app/views/groups/show.html.haml
+++ b/app/views/groups/show.html.haml
@@ -6,7 +6,8 @@
 
 .cover-block.groups-cover-block
   %div{ class: container_class }
-    = image_tag group_icon(@group), class: "avatar group-avatar s70 avatar-tile"
+    .image-container.s70.group-avatar
+      = image_tag group_icon(@group), class: "avatar s70 avatar-tile"
     .group-info
       .cover-title
         %h1
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index d3987fc9c4f..e67b66d1fff 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -1,7 +1,8 @@
 - empty_repo = @project.empty_repo?
 .project-home-panel.text-center{ class: ("empty-project" if empty_repo) }
   %div{ class: container_class }
-    = project_icon(@project, alt: @project.name, class: 'project-avatar avatar s70 avatar-tile')
+    .image-container.s70.project-avatar
+      = project_icon(@project, alt: @project.name, class: 'avatar s70 avatar-tile')
     %h1.project-title
       = @project.name
       %span.visibility-icon.has-tooltip{data: { container: 'body' }, title: visibility_icon_description(@project)}
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index 30473d14b9b..ff6a899b92a 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -118,7 +118,8 @@
             Project avatar
           .form-group
             - if @project.avatar?
-              = project_icon("#{@project.namespace.to_param}/#{@project.to_param}", alt: '', class: 'avatar project-avatar s160')
+              .image-container.s160
+                = project_icon("#{@project.namespace.to_param}/#{@project.to_param}", alt: '', class: 'avatar project-avatar s160')
             %p.light
               - if @project.avatar_in_git
                 Project avatar in repository: #{ @project.avatar_in_git }
diff --git a/app/views/shared/groups/_group.html.haml b/app/views/shared/groups/_group.html.haml
index dc4ee3074d2..562291a61df 100644
--- a/app/views/shared/groups/_group.html.haml
+++ b/app/views/shared/groups/_group.html.haml
@@ -24,7 +24,8 @@
     %span.visibility-icon.has-tooltip{data: { container: 'body', placement: 'left' }, title: visibility_icon_description(group)}
       = visibility_level_icon(group.visibility_level, fw: false)
 
-  = image_tag group_icon(group), class: "avatar s40 hidden-xs"
+  .image-container.s40
+    = image_tag group_icon(group), class: "avatar s40 hidden-xs"
   .title
     = link_to group, class: 'group-name' do
       = group.name
diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml
index e8668048703..3d2122a159c 100644
--- a/app/views/shared/projects/_project.html.haml
+++ b/app/views/shared/projects/_project.html.haml
@@ -32,10 +32,11 @@
       = link_to project_path(project), class: dom_class(project) do
         - if avatar
           .dash-project-avatar
-            - if use_creator_avatar
-              = image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:''
-            - else
-              = project_icon(project, alt: '', class: 'avatar project-avatar s40')
+            .image-container.s40
+              - if use_creator_avatar
+                = image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:''
+              - else
+                = project_icon(project, alt: '', class: 'avatar project-avatar s40')
         %span.project-full-name
           %span.namespace-name
             - if project.namespace && !skip_namespace
diff --git a/app/views/users/_groups.html.haml b/app/views/users/_groups.html.haml
index f360fbb3d5d..78f253f9023 100644
--- a/app/views/users/_groups.html.haml
+++ b/app/views/users/_groups.html.haml
@@ -1,4 +1,5 @@
 .clearfix
   - groups.each do |group|
     = link_to group, class: 'profile-groups-avatars inline', title: group.name do
-      = image_tag group_icon(group), class: 'avatar group-avatar s40'
+      .image-container.s40
+        = image_tag group_icon(group), class: 'avatar group-avatar s40'