Merge branch 'issue-redesign' into 'master'

Issue redesign

* new issue UI
* fixed small font in issue/mr list

See merge request !1258

21 files changed, 175 insertions, 199 deletions

diff --git a/app/assets/stylesheets/base/gl_variables.scss b/app/assets/stylesheets/base/gl_variables.scss
index 6d3b4b1e73a..2447ee21898 100644
--- a/app/assets/stylesheets/base/gl_variables.scss
+++ b/app/assets/stylesheets/base/gl_variables.scss
@@ -22,6 +22,10 @@ $brand-info:     $gl-info;
 $brand-warning:  $gl-warning;
 $brand-danger:   $gl-danger;
 
+$border-radius-base:        3px !default;
+$border-radius-large:       5px !default;
+$border-radius-small:       2px !default;
+
 
 //== Scaffolding
 //
diff --git a/app/assets/stylesheets/base/mixins.scss b/app/assets/stylesheets/base/mixins.scss
index 8698109bc4c..0f661d6b1b6 100644
--- a/app/assets/stylesheets/base/mixins.scss
+++ b/app/assets/stylesheets/base/mixins.scss
@@ -177,7 +177,7 @@
     margin: 0px;
 
     &:last-child {
-      border:none
+      border-bottom: none;
     }
 
     &.active {
@@ -215,3 +215,39 @@
   font-size: 16px;
   line-height: 24px;
 }
+
+@mixin nav-menu {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  margin-top: 5px;
+  height: 56px;
+
+  li {
+    display: inline-block;
+
+    a {
+      padding: 14px;
+      font-size: 17px;
+      line-height: 28px;
+      color: #7f8fa4;
+      border-bottom: 2px solid transparent;
+
+      &:hover, &:active, &:focus {
+        text-decoration: none;
+      }
+    }
+
+    &.active a {
+      color: #4c4e54;
+      border-bottom: 2px solid #1cacfc;
+    }
+
+    .badge {
+      font-weight: normal;
+      background-color: #fff;
+      background-color: #eee;
+      color: #78a;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/generic/blocks.scss b/app/assets/stylesheets/generic/blocks.scss
index abf4657dd58..27a4c4db8c8 100644
--- a/app/assets/stylesheets/generic/blocks.scss
+++ b/app/assets/stylesheets/generic/blocks.scss
@@ -27,6 +27,11 @@
   border-bottom: 1px solid #e7e9ed;
   color: $gl-gray;
 
+  &.middle-block {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
   &.second-block {
     margin-top: -1px;
     margin-bottom: 0;
diff --git a/app/assets/stylesheets/generic/common.scss b/app/assets/stylesheets/generic/common.scss
index b995486588f..5e191d5dd4a 100644
--- a/app/assets/stylesheets/generic/common.scss
+++ b/app/assets/stylesheets/generic/common.scss
@@ -370,41 +370,11 @@ table {
 }
 
 .center-top-menu {
-  padding: 0;
-  margin: 0;
-  list-style: none;
+  @include nav-menu;
   text-align: center;
   margin-top: 5px;
   margin-bottom: $gl-padding;
   height: 56px;
   margin-top: -$gl-padding;
   padding-top: $gl-padding;
-
-  li {
-    display: inline-block;
-
-    a {
-      padding: 14px;
-      font-size: 17px;
-      line-height: 28px;
-      color: #7f8fa4;
-      border-bottom: 2px solid transparent;
-
-      &:hover, &:active, &:focus {
-        text-decoration: none;
-      }
-    }
-
-    &.active a {
-      color: #4c4e54;
-      border-bottom: 2px solid #1cacfc;
-    }
-
-    .badge {
-      font-weight: normal;
-      background-color: #fff;
-      background-color: #eee;
-      color: #78a;
-    }
-  }
 }
diff --git a/app/assets/stylesheets/generic/issue_box.scss b/app/assets/stylesheets/generic/issue_box.scss
index 869e586839b..b1fb87a6830 100644
--- a/app/assets/stylesheets/generic/issue_box.scss
+++ b/app/assets/stylesheets/generic/issue_box.scss
@@ -5,10 +5,13 @@
  */
 
 .issue-box {
+  @include border-radius(3px);
+
   display: inline-block;
-  padding: 4px 13px;
+  padding: 10px $gl-padding;
   font-weight: normal;
-  margin-right: 5px;
+  margin-right: 10px;
+  font-size: $gl-font-size;
 
   &.issue-box-closed {
     background-color: $gl-danger;
@@ -21,7 +24,7 @@
   }
 
   &.issue-box-open {
-    background-color: $gl-success;
+    background-color: #019875;
     color: #FFF;
   }
 
diff --git a/app/assets/stylesheets/generic/markdown_area.scss b/app/assets/stylesheets/generic/markdown_area.scss
index a4fc82e90bf..2dcff516e83 100644
--- a/app/assets/stylesheets/generic/markdown_area.scss
+++ b/app/assets/stylesheets/generic/markdown_area.scss
@@ -65,8 +65,11 @@
   position: relative;
 }
 
-.md-header ul {
-  float: left;
+.md-header {
+  ul {
+    float: left;
+    margin-bottom: 1px;
+  }
 }
 
 .referenced-users {
diff --git a/app/assets/stylesheets/generic/timeline.scss b/app/assets/stylesheets/generic/timeline.scss
index 97831eb7c27..54dc4c52418 100644
--- a/app/assets/stylesheets/generic/timeline.scss
+++ b/app/assets/stylesheets/generic/timeline.scss
@@ -1,89 +1,38 @@
 .timeline {
-  list-style: none;
-  padding: 20px 0 20px;
-  position: relative;
+  @include basic-list;
 
-  &:before {
-    top: 0;
-    bottom: 0;
-    position: absolute;
-    content: " ";
-    width: 3px;
-    background-color: #eeeeee;
-    margin-left: 29px;
-  }
-
-  .timeline-entry {
-    position: relative;
-    margin-top: 5px;
-    margin-left: 30px;
-    margin-bottom: 10px;
-    clear: both;
+  margin: 0;
+  padding: 0;
 
+  > li {
+    padding: $gl-padding;
+    border-color: #f1f2f4;
+    margin-left: -$gl-padding;
+    margin-right: -$gl-padding;
+    color: $gl-gray;
+    border-right: 1px solid #f1f2f4;
 
-    &:target {
-      .timeline-entry-inner .timeline-content {
-        -webkit-animation:target-note 2s linear;
-        background: $hover;
-      }
+    .avatar {
+      margin-right: 15px;
     }
 
-    .timeline-entry-inner {
-      position: relative;
-      margin-left: -20px;
-
-      &:before, &:after {
-        content: " ";
-        display: table;
-      }
-
-      .timeline-icon {
-        margin-top: 2px;
-        background: #fff;
-        color: #737881;
-        float: left;
-        @include border-radius($avatar_radius);
-        @include box-shadow(0 0 0 3px #EEE);
-        overflow: hidden;
-
-        .avatar {
-          margin: 0;
-          padding: 0;
-        }
-      }
-
-      .timeline-content {
-        position: relative;
-        background: $background-color;
-        padding: 10px 15px;
-        margin-left: 60px;
-
-        img {
-          max-width: 100%;
-        }
+    .controls {
+      padding-top: 10px;
+      float: right;
+    }
+  }
 
-        &:after {
-          content: '';
-          display: block;
-          position: absolute;
-          width: 0;
-          height: 0;
-          border-style: solid;
-          border-width: 9px 9px 9px 0;
-          border-color: transparent $background-color transparent transparent;
-          left: 0;
-          top: 10px;
-          margin-left: -9px;
-        }
-      }
+  .note-text {
+    p:last-child {
+      margin-bottom: 0;
     }
   }
 
   .system-note .timeline-entry-inner {
     .timeline-icon {
-      background: none;
+      float: left;
       margin-left: 12px;
-      margin-top: 0;
+      margin-top: 8px;
       @include box-shadow(none);
 
       span {
diff --git a/app/assets/stylesheets/generic/zen.scss b/app/assets/stylesheets/generic/zen.scss
index 7e86a0fe4b9..32e2c020e06 100644
--- a/app/assets/stylesheets/generic/zen.scss
+++ b/app/assets/stylesheets/generic/zen.scss
@@ -4,7 +4,7 @@
   }
 
   .zen-enter-link {
-    color: #888;
+    color: $gl-gray;
     position: absolute;
     top: 0px;
     right: 4px;
@@ -13,7 +13,7 @@
 
   .zen-leave-link {
     display: none;
-    color: #888;
+    color: $gl-text-color;
     position: absolute;
     top: 10px;
     right: 10px;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 2d32d82e107..e13c8f9eb98 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -25,8 +25,6 @@
 }
 
 .issuable-context-title {
-  font-size: 14px;
-  line-height: 1.4;
   margin-bottom: 5px;
 
   .avatar {
@@ -34,18 +32,12 @@
   }
 
   label {
-    color: #666;
+    color: $gl-gray;
     font-weight: normal;
     margin-right: 4px;
   }
 }
 
-.issuable-affix .context {
-  font-size: 13px;
-
-  .btn { font-size: 13px; }
-}
-
 .project-issuable-filter {
   .controls {
     float: right;
@@ -56,3 +48,22 @@
     text-align: left;
   }
 }
+
+.issuable-details {
+  .page-title {
+    margin-top: -15px;
+    padding: 10px 0;
+    margin-bottom: 0;
+    color: $gl-gray;
+    font-size: 16px;
+
+    .author {
+      color: $gl-gray;
+    }
+
+    .issue-id {
+      font-size: 19px;
+      color: $gl-text-color;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 7928b6220fc..1732072b5bf 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -1,6 +1,6 @@
 .issues-list {
   .issue {
-    padding: 10px 15px;
+    padding: 10px $gl-padding;
     position: relative;
 
     .issue-title {
@@ -11,7 +11,6 @@
 
     .issue-info {
       color: $gl-gray;
-      font-size: 13px;
     }
 
     .issue-check {
@@ -47,10 +46,6 @@
   }
 }
 
-.participants {
-  margin-bottom: 20px;
-}
-
 .issue-search-form {
   margin: 0;
   height: 24px;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index f0fb68d3422..a8db3d401bd 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -89,20 +89,11 @@
   }
 }
 
-@media(min-width: $screen-sm-max) {
-  .merge-request .merge-request-tabs{
-    li {
-      a {
-        padding: 15px 40px;
-        font-size: 14px;
-      }
-    }
-  }
-}
-
 .merge-request .merge-request-tabs{
-  margin-top: 30px;
-  margin-bottom: 20px;
+  @include nav-menu;
+  margin-bottom: -15px;
+  margin-top: 26px;
+  text-align: left;
 }
 
 .mr_source_commit,
@@ -137,7 +128,6 @@
 
     .merge-request-info {
       color: $gl-gray;
-      font-size: 13px;
     }
 
   }
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 203f9374cee..85804f5ee61 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -72,9 +72,13 @@
 
 .common-note-form {
   margin: 0;
-  background: #F9F9F9;
-  padding: 5px;
-  border: 1px solid #DDD;
+  background: #f8fafc;
+  padding: $gl-padding;
+  margin-left: -$gl-padding;
+  margin-right: -$gl-padding;
+  border-right: 1px solid #f1f2f4;
+  border-top: 1px solid #f1f2f4;
+  margin-bottom: -$gl-padding;
 }
 
 .note-form-actions {
diff --git a/app/views/projects/_md_preview.html.haml b/app/views/projects/_md_preview.html.haml
index b7bca6dae09..507757f6a2b 100644
--- a/app/views/projects/_md_preview.html.haml
+++ b/app/views/projects/_md_preview.html.haml
@@ -1,6 +1,6 @@
 .md-area
   .md-header.clearfix
-    %ul.nav.nav-tabs
+    %ul.center-top-menu
       %li.active
         = link_to '#md-write-holder', class: 'js-md-write-button', tabindex: '-1' do
           Write
@@ -14,7 +14,7 @@
         You are about to add
         %strong
           %span.js-referenced-users-count 0
-          people 
+          people
         to the discussion. Proceed with caution.
 
   %div
diff --git a/app/views/projects/issues/_discussion.html.haml b/app/views/projects/issues/_discussion.html.haml
index f61ae957208..d4a98eca473 100644
--- a/app/views/projects/issues/_discussion.html.haml
+++ b/app/views/projects/issues/_discussion.html.haml
@@ -7,21 +7,24 @@
 
 = render 'shared/show_aside'
 
+.gray-content-block.second-block
+  .row
+    .col-md-9
+      .votes-holder.pull-right
+        #votes= render 'votes/votes_block', votable: @issue
+      .participants
+        %span= pluralize(@participants.count, 'participant')
+        - @participants.each do |participant|
+          = link_to_member(@project, participant, name: false, size: 24)
+    .col-md-3
+      %span.slead.has_tooltip{title: 'Cross-project reference'}
+        = cross_project_reference(@project, @issue)
+
 .row
   %section.col-md-9
-    .votes-holder.pull-right
-      #votes= render 'votes/votes_block', votable: @issue
-    .participants
-      %span= pluralize(@participants.count, 'participant')
-      - @participants.each do |participant|
-        = link_to_member(@project, participant, name: false, size: 24)
     .voting_notes#notes= render 'projects/notes/notes_with_form'
   %aside.col-md-3
     .issuable-affix
-      .clearfix
-        %span.slead.has_tooltip{title: 'Cross-project reference'}
-          = cross_project_reference(@project, @issue)
-      %hr
       .context
         = render 'shared/issuable/context', issuable: @issue
 
diff --git a/app/views/projects/issues/_issue.html.haml b/app/views/projects/issues/_issue.html.haml
index b6910c8f796..55ce912829d 100644
--- a/app/views/projects/issues/_issue.html.haml
+++ b/app/views/projects/issues/_issue.html.haml
@@ -41,4 +41,4 @@
         = issue.task_status
 
     .pull-right.issue-updated-at
-      %small updated #{time_ago_with_tooltip(issue.updated_at, placement: 'bottom', html_class: 'issue_update_ago')}
+      %span updated #{time_ago_with_tooltip(issue.updated_at, placement: 'bottom', html_class: 'issue_update_ago')}
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index e7b14e7582c..09080642293 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -1,15 +1,16 @@
 - page_title "#{@issue.title} (##{@issue.iid})", "Issues"
 .issue
   .issue-details.issuable-details
-    %h4.page-title
+    .page-title
       .issue-box{ class: issue_box_class(@issue) }
         - if @issue.closed?
           Closed
         - else
           Open
-      Issue ##{@issue.iid}
-      %small.creator
-        · created by #{link_to_member(@project, @issue.author)}
+      %span.issue-id Issue ##{@issue.iid}
+      %span.creator
+        · created by #{link_to_member(@project, @issue.author, size: 24)}
+        ·
         = time_ago_with_tooltip(@issue.created_at, placement: 'bottom', html_class: 'issue_created_ago')
         - if @issue.updated_at != @issue.created_at
           %span
@@ -32,18 +33,17 @@
             = icon('pencil-square-o')
             Edit
 
-    %hr
-    %h2.issue-title
-      = gfm escape_once(@issue.title)
-    %div
-      - if @issue.description.present?
-        .description{class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : ''}
-          .wiki
-            = preserve do
-              = markdown(@issue.description)
-          %textarea.hidden.js-task-list-field
-            = @issue.description
+    .gray-content-block.middle-block
+      %h2.issue-title
+        = gfm escape_once(@issue.title)
+      %div
+        - if @issue.description.present?
+          .description{class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : ''}
+            .wiki
+              = preserve do
+                = markdown(@issue.description)
+            %textarea.hidden.js-task-list-field
+              = @issue.description
 
-    %hr
   .issue-discussion
     = render 'projects/issues/discussion'
diff --git a/app/views/projects/merge_requests/_discussion.html.haml b/app/views/projects/merge_requests/_discussion.html.haml
index f855dfec321..38e66c3828b 100644
--- a/app/views/projects/merge_requests/_discussion.html.haml
+++ b/app/views/projects/merge_requests/_discussion.html.haml
@@ -7,18 +7,21 @@
 
 = render 'shared/show_aside'
 
+.gray-content-block.second-block
+  .row
+    .col-md-9
+      .votes-holder.pull-right
+        #votes= render 'votes/votes_block', votable: @merge_request
+      = render "projects/merge_requests/show/participants"
+    .col-md-3
+      %span.slead.has_tooltip{:"data-original-title" => 'Cross-project reference'}
+        = cross_project_reference(@project, @merge_request)
+
 .row
   %section.col-md-9
-    .votes-holder.pull-right
-      #votes= render 'votes/votes_block', votable: @merge_request
-    = render "projects/merge_requests/show/participants"
     = render "projects/notes/notes_with_form"
   %aside.col-md-3
     .issuable-affix
-      .clearfix
-        %span.slead.has_tooltip{:"data-original-title" => 'Cross-project reference'}
-          = cross_project_reference(@project, @merge_request)
-      %hr
       .context
         = render 'shared/issuable/context', issuable: @merge_request
 
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index 4295c828dad..25e4e8ba80d 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -43,4 +43,4 @@
         = merge_request.task_status
 
     .pull-right.hidden-xs
-      %small updated #{time_ago_with_tooltip(merge_request.updated_at, placement: 'bottom', html_class: 'merge_request_updated_ago')}
+      %span updated #{time_ago_with_tooltip(merge_request.updated_at, placement: 'bottom', html_class: 'merge_request_updated_ago')}
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index ec1838eb489..721993fb279 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -5,10 +5,8 @@
 .merge-request{'data-url' => merge_request_path(@merge_request)}
   .merge-request-details.issuable-details
     = render "projects/merge_requests/show/mr_title"
-    %hr
     = render "projects/merge_requests/show/mr_box"
-    %hr
-    .append-bottom-20.mr-source-target
+    .append-bottom-20.mr-source-target.prepend-top-default
       - if @merge_request.open?
         .pull-right
           - if @merge_request.source_branch_exists?
@@ -39,7 +37,7 @@
         = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
 
   - if @commits.present?
-    %ul.nav.nav-tabs.merge-request-tabs
+    %ul.merge-request-tabs
       %li.notes-tab
         = link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: {target: '#notes', action: 'notes', toggle: 'tab'} do
           = icon('comments')
diff --git a/app/views/projects/merge_requests/show/_mr_box.html.haml b/app/views/projects/merge_requests/show/_mr_box.html.haml
index e3cd4346872..b4f62a75890 100644
--- a/app/views/projects/merge_requests/show/_mr_box.html.haml
+++ b/app/views/projects/merge_requests/show/_mr_box.html.haml
@@ -1,11 +1,12 @@
-%h2.issue-title
-  = gfm escape_once(@merge_request.title)
+.gray-content-block.middle-block
+  %h2.issue-title
+    = gfm escape_once(@merge_request.title)
 
-%div
-  - if @merge_request.description.present?
-    .description{class: can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : ''}
-      .wiki
-        = preserve do
-          = markdown(@merge_request.description)
-      %textarea.hidden.js-task-list-field
-        = @merge_request.description
+  %div
+    - if @merge_request.description.present?
+      .description{class: can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : ''}
+        .wiki
+          = preserve do
+            = markdown(@merge_request.description)
+        %textarea.hidden.js-task-list-field
+          = @merge_request.description
diff --git a/app/views/projects/merge_requests/show/_mr_title.html.haml b/app/views/projects/merge_requests/show/_mr_title.html.haml
index 9a1eb36fc88..2bf9cd597a4 100644
--- a/app/views/projects/merge_requests/show/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/show/_mr_title.html.haml
@@ -1,10 +1,11 @@
-%h4.page-title
+.page-title
   .issue-box{ class: issue_box_class(@merge_request) }
     = @merge_request.state_human_name
-  Merge Request ##{@merge_request.iid}
-  %small.creator
+  %span.issue-id Merge Request ##{@merge_request.iid}
+  %span.creator
+    ·
+    created by #{link_to_member(@project, @merge_request.author, size: 24)}
     ·
-    created by #{link_to_member(@project, @merge_request.author)}
     = time_ago_with_tooltip(@merge_request.created_at)
     - if @merge_request.updated_at != @merge_request.created_at
       %span