Merge branch 'refactor-lists' into 'master'

Refactor html/css for lists and improve help UI page

* dry lists html/css removing a lot of style duplicates
* fix snippets list to match common style
* fix extra bottom margin for groups list
* improve help page ui so it looks clean

Fixes #11873 

See merge request !2977

app/assets/stylesheets/framework/lists.scss

@@ -110,7 +110,20 @@ ul.content-list {
 
   > li {
     border-color: $table-border-color;
-    color: $gl-gray;
+    color: $list-text-color;
+    font-size: $list-font-size;
+
+    .title {
+      color: $list-title-color;
+      font-weight: 600;
+    }
+
+    .description {
+      p {
+        @include str-truncated;
+        margin-bottom: 0;
+      }
+    }
 
     .avatar {
       margin-right: 15px;
@@ -127,13 +140,6 @@ ul.content-list {
   }
 }
 
-.panel > .content-list {
-  li {
-    margin: 0;
-    padding: $gl-padding;
-  }
-}
-
 ul.controls {
   padding-top: 1px;
   float: right;

app/assets/stylesheets/framework/variables.scss

@@ -32,6 +32,8 @@ $gl-avatar-size: 40px;
 $secondary-text: #7f8fa4;
 $error-exclamation-point: #E62958;
 $border-radius-default: 3px;
+$list-title-color: #333333;
+$list-text-color: #555555;
 
 /*
  * Color schema

app/assets/stylesheets/pages/issues.scss

@@ -4,13 +4,7 @@
     position: relative;
 
     .issue-title {
-      margin-bottom: 5px;
-      font-size: $list-font-size;
-      font-weight: 600;
-    }
-
-    .issue-info {
-      color: $gl-gray;
+      margin-bottom: 2px;
     }
 
     .issue-check {

app/assets/stylesheets/pages/merge_requests.scss

@@ -148,15 +148,8 @@
     position: relative;
 
     .merge-request-title {
-      margin-bottom: 5px;
-      font-size: $list-font-size;
-      font-weight: 600;
-    }
-
-    .merge-request-info {
-      color: $gl-gray;
+      margin-bottom: 2px;
     }
-
   }
 
   .merge-request-labels {

app/assets/stylesheets/pages/projects.scss

@@ -397,15 +397,10 @@ pre.light-well {
 
     .project-full-name {
       @include str-truncated;
-      font-weight: 600;
-      color: #4c4e54;
     }
 
-    .project-controls {
-      float: right;
-      color: $gl-gray;
+    .controls {
       line-height: 40px;
-      color: #7f8fa4;
 
       a:hover {
         text-decoration: none;
@@ -415,16 +410,6 @@ pre.light-well {
         margin-left: 10px;
       }
     }
-
-    .project-description {
-      color: #7f8fa4;
-
-      p {
-        @include str-truncated;
-        margin-bottom: 0;
-        color: #7f8fa4;
-      }
-    }
   }
 
   .bottom {

app/assets/stylesheets/pages/snippets.scss

@@ -2,30 +2,6 @@
   padding: 2px;
 }
 
-
-.snippet-row {
-  .snippet-title {
-    font-size: 15px;
-    font-weight: bold;
-    line-height: 20px;
-    margin-bottom: 2px;
-
-    .monospace {
-      font-weight: normal;
-    }
-  }
-
-  .snippet-info {
-    color: #888;
-    font-size: 13px;
-    line-height: 24px;
-
-    a {
-      color: #888;
-    }
-  }
-}
-
 .snippet-holder {
   margin-bottom: -$gl-padding;
 

app/assets/stylesheets/pages/ui_dev_kit.scss

@@ -3,4 +3,15 @@
     margin: 35px 0 20px;
     font-weight: bold;
   }
+
+  .example {
+    &:before {
+      content: "Example";
+      color: #BBB;
+    }
+
+    padding: 15px;
+    border: 1px dashed #ddd;
+    margin-bottom: 15px;
+  }
 }

app/views/help/ui.html.haml

@@ -31,64 +31,91 @@
 
   %h2#blocks Blocks
 
-  %h4
+  .lead
+    Content block separated with botton border
+    %code .content-block
+
+  .example
+    .content-block
+      %h4 Normal block inside content
+      = lorem
+
+    .content-block
+      %h4 Second block
+      = lorem
+
+  .lead
+    Gray content block with side padding using
     %code .gray-content-block
 
-  .gray-content-block.middle-block
-    %h4 Normal block inside content
-    = lorem
+  .example
+    .gray-content-block
+      %h4 Normal block inside content
+      = lorem
 
-  .gray-content-block.second-block
-    %h4 Second block
-    = lorem
+    .gray-content-block.second-block
+      %h4 Second block
+      = lorem
 
 
-  %h4
+  .lead
+    Cover block for profile page with avatar, name and description
     %code .cover-block
-  %br
-  .cover-block
-    .avatar-holder
-      = image_tag avatar_icon('admin@example.com', 90), class: "avatar s90", alt: ''
-    .cover-title
-      John Smith
-
-    .cover-desc
-      = lorem
+  .example
+    .cover-block
+      .avatar-holder
+        = image_tag avatar_icon('admin@example.com', 90), class: "avatar s90", alt: ''
+      .cover-title
+        John Smith
+
+      .cover-desc
+        = lorem
 
-    .cover-controls
-      = link_to '#', class: 'btn btn-gray' do
-        = icon('pencil')
-       
-      = link_to '#', class: 'btn btn-gray' do
-        = icon('rss')
+      .cover-controls
+        = link_to '#', class: 'btn btn-gray' do
+          = icon('pencil')
+         
+        = link_to '#', class: 'btn btn-gray' do
+          = icon('rss')
 
   %h2#lists Lists
 
-  %h4
+  .lead
+    Simple list using
     %code .content-list
-  %ul.content-list
-    %li
-      One item
-    %li
-      One item
-    %li
-      One item
 
-  %h4
-    %code .well-list
-  %ul.well-list
-    %li
-      One item
-    %li
-      One item
-    %li
-      One item
+  .example
+    %ul.content-list
+      %li
+        One item
+      %li
+        One item
+      %li
+        One item
 
-  %h4
-    %code .panel .well-list
+  .lead
+    List with avatar, title and description using
+    %code .content-list
+
+  .example
+    %ul.content-list
+      %li
+        = image_tag 'no_avatar.png', class: 'avatar s40'
+        .title Title
+        .description Description
+      %li
+        = image_tag 'no_avatar.png', class: 'avatar s40'
+        .title Title
+        .description Description
+      %li
+        = image_tag 'no_avatar.png', class: 'avatar s40'
+        .title Title
+        .description Description
 
-  .panel.panel-default
-    .panel-heading Your list
+  .lead
+    List with hover effect
+    %code .well-list
+  .example
     %ul.well-list
       %li
         One item
@@ -97,17 +124,18 @@
       %li
         One item
 
-  %h4
-    %code .bordered-list
-  %ul.bordered-list
-    %li
-      One item
-    %li
-      One item
-    %li
-      One item
-
-
+  .lead
+    List inside panel
+  .example
+    .panel.panel-default
+      .panel-heading Your list
+      %ul.well-list
+        %li
+          One item
+        %li
+          One item
+        %li
+          One item
 
   %h2#tables Tables
 
@@ -138,9 +166,9 @@
 
   %h2#navs Navigation
 
-  %h4
+  .lead
+    Holder for top page navigation. Includes navigation, search field, sorting and button
     %code .top-area
-  %p Holder for top page navigation. Includes navigation, search field, sorting and button
 
   .example
     .top-area
@@ -161,9 +189,9 @@
 
         = link_to 'New issue', '#', class: 'btn btn-new'
 
-  %h4
+  .lead
+    Only nav links without button and search
     %code .nav-links
-  %p Only nav links without button and search
   .example
     %ul.nav-links
       %li.active
@@ -228,43 +256,47 @@
 
   %h2#forms Forms
 
-  %h4
+  .lead
+    Horizontal form when label rendered inline with input
     %code form.horizontal-form
 
-  %form.form-horizontal
-    .form-group
-      %label.col-sm-2.control-label{:for => "inputEmail3"} Email
-      .col-sm-10
-        %input#inputEmail3.form-control{:placeholder => "Email", :type => "email"}/
-    .form-group
-      %label.col-sm-2.control-label{:for => "inputPassword3"} Password
-      .col-sm-10
-        %input#inputPassword3.form-control{:placeholder => "Password", :type => "password"}/
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          %label
-            %input{:type => "checkbox"}/
-            Remember me
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        %button.btn.btn-default{:type => "submit"} Sign in
-
-  %h4
+  .example
+    %form.form-horizontal
+      .form-group
+        %label.col-sm-2.control-label{:for => "inputEmail3"} Email
+        .col-sm-10
+          %input#inputEmail3.form-control{:placeholder => "Email", :type => "email"}/
+      .form-group
+        %label.col-sm-2.control-label{:for => "inputPassword3"} Password
+        .col-sm-10
+          %input#inputPassword3.form-control{:placeholder => "Password", :type => "password"}/
+      .form-group
+        .col-sm-offset-2.col-sm-10
+          .checkbox
+            %label
+              %input{:type => "checkbox"}/
+              Remember me
+      .form-group
+        .col-sm-offset-2.col-sm-10
+          %button.btn.btn-default{:type => "submit"} Sign in
+
+  .lead
+    Form when label rendered above input
     %code form
 
-  %form
-    .form-group
-      %label{:for => "exampleInputEmail1"} Email address
-      %input#exampleInputEmail1.form-control{:placeholder => "Enter email", :type => "email"}/
-    .form-group
-      %label{:for => "exampleInputPassword1"} Password
-      %input#exampleInputPassword1.form-control{:placeholder => "Password", :type => "password"}/
-    .checkbox
-      %label
-        %input{:type => "checkbox"}/
-        Remember me
-    %button.btn.btn-default{:type => "submit"} Sign in
+  .example
+    %form
+      .form-group
+        %label{:for => "exampleInputEmail1"} Email address
+        %input#exampleInputEmail1.form-control{:placeholder => "Enter email", :type => "email"}/
+      .form-group
+        %label{:for => "exampleInputPassword1"} Password
+        %input#exampleInputPassword1.form-control{:placeholder => "Password", :type => "password"}/
+      .checkbox
+        %label
+          %input{:type => "checkbox"}/
+          Remember me
+      %button.btn.btn-default{:type => "submit"} Sign in
 
   %h2#file File
   %h4

app/views/projects/issues/_issue.html.haml

@@ -5,7 +5,7 @@
 
   .issue-title
     %span.issue-title-text
-      = link_to_gfm issue.title, issue_path(issue), class: "row_title"
+      = link_to_gfm issue.title, issue_path(issue), class: "title"
     %ul.controls.light
       - if issue.closed?
         %li

app/views/projects/merge_requests/_merge_request.html.haml

 %li{ class: mr_css_classes(merge_request) }
   .merge-request-title
     %span.merge-request-title-text
-      = link_to_gfm merge_request.title, merge_request_path(merge_request), class: "row_title"
+      = link_to_gfm merge_request.title, merge_request_path(merge_request), class: "title"
     %ul.controls.light
       - if merge_request.merged?
         %li

app/views/shared/_issues.html.haml

@@ -8,7 +8,7 @@
           .pull-right
             = link_to 'New issue', new_namespace_project_issue_path(project.namespace, project)
 
-      %ul.well-list.issues-list
+      %ul.content-list.issues-list
         - group[1].each do |issue|
           = render 'projects/issues/issue', issue: issue
   = paginate @issues, theme: "gitlab"

app/views/shared/_merge_requests.html.haml

@@ -8,7 +8,7 @@
           .pull-right
             = link_to 'New merge request', new_namespace_project_merge_request_path(project.namespace, project)
 
-      %ul.well-list.mr-list
+      %ul.content-list.mr-list
         - group[1].each do |merge_request|
           = render 'projects/merge_requests/merge_request', merge_request: merge_request
   = paginate @merge_requests, theme: "gitlab"

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

@@ -22,13 +22,13 @@
       = number_with_delimiter(group.users.count)
 
   = image_tag group_icon(group), class: "avatar s40 hidden-xs"
-  = link_to group, class: 'group-name' do
-    %span.item-title= group.name
+  = link_to group, class: 'group-name title' do
+    = group.name
 
   - if group_member
     as
     %span #{group_member.human_access}
 
   - if group.description.present?
-    .light
+    .description
       = markdown(group.description, pipeline: :description)

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

@@ -7,7 +7,7 @@
 - skip_namespace = false unless local_assigns[:skip_namespace] == true
 - show_last_commit_as_description = false unless local_assigns[:show_last_commit_as_description] == true
 
-%ul.projects-list
+%ul.projects-list.content-list
   - if projects.any?
     - projects.each_with_index do |project, i|
       - css_class = (i >= projects_limit) ? 'hide' : nil

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

@@ -19,7 +19,7 @@
             = 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.project-full-name.title
         %span.namespace-name
           - if project.namespace && !skip_namespace
             = project.namespace.human_name
@@ -27,7 +27,7 @@
         %span.project-name.filter-title
           = project.name
 
-    .project-controls
+    .controls
       - if ci_commit
         %span
           = render_ci_status(ci_commit)
@@ -43,9 +43,9 @@
         title: "#{visibility_level_label(project.visibility_level)} - #{project_visibility_level_description(project.visibility_level)}"}
         = visibility_level_icon(project.visibility_level, fw: false)
     - if show_last_commit_as_description
-      .project-description
+      .description
         = link_to_gfm project.commit.title, namespace_project_commit_path(project.namespace, project, project.commit),
           class: "commit-row-message"
     - elsif project.description.present?
-      .project-description
+      .description
         = markdown(project.description, pipeline: :description)

app/views/shared/snippets/_snippet.html.haml

 %li.snippet-row
+  = image_tag avatar_icon(snippet.author_email), class: "avatar s40 hidden-xs", alt: ''
+
   .snippet-title
-    = link_to reliable_snippet_path(snippet) do
+    = link_to reliable_snippet_path(snippet), class: 'title' do
       = truncate(snippet.title, length: 60)
       - if snippet.private?
         %span.label.label-gray
-          %i.fa.fa-lock
+          = icon('lock')
           private
     %span.monospace.pull-right
       = snippet.file_name
@@ -15,6 +17,5 @@
 
   .snippet-info
     = link_to user_snippets_path(snippet.author) do
-      = image_tag avatar_icon(snippet.author_email), class: "avatar s24", alt: ''
       = snippet.author_name
     authored #{time_ago_with_tooltip(snippet.created_at)}

app/views/snippets/_snippets.html.haml

-%ul.bordered-list
+%ul.content-list
   = render partial: 'shared/snippets/snippet', collection: @snippets
   - if @snippets.empty?
     %li