Style issue page, comments and part of merge request page

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

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;
+    }
+  }
+}

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;
-    }
-  }
 }

app/assets/stylesheets/generic/timeline.scss

 .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 {

app/assets/stylesheets/pages/issues.scss

@@ -47,10 +47,6 @@
   }
 }
 
-.participants {
-  margin-bottom: 20px;
-}
-
 .issue-search-form {
   margin: 0;
   height: 24px;

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,

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 {

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
 

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

@@ -45,5 +45,5 @@
             %textarea.hidden.js-task-list-field
               = @issue.description
 
-  .issue-discussion.prepend-top-default
+  .issue-discussion
     = render 'projects/issues/discussion'

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
 

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

@@ -37,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')