Merge branch 'list-padding' into 'master'

New padding for lists

* improve consistency for list padding
* reduce padding for project/group/events lists
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

Fixes #12511 

cc @jschatz1 @skyruler @creamzy 

See merge request !2715

app/assets/stylesheets/framework/avatar.scss

@@ -24,6 +24,7 @@
   &.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; }
@@ -40,7 +41,8 @@
   &.s16 { font-size: 12px; line-height: 1.33; }
   &.s24 { font-size: 14px; line-height: 1.8; }
   &.s26 { font-size: 20px; line-height: 1.33; }
-  &.s32 { font-size: 22px; line-height: 32px; }
+  &.s32 { font-size: 20px; line-height: 32px; }
+  &.s40 { font-size: 16px; line-height: 40px; }
   &.s60 { font-size: 32px; line-height: 60px; }
   &.s90 { font-size: 36px; line-height: 90px; }
   &.s110 { font-size: 40px; line-height: 112px; font-weight: 300; }

app/assets/stylesheets/framework/lists.scss

@@ -109,7 +109,6 @@ ul.content-list {
   padding: 0;
 
   > li {
-    padding: $gl-padding 0;
     border-color: $table-border-color;
     color: $gl-gray;
 

app/assets/stylesheets/framework/variables.scss

@@ -28,7 +28,7 @@ $gl-padding: 16px;
 $gl-btn-padding: 10px;
 $gl-vert-padding: 6px;
 $gl-padding-top:10px;
-$gl-avatar-size: 46px;
+$gl-avatar-size: 40px;
 $secondary-text: #7f8fa4;
 $error-exclamation-point: #E62958;
 

app/assets/stylesheets/pages/dashboard.scss

@@ -40,10 +40,6 @@
   .avatar {
     @include border-radius(50%);
   }
-
-  .identicon {
-    line-height: 46px;
-  }
 }
 
 .dash-project-access-icon {

app/assets/stylesheets/pages/events.scss

@@ -4,7 +4,7 @@
  */
 .event-item {
   font-size: $gl-font-size;
-  padding: $gl-padding 0 $gl-padding ($gl-avatar-size + 15px);
+  padding: $gl-padding-top 0 $gl-padding-top ($gl-avatar-size + $gl-padding-top);
   border-bottom: 1px solid $table-border-color;
   color: #7f8fa4;
 
@@ -16,7 +16,7 @@
 
     .event-title,
     .event-item-timestamp {
-      line-height: 44px;
+      line-height: 40px;
     }
   }
 
@@ -25,7 +25,7 @@
   }
 
   .avatar {
-    margin-left: -($gl-avatar-size + 15px);
+    margin-left: -($gl-avatar-size + $gl-padding-top);
   }
 
   .event-title {
@@ -41,7 +41,6 @@
     margin-right: 174px;
 
     .event-note {
-      margin-top: 5px;
       word-wrap: break-word;
 
       .md {
@@ -98,8 +97,6 @@
   &:last-child { border:none }
 
   .event_commits {
-    margin-top: 9px;
-
     li {
       &.commit {
         background: transparent;

app/assets/stylesheets/pages/issues.scss

@@ -65,10 +65,6 @@ form.edit-issue {
   width: 3em;
 }
 
-.merge-request-info {
-  padding-left: 5px;
-}
-
 .merge-request-status {
   color: $gl-gray;
   font-size: 15px;

app/assets/stylesheets/pages/projects.scss

@@ -391,12 +391,11 @@ pre.light-well {
   @include basic-list;
 
   .project-row {
-    padding: $gl-padding 0;
     border-color: $table-border-color;
 
     &.no-description {
       .project {
-        line-height: 44px;
+        line-height: 40px;
       }
     }
 
@@ -409,7 +408,7 @@ pre.light-well {
     .project-controls {
       float: right;
       color: $gl-gray;
-      line-height: 45px;
+      line-height: 40px;
       color: #7f8fa4;
 
       a:hover {

app/views/events/_event.html.haml

@@ -3,8 +3,8 @@
     .event-item-timestamp
       #{time_ago_with_tooltip(event.created_at)}
 
-    = cache [event, current_application_settings, "v2.1"] do
-      = image_tag avatar_icon(event.author_email, 46), class: "avatar s46", alt:''
+    = cache [event, current_application_settings, "v2.2"] do
+      = image_tag avatar_icon(event.author_email, 40), class: "avatar s40", alt:''
       - if event.created_project?
         = render "events/event/created_project", event: event
       - elsif event.push?

app/views/shared/groups/_group.html.haml

@@ -21,7 +21,7 @@
       = icon('users')
       = number_with_delimiter(group.users.count)
 
-  = image_tag group_icon(group), class: "avatar s46 hidden-xs"
+  = image_tag group_icon(group), class: "avatar s40 hidden-xs"
   = link_to group, class: 'group-name' do
     %span.item-title= group.name
 

app/views/shared/projects/_project.html.haml

@@ -16,9 +16,9 @@
       - if avatar
         .dash-project-avatar
           - if use_creator_avatar
-            = image_tag avatar_icon(project.creator.email, 46), class: "avatar s46", alt:''
+            = image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:''
           - else
-            = project_icon(project, alt: '', class: 'avatar project-avatar s46')
+            = project_icon(project, alt: '', class: 'avatar project-avatar s40')
       %span.project-full-name
         %span.namespace-name
           - if project.namespace && !skip_namespace