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
This commit is contained in:
commit
e2e3f196ac
15 changed files with 77 additions and 43 deletions
|
@ -1,11 +1,36 @@
|
|||
.avatar {
|
||||
@mixin avatar-size($size, $margin-right) {
|
||||
width: $size;
|
||||
height: $size;
|
||||
margin-right: $margin-right;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
float: left;
|
||||
margin-right: 12px;
|
||||
margin-right: 15px;
|
||||
border-radius: $avatar_radius;
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
&.s16 { @include avatar-size(16px, 6px); }
|
||||
&.s20 { @include avatar-size(20px, 7px); }
|
||||
&.s24 { @include avatar-size(24px, 8px); }
|
||||
&.s26 { @include avatar-size(26px, 8px); }
|
||||
&.s32 { @include avatar-size(32px, 10px); }
|
||||
&.s36 { @include avatar-size(36px, 10px); }
|
||||
&.s40 { @include avatar-size(40px, 10px); }
|
||||
&.s46 { @include avatar-size(46px, 15px); }
|
||||
&.s48 { @include avatar-size(48px, 10px); }
|
||||
&.s60 { @include avatar-size(60px, 12px); }
|
||||
&.s70 { @include avatar-size(70px, 14px); }
|
||||
&.s90 { @include avatar-size(90px, 15px); }
|
||||
&.s110 { @include avatar-size(110px, 15px); }
|
||||
&.s140 { @include avatar-size(140px, 15px); }
|
||||
&.s160 { @include avatar-size(160px, 20px); }
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@extend .avatar-container;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
border-radius: $avatar_radius;
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
|
||||
&.avatar-inline {
|
||||
float: none;
|
||||
|
@ -20,22 +45,6 @@
|
|||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.s16 { width: 16px; height: 16px; margin-right: 6px; }
|
||||
&.s20 { width: 20px; height: 20px; margin-right: 7px; }
|
||||
&.s24 { width: 24px; height: 24px; margin-right: 8px; }
|
||||
&.s26 { width: 26px; height: 26px; margin-right: 8px; }
|
||||
&.s32 { width: 32px; height: 32px; margin-right: 10px; }
|
||||
&.s36 { width: 36px; height: 36px; margin-right: 10px; }
|
||||
&.s40 { width: 40px; height: 40px; margin-right: 10px; }
|
||||
&.s46 { width: 46px; height: 46px; margin-right: 15px; }
|
||||
&.s48 { width: 48px; height: 48px; margin-right: 10px; }
|
||||
&.s60 { width: 60px; height: 60px; margin-right: 12px; }
|
||||
&.s70 { width: 70px; height: 70px; margin-right: 14px; }
|
||||
&.s90 { width: 90px; height: 90px; margin-right: 15px; }
|
||||
&.s110 { width: 110px; height: 110px; margin-right: 15px; }
|
||||
&.s140 { width: 140px; height: 140px; margin-right: 20px; }
|
||||
&.s160 { width: 160px; height: 160px; margin-right: 20px; }
|
||||
}
|
||||
|
||||
.identicon {
|
||||
|
@ -54,3 +63,17 @@
|
|||
&.s140 { font-size: 72px; line-height: 138px; }
|
||||
&.s160 { font-size: 96px; line-height: 158px; }
|
||||
}
|
||||
|
||||
.image-container {
|
||||
@extend .avatar-container;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
||||
.avatar {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
|
@ -142,10 +142,6 @@ ul.content-list {
|
|||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
float: right;
|
||||
|
||||
|
|
|
@ -36,10 +36,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.dash-project-avatar {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.dash-project-access-icon {
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
|
|
|
@ -3,12 +3,14 @@
|
|||
}
|
||||
|
||||
.dashboard .side .panel .panel-heading .input-group {
|
||||
|
||||
.form-control {
|
||||
height: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
.group-row {
|
||||
|
||||
.stats {
|
||||
float: right;
|
||||
line-height: $list-text-height;
|
||||
|
@ -21,12 +23,14 @@
|
|||
}
|
||||
|
||||
.ldap-group-links {
|
||||
|
||||
.form-actions {
|
||||
margin-bottom: $gl-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.groups-cover-block {
|
||||
|
||||
.container-fluid {
|
||||
position: relative;
|
||||
}
|
||||
|
@ -41,9 +45,14 @@
|
|||
background-color: $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.group-avatar {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.groups-header {
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
.nav-links {
|
||||
width: 35%;
|
||||
|
|
|
@ -96,8 +96,8 @@
|
|||
|
||||
.project-avatar {
|
||||
float: none;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin: 0 auto;
|
||||
border: none;
|
||||
|
||||
&.identicon {
|
||||
border-radius: 50%;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)}
|
||||
|
|
|
@ -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 }
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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'
|
||||
|
|
Loading…
Reference in a new issue