Merge branch 'master' into feature/issue-move

* master: (121 commits)
  Dedupe labels in labels selector in Dashboard pages
  Refactor colors and lists
  Add a safeguard in MergeRequest#compute_diverged_commits_count
  Fix an issue when the target branch of a MR had been deleted
  Add avatar to issue and MR pages header
  Cleanup somce css colors
  Re-group scss variables
  Refactor `Todo#target`
  Fixes issue with filter label missing on labels & milestones
  Rename `Todo#to_reference` to `Todo#target_reference`
  Fixed failing tests
  Updated controller with before_action Fixed other issues based on feedback
  Fixes issue on dashboard issues
  Full labels data in JSON
  Fixed issue with labels dropdown getting wrong labels
  Update CHANGELOG
  Use `Note#for_project_snippet?` to skip notes on project snippet
  Use `Commit#short_id` instead of `Commit.truncate_sha`
  Reuse `for_commit?` on conditional validations
  Update schema info comment on todo related files
  ...

Conflicts:
	app/models/issue.rb
	db/schema.rb
	spec/models/issue_spec.rb

29 files changed, 453 insertions, 248 deletions

diff --git a/app/assets/javascripts/dispatcher.js.coffee b/app/assets/javascripts/dispatcher.js.coffee
index 1be86e3b820..f5e1ca9860d 100644
--- a/app/assets/javascripts/dispatcher.js.coffee
+++ b/app/assets/javascripts/dispatcher.js.coffee
@@ -14,7 +14,6 @@ class Dispatcher
 
     path = page.split(':')
     shortcut_handler = null
-
     switch page
       when 'projects:issues:index'
         Issues.init()
@@ -25,6 +24,8 @@ class Dispatcher
         new ZenMode()
       when 'projects:milestones:show', 'groups:milestones:show', 'dashboard:milestones:show'
         new Milestone()
+      when 'dashboard:todos:index'
+        new Todos()
       when 'projects:milestones:new', 'projects:milestones:edit'
         new ZenMode()
         new DropzoneInput($('.milestone-form'))
diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index 4f038477755..c81e8bf760a 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -246,11 +246,15 @@ class GitLabDropdown
         if oldValue
           value = "#{oldValue},#{value}"
       else
-        @dropdown.find(ACTIVE_CLASS).removeClass ACTIVE_CLASS
+        @dropdown.find(".#{ACTIVE_CLASS}").removeClass ACTIVE_CLASS
 
       # Toggle active class for the tick mark
       el.toggleClass "is-active"
 
+      # Toggle the dropdown label
+      if @options.toggleLabel
+        $(@el).find(".dropdown-toggle-text").text @options.toggleLabel(selectedObject)
+
       if value?
         if !field.length
           # Create hidden input for form
diff --git a/app/assets/javascripts/issue.js.coffee b/app/assets/javascripts/issue.js.coffee
index d663e34871c..f50df1f5ea3 100644
--- a/app/assets/javascripts/issue.js.coffee
+++ b/app/assets/javascripts/issue.js.coffee
@@ -7,6 +7,7 @@ class @Issue
     # Prevent duplicate event bindings
     @disableTaskList()
     @fixAffixScroll()
+    @initParticipants()
     if $('a.btn-close').length
       @initTaskList()
       @initIssueBtnEventListeners()
@@ -84,3 +85,27 @@ class @Issue
       type: 'PATCH'
       url: $('form.js-issuable-update').attr('action')
       data: patchData
+
+  initParticipants: ->
+    _this = @
+    $(document).on "click", ".js-participants-more", @toggleHiddenParticipants
+
+    $(".js-participants-author").each (i) ->
+      if i >= _this.PARTICIPANTS_ROW_COUNT
+        $(@)
+          .addClass "js-participants-hidden"
+          .hide()
+
+  toggleHiddenParticipants: (e) ->
+    e.preventDefault()
+
+    currentText = $(this).text().trim()
+    lessText = $(this).data("less-text")
+    originalText = $(this).data("original-text")
+
+    if currentText is originalText
+      $(this).text(lessText)
+    else
+      $(this).text(originalText)
+
+    $(".js-participants-hidden").toggle()
diff --git a/app/assets/javascripts/issues.js.coffee b/app/assets/javascripts/issues.js.coffee
index a0acf3028bf..1127b289264 100644
--- a/app/assets/javascripts/issues.js.coffee
+++ b/app/assets/javascripts/issues.js.coffee
@@ -41,24 +41,28 @@
     @timer = null
     $("#issue_search").keyup ->
       clearTimeout(@timer)
-      @timer = setTimeout(Issues.filterResults, 500)
+      @timer = setTimeout( ->
+        Issues.filterResults $("#issue_search_form")
+      , 500)
 
-  filterResults: =>
-    form = $("#issue_search_form")
-    search = $("#issue_search").val()
-    $('.issues-holder').css("opacity", '0.5')
-    issues_url = form.attr('action') + '?' + form.serialize()
+  filterResults: (form) =>
+    $('.issues-holder, .merge-requests-holder').css("opacity", '0.5')
+    formAction = form.attr('action')
+    formData = form.serialize()
+    issuesUrl = formAction
+    issuesUrl += ("#{if formAction.indexOf("?") < 0 then '?' else '&'}")
+    issuesUrl += formData
 
     $.ajax
       type: "GET"
-      url: form.attr('action')
-      data: form.serialize()
+      url: formAction
+      data: formData
       complete: ->
-        $('.issues-holder').css("opacity", '1.0')
+        $('.issues-holder, .merge-requests-holder').css("opacity", '1.0')
       success: (data) ->
-        $('.issues-holder').html(data.html)
+        $('.issues-holder, .merge-requests-holder').html(data.html)
         # Change url so if user reload a page - search results are saved
-        history.replaceState {page: issues_url}, document.title, issues_url
+        history.replaceState {page: issuesUrl}, document.title, issuesUrl
         Issues.reload()
       dataType: "json"
 
diff --git a/app/assets/javascripts/labels_select.js.coffee b/app/assets/javascripts/labels_select.js.coffee
index 5ade2cb66cb..4a0c18a99a6 100644
--- a/app/assets/javascripts/labels_select.js.coffee
+++ b/app/assets/javascripts/labels_select.js.coffee
@@ -1,30 +1,32 @@
 class @LabelsSelect
   constructor: ->
     $('.js-label-select').each (i, dropdown) ->
-      projectId = $(dropdown).data('project-id')
-      labelUrl = $(dropdown).data("labels")
-      selectedLabel = $(dropdown).data('selected')
+      $dropdown = $(dropdown)
+      projectId = $dropdown.data('project-id')
+      labelUrl = $dropdown.data('labels')
+      selectedLabel = $dropdown.data('selected')
       if selectedLabel
-        selectedLabel = selectedLabel.split(",")
+        selectedLabel = selectedLabel.split(',')
       newLabelField = $('#new_label_name')
       newColorField = $('#new_label_color')
-      showNo = $(dropdown).data('show-no')
-      showAny = $(dropdown).data('show-any')
+      showNo = $dropdown.data('show-no')
+      showAny = $dropdown.data('show-any')
+      defaultLabel = $dropdown.data('default-label')
 
       if newLabelField.length
-        $('.suggest-colors-dropdown a').on "click", (e) ->
+        $('.suggest-colors-dropdown a').on 'click', (e) ->
           e.preventDefault()
           e.stopPropagation()
-          newColorField.val $(this).data("color")
+          newColorField.val $(this).data('color')
           $('.js-dropdown-label-color-preview')
-            .css 'background-color', $(this).data("color")
+            .css 'background-color', $(this).data('color')
             .addClass 'is-active'
 
-        $('.js-new-label-btn').on "click", (e) ->
+        $('.js-new-label-btn').on 'click', (e) ->
           e.preventDefault()
           e.stopPropagation()
 
-          if newLabelField.val() isnt "" && newColorField.val() isnt ""
+          if newLabelField.val() isnt '' and newColorField.val() isnt ''
             $('.js-new-label-btn').disable()
 
             # Create new label with API
@@ -33,46 +35,38 @@ class @LabelsSelect
               color: newColorField.val()
             }, (label) ->
               $('.js-new-label-btn').enable()
-              $('.dropdown-menu-back', $(dropdown).parent()).trigger "click"
+              $('.dropdown-menu-back', $dropdown.parent()).trigger 'click'
 
-      $(dropdown).glDropdown(
+      $dropdown.glDropdown(
         data: (term, callback) ->
-          # We have to fetch the JS version of the labels list because there is no
-          # public facing JSON url for labels
           $.ajax(
             url: labelUrl
           ).done (data) ->
-            html = $(data)
-            data = []
-            html.find('.label-row a').each ->
-              data.push(
-                title: $(@).text().trim()
-              )
-
             if showNo
               data.unshift(
-                id: "0"
-                title: 'No label'
+                id: 0
+                title: 'No Label'
               )
 
             if showAny
               data.unshift(
-                title: 'Any label'
+                isAny: true
+                title: 'Any Label'
               )
 
             if data.length > 2
-              data.splice 2, 0, "divider"
+              data.splice 2, 0, 'divider'
 
             callback data
         renderRow: (label) ->
           if $.isArray(selectedLabel)
-            selected = ""
+            selected = ''
             $.each selectedLabel, (i, selectedLbl) ->
               selectedLbl = selectedLbl.trim()
-              if selected is "" && label.title is selectedLbl
-                selected = "is-active"
+              if selected is '' and label.title is selectedLbl
+                selected = 'is-active'
           else
-            selected = if label.title is selectedLabel then "is-active" else ""
+            selected = if label.title is selectedLabel then 'is-active' else ''
 
           "<li>
             <a href='#' class='#{selected}'>
@@ -83,10 +77,24 @@ class @LabelsSelect
         search:
           fields: ['title']
         selectable: true
-        fieldName: $(dropdown).data('field-name')
+        toggleLabel: (selected) ->
+          if selected and selected.title isnt 'Any Label'
+            selected.title
+          else
+            defaultLabel
+        fieldName: $dropdown.data('field-name')
         id: (label) ->
-          label.title
+          if label.isAny?
+            ''
+          else
+            label.title
         clicked: ->
-          if $(dropdown).hasClass "js-filter-submit"
-            $(dropdown).parents('form').submit()
+          page = $('body').data 'page'
+          isIssueIndex = page is 'projects:issues:index'
+          isMRIndex = page is page is 'projects:merge_requests:index'
+
+          if $dropdown.hasClass('js-filter-submit') and (isIssueIndex or isMRIndex)
+            Issues.filterResults $dropdown.closest('form')
+          else if $dropdown.hasClass 'js-filter-submit'
+            $dropdown.closest('form').submit()
       )
diff --git a/app/assets/javascripts/milestone_select.js.coffee b/app/assets/javascripts/milestone_select.js.coffee
index 5e884454a65..e17a1adb648 100644
--- a/app/assets/javascripts/milestone_select.js.coffee
+++ b/app/assets/javascripts/milestone_select.js.coffee
@@ -1,60 +1,65 @@
 class @MilestoneSelect
   constructor: ->
     $('.js-milestone-select').each (i, dropdown) ->
-      projectId = $(dropdown).data('project-id')
-      milestonesUrl = $(dropdown).data('milestones')
-      selectedMilestone = $(dropdown).data('selected')
-      showNo = $(dropdown).data('show-no')
-      showAny = $(dropdown).data('show-any')
-      useId = $(dropdown).data('use-id')
+      $dropdown = $(dropdown)
+      projectId = $dropdown.data('project-id')
+      milestonesUrl = $dropdown.data('milestones')
+      selectedMilestone = $dropdown.data('selected')
+      showNo = $dropdown.data('show-no')
+      showAny = $dropdown.data('show-any')
+      useId = $dropdown.data('use-id')
+      defaultLabel = $dropdown.data('default-label')
 
-      $(dropdown).glDropdown(
+      $dropdown.glDropdown(
         data: (term, callback) ->
           $.ajax(
             url: milestonesUrl
           ).done (data) ->
-            html = $(data)
-            data = []
-            html.find('.milestone strong a').each ->
-              link = $(@).attr("href").split("/")
-              data.push(
-                id: link[link.length - 1]
-                title: $(@).text().trim()
-              )
-
             if showNo
               data.unshift(
-                id: "0"
+                id: '0'
                 title: 'No Milestone'
               )
 
             if showAny
               data.unshift(
+                isAny: true
                 title: 'Any Milestone'
               )
 
             if data.length > 2
-              data.splice 2, 0, "divider"
+              data.splice 2, 0, 'divider'
 
             callback(data)
         filterable: true
         search:
           fields: ['title']
         selectable: true
-        fieldName: $(dropdown).data('field-name')
+        toggleLabel: (selected) ->
+          if selected && 'id' of selected
+            selected.title
+          else
+            defaultLabel
+        fieldName: $dropdown.data('field-name')
         text: (milestone) ->
           milestone.title
         id: (milestone) ->
           if !useId
-            if milestone.title isnt "Any milestone"
+            if !milestone.isAny?
               milestone.title
             else
-              ""
+              ''
           else
             milestone.id
         isSelected: (milestone) ->
           milestone.title is selectedMilestone
         clicked: ->
-          if $(dropdown).hasClass "js-filter-submit"
-            $(dropdown).parents('form').submit()
+          page = $('body').data 'page'
+          isIssueIndex = page is 'projects:issues:index'
+          isMRIndex = page is page is 'projects:merge_requests:index'
+
+          if $dropdown.hasClass('js-filter-submit') and (isIssueIndex or isMRIndex)
+            Issues.filterResults $dropdown.closest('form')
+          else if $dropdown.hasClass 'js-filter-submit'
+            $dropdown.closest('form').submit()
       )
diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee
index 75d7f52bbb6..82532216589 100644
--- a/app/assets/javascripts/notes.js.coffee
+++ b/app/assets/javascripts/notes.js.coffee
@@ -343,6 +343,7 @@ class @Notes
   updateNote: (_xhr, note, _status) =>
     # Convert returned HTML to a jQuery object so we can modify it further
     $html = $(note.html)
+    $('.js-timeago', $html).timeago()
     $html.syntaxHighlight()
     $html.find('.js-task-list-container').taskList('enable')
 
@@ -626,10 +627,10 @@ class @Notes
       if closebtn.text() isnt closetext
         closebtn.text(closetext)
 
-      if reopenbtn.is(':not(.btn-comment-and-reopen)')
+      if reopenbtn.is('.btn-comment-and-reopen')
         reopenbtn.removeClass('btn-comment-and-reopen')
 
-      if closebtn.is(':not(.btn-comment-and-close)')
+      if closebtn.is('.btn-comment-and-close')
         closebtn.removeClass('btn-comment-and-close')
 
       if discardbtn.is(':visible')
diff --git a/app/assets/javascripts/project_new.js.coffee b/app/assets/javascripts/project_new.js.coffee
index fecdb9fc2e7..63dee4ed5d7 100644
--- a/app/assets/javascripts/project_new.js.coffee
+++ b/app/assets/javascripts/project_new.js.coffee
@@ -3,3 +3,16 @@ class @ProjectNew
     $('.project-edit-container').on 'ajax:before', =>
       $('.project-edit-container').hide()
       $('.save-project-loader').show()
+    @toggleSettings()
+    @toggleSettingsOnclick()
+
+
+  toggleSettings: ->
+    checked = $("#project_builds_enabled").prop("checked")
+    if checked
+      $('.builds-feature').show()
+    else
+      $('.builds-feature').hide()
+
+  toggleSettingsOnclick: ->
+    $("#project_builds_enabled").on 'click', @toggleSettings
diff --git a/app/assets/javascripts/todos.js.coffee b/app/assets/javascripts/todos.js.coffee
new file mode 100644
index 00000000000..b6b4bd90e6a
--- /dev/null
+++ b/app/assets/javascripts/todos.js.coffee
@@ -0,0 +1,56 @@
+class @Todos
+  constructor: (@name) ->
+    @clearListeners()
+    @initBtnListeners()
+
+  clearListeners: ->
+    $('.done-todo').off('click')
+    $('.js-todos-mark-all').off('click')
+
+  initBtnListeners: ->
+    $('.done-todo').on('click', @doneClicked)
+    $('.js-todos-mark-all').on('click', @allDoneClicked)
+
+  doneClicked: (e) =>
+    e.preventDefault()
+    e.stopImmediatePropagation()
+
+    $this = $(e.currentTarget)
+    $this.disable()
+
+    $.ajax
+      type: 'POST'
+      url: $this.attr('href')
+      dataType: 'json'
+      data: '_method': 'delete'
+      success: (data) =>
+        @clearDone $this.closest('li')
+        @updateBadges data
+
+  allDoneClicked: (e) =>
+    e.preventDefault()
+    e.stopImmediatePropagation()
+
+    $this = $(e.currentTarget)
+    $this.disable()
+
+    $.ajax
+      type: 'POST'
+      url: $this.attr('href')
+      dataType: 'json'
+      data: '_method': 'delete'
+      success: (data) =>
+        $this.remove()
+        $('.js-todos-list').remove()
+        @updateBadges data
+
+  clearDone: ($row) ->
+    $ul = $row.closest('ul')
+    $row.remove()
+
+    if not $ul.find('li').length
+      $ul.parents('.panel').remove()
+
+  updateBadges: (data) ->
+    $('.todos-pending .badge, .todos-pending-count').text data.count
+    $('.todos-done .badge').text data.done_count
diff --git a/app/assets/javascripts/users_select.js.coffee b/app/assets/javascripts/users_select.js.coffee
index 987c6f4b8d2..3d6452d2f46 100644
--- a/app/assets/javascripts/users_select.js.coffee
+++ b/app/assets/javascripts/users_select.js.coffee
@@ -4,14 +4,16 @@ class @UsersSelect
     @userPath = "/autocomplete/users/:id.json"
 
     $('.js-user-search').each (i, dropdown) =>
-      @projectId = $(dropdown).data('project-id')
-      @showCurrentUser = $(dropdown).data('current-user')
-      showNullUser = $(dropdown).data('null-user')
-      showAnyUser = $(dropdown).data('any-user')
-      firstUser = $(dropdown).data('first-user')
-      selectedId = $(dropdown).data('selected')
-
-      $(dropdown).glDropdown(
+      $dropdown = $(dropdown)
+      @projectId = $dropdown.data('project-id')
+      @showCurrentUser = $dropdown.data('current-user')
+      showNullUser = $dropdown.data('null-user')
+      showAnyUser = $dropdown.data('any-user')
+      firstUser = $dropdown.data('first-user')
+      selectedId = $dropdown.data('selected')
+      defaultLabel = $dropdown.data('default-label')
+
+      $dropdown.glDropdown(
         data: (term, callback) =>
           @users term, (users) =>
             if term.length is 0
@@ -52,10 +54,21 @@ class @UsersSelect
         search:
           fields: ['name', 'username']
         selectable: true
-        fieldName: $(dropdown).data('field-name')
+        fieldName: $dropdown.data('field-name')
+        toggleLabel: (selected) ->
+          if selected && 'id' of selected
+            selected.name
+          else
+            defaultLabel
         clicked: ->
-          if $(dropdown).hasClass "js-filter-submit"
-            $(dropdown).parents('form').submit()
+          page = $('body').data 'page'
+          isIssueIndex = page is 'projects:issues:index'
+          isMRIndex = page is page is 'projects:merge_requests:index'
+
+          if $dropdown.hasClass('js-filter-submit') and (isIssueIndex or isMRIndex)
+            Issues.filterResults $dropdown.closest('form')
+          else if $dropdown.hasClass 'js-filter-submit'
+            $dropdown.closest('form').submit()
         renderRow: (user) ->
           username = if user.username then "@#{user.username}" else ""
           avatar = if user.avatar_url then user.avatar_url else false
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 90c3ce0e84c..c36f29dda0e 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -28,10 +28,6 @@
   border-bottom: 1px solid $border-color;
   color: $gl-gray;
 
-  a {
-    color: $md-link-color;
-  }
-
   &.oneline-block {
     line-height: 42px;
   }
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index fa115a4bf56..657c5f033c7 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -208,3 +208,13 @@
     background-color: #e4e7ed !important;
   }
 }
+
+.btn-loading {
+  &:not(.disabled) .fa {
+    display: none;
+  }
+
+  .fa {
+    margin-right: 5px;
+  }
+}
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 180926b3b97..bc03c2180be 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -8,20 +8,20 @@
 /** COMMON CLASSES **/
 .prepend-top-0 { margin-top: 0; }
 .prepend-top-5 { margin-top: 5px; }
-.prepend-top-10 { margin-top:10px }
+.prepend-top-10 { margin-top: 10px }
 .prepend-top-default { margin-top: $gl-padding !important; }
-.prepend-top-20 { margin-top:20px }
-.prepend-left-10 { margin-left:10px }
+.prepend-top-20 { margin-top: 20px }
+.prepend-left-10 { margin-left: 10px }
 .prepend-left-default { margin-left: $gl-padding; }
-.prepend-left-20 { margin-left:20px }
+.prepend-left-20 { margin-left: 20px }
 .append-right-5 { margin-right: 5px }
-.append-right-10 { margin-right:10px }
+.append-right-10 { margin-right: 10px }
 .append-right-default { margin-right: $gl-padding; }
-.append-right-20 { margin-right:20px }
-.append-bottom-0 { margin-bottom:0 }
-.append-bottom-10 { margin-bottom:10px }
-.append-bottom-15 { margin-bottom:15px }
-.append-bottom-20 { margin-bottom:20px }
+.append-right-20 { margin-right: 20px }
+.append-bottom-0 { margin-bottom: 0 }
+.append-bottom-10 { margin-bottom: 10px }
+.append-bottom-15 { margin-bottom: 15px }
+.append-bottom-20 { margin-bottom: 20px }
 .append-bottom-default { margin-bottom: $gl-padding; }
 .inline { display: inline-block }
 .center { text-align: center }
@@ -134,10 +134,10 @@ p.time {
 
 // Fix issue with notes & lists creating a bunch of bottom borders.
 li.note {
-  img { max-width:100% }
+  img { max-width: 100% }
   .note-title {
     li {
-      border-bottom:none !important;
+      border-bottom: none !important;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 3197ea84460..a48b6c17fa0 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -9,6 +9,12 @@
   border-left: $caret-width-base solid transparent;
 }
 
+.btn-group {
+  .caret {
+    margin-left: 0;
+  }
+}
+
 .dropdown {
   position: relative;
 }
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index c431e2b0df3..40a508c1ebc 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -3,22 +3,11 @@
   vertical-align: top;
 }
 
-@media (min-width: 800px)  {
+@media (min-width: $screen-sm-min)  {
   .issues-filters,
   .issues_bulk_update {
-    select, .select2-container {
-      width: 120px !important;
-      display: inline-block;
-    }
-  }
-}
-
-@media (min-width: 1200px) {
-  .issues-filters,
-  .issues_bulk_update {
-    select, .select2-container {
-      width: 150px !important;
-      display: inline-block;
+    .dropdown-menu-toggle {
+      width: 132px;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index bfec0911b3c..b17c8bcbb1e 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -111,14 +111,17 @@ ul.content-list {
 
   > li {
     border-color: $table-border-color;
-    color: $list-text-color;
     font-size: $list-font-size;
+    color: $list-text-color;
 
     .title {
-      color: $list-title-color;
       font-weight: 600;
     }
 
+    a {
+      color: $gl-dark-link-color;
+    }
+
     .description {
       p {
         @include str-truncated;
@@ -141,6 +144,10 @@ ul.content-list {
   }
 }
 
+.panel > .content-list > li {
+  padding: $gl-padding-top $gl-padding;
+}
+
 ul.controls {
   padding-top: 1px;
   float: right;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 5e3546bc6ff..be626678bd7 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -1,45 +1,75 @@
-$row-hover: #f4f8fe;
-$gl-text-color: #54565b;
-$gl-text-green: #4a2;
-$gl-text-red: #d12f19;
-$gl-text-orange: #d90;
-$gl-header-color: #323232;
-$gl-link-color: #333c48;
-$md-text-color: #444;
-$md-link-color: #3084bb;
-$progress-color: #c0392b;
-$gl-font-size: 15px;
-$list-font-size: 15px;
+/*
+ * Layout
+ */
 $sidebar_collapsed_width: 62px;
 $sidebar_width: 230px;
 $gutter_collapsed_width: 62px;
 $gutter_width: 290px;
 $gutter_inner_width: 258px;
-$avatar_radius: 50%;
+
+/*
+ * UI elements
+ */
+$border-color:       #efeff1;
+$table-border-color: #eef0f2;
+$background-color:   #faf9f9;
+
+/*
+ * Text
+ */
+$gl-font-size:         15px;
+$gl-title-color:       #333;
+$gl-text-color:        #555;
+$gl-text-green:        #4a2;
+$gl-text-red:          #d12f19;
+$gl-text-orange:       #d90;
+$gl-link-color:        #3084bb;
+$gl-dark-link-color:   #333;
+$gl-placeholder-color: #8f8f8f;
+$gl-gray:              $gl-text-color;
+$gl-header-color:      $gl-title-color;
+
+/*
+ * Lists
+ */
+$list-font-size:   $gl-font-size;
+$list-title-color: $gl-title-color;
+$list-text-color:  $gl-text-color;
+
+/*
+ * Markdown
+ */
+$md-text-color: $gl-text-color;
+$md-link-color: $gl-link-color;
+
+/*
+ * Code
+ */
 $code_font_size: 13px;
 $code_line_height: 1.5;
-$border-color: #efeff1;
-$table-border-color: #eef0f2;
-$background-color: #faf9f9;
-$header-height: 58px;
-$fixed-layout-width: 1280px;
-$gl-gray: #5a5a5a;
+
+/*
+ * Padding
+ */
 $gl-padding: 16px;
 $gl-btn-padding: 10px;
 $gl-vert-padding: 6px;
-$gl-padding-top:10px;
+$gl-padding-top: 10px;
+
+/*
+ * Misc
+ */
+$row-hover: #f4f8fe;
+$progress-color: #c0392b;
+$avatar_radius: 50%;
+$header-height: 58px;
+$fixed-layout-width: 1280px;
 $gl-avatar-size: 40px;
-$secondary-text: #7f8fa4;
 $error-exclamation-point: #e62958;
 $border-radius-default: 3px;
-$list-title-color: #333;
-$list-text-color: #555;
-
 $btn-transparent-color: #8f8f8f;
-
 $ssh-key-icon-color: #8f8f8f;
 $ssh-key-icon-size: 18px;
-
 $provider-btn-group-border: #e5e5e5;
 $provider-btn-not-active-color: #4688f1;
 
diff --git a/app/assets/stylesheets/pages/appearances.scss b/app/assets/stylesheets/pages/appearances.scss
index e2070f17c3b..878f44116ba 100644
--- a/app/assets/stylesheets/pages/appearances.scss
+++ b/app/assets/stylesheets/pages/appearances.scss
@@ -4,7 +4,7 @@
 }
 
 .appearance-light-logo-preview {
-  background-color:  $background-color;
+  background-color: $background-color;
   max-width: 72px;
   padding: 10px;
   margin-bottom: 10px;
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index d57be1b2daa..33b3c7558ed 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -55,7 +55,7 @@ li.commit {
     }
 
     .commit-row-message {
-      color: $gl-link-color;
+      color: $gl-dark-link-color;
 
       &:hover {
         text-decoration: underline;
diff --git a/app/assets/stylesheets/pages/dashboard.scss b/app/assets/stylesheets/pages/dashboard.scss
index 88639399148..cf7567513ec 100644
--- a/app/assets/stylesheets/pages/dashboard.scss
+++ b/app/assets/stylesheets/pages/dashboard.scss
@@ -11,15 +11,15 @@
 }
 
 .dashboard-search-filter {
-  padding:5px;
+  padding: 5px;
 
   .search-text-input {
-    float:left;
+    float: left;
     @extend .col-md-2;
   }
   .btn {
     margin-left: 5px;
-    float:left;
+    float: left;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index db06b8288c2..d5862a11aca 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -1,7 +1,7 @@
 // Common
 .diff-file {
   border: 1px solid $border-color;
-  border-top: none;
+  margin-bottom: $gl-padding;
 
   .diff-header {
     position: relative;
@@ -361,3 +361,11 @@
     border-color: $border;
   }
 }
+
+.files {
+  margin-top: -1px;
+
+  .diff-file:last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index e7da0a2f689..84eefd01cfe 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -6,7 +6,7 @@
   font-size: $gl-font-size;
   padding: $gl-padding-top 0 $gl-padding-top ($gl-avatar-size + $gl-padding-top);
   border-bottom: 1px solid $table-border-color;
-  color: #7f8fa4;
+  color: $list-text-color;
 
   &.event-inline {
     .avatar {
@@ -21,7 +21,7 @@
   }
 
   a {
-    color: #4c4e54;
+    color: $gl-dark-link-color;
   }
 
   .avatar {
@@ -31,10 +31,7 @@
   .event-title {
     @include str-truncated(calc(100% - 174px));
     font-weight: 600;
-
-    .author_name {
-      color: #333;
-    }
+    color: $list-text-color;
   }
 
   .event-body {
@@ -94,7 +91,7 @@
     }
   }
 
-  &:last-child { border:none }
+  &:last-child { border: none }
 
   .event_commits {
     li {
@@ -138,7 +135,7 @@
     @include str-truncated(100%);
     padding: 5px 0;
     font-size: 13px;
-    float:left;
+    float: left;
     margin-right: -150px;
     padding-right: 150px;
     line-height: 20px;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index faa2ebfda78..2760af8a48a 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -1,34 +1,3 @@
-@media (max-width: $screen-sm-max) {
-  .issuable-affix {
-    margin-top: 20px;
-  }
-}
-
-@media (max-width: $screen-md-max) {
-  .issuable-affix {
-    position: static;
-  }
-}
-
-@media (min-width: $screen-md-max) {
-  .issuable-affix {
-    &.affix-top {
-      position: static;
-    }
-
-    &.affix {
-      position: fixed;
-      top: 70px;
-      margin-right: 35px;
-
-      &.no-affix {
-        position: relative;
-        top: 0;
-      }
-    }
-  }
-}
-
 .issuable-details {
   section {
     .issuable-discussion {
@@ -54,20 +23,25 @@
       padding: 6px 10px;
     }
   }
+
+  &.has-labels {
+    margin-bottom: -5px;
+  }
 }
 
 .issuable-sidebar {
   .block {
     @include clearfix;
-    padding:  $gl-padding 0;
+    padding: $gl-padding 0;
     border-bottom: 1px solid $border-gray-light;
     // This prevents the mess when resizing the sidebar
     // of elements repositioning themselves..
     width: $gutter_inner_width;
     // --
 
-    &:first-child {
-      padding-top: 5px;
+    &.issuable-sidebar-header {
+      padding-top: 0;
+      padding-bottom: 10px;
     }
 
     &:last-child {
@@ -75,7 +49,6 @@
     }
 
     span {
-      margin-top: 7px;
       display: inline-block;
     }
 
@@ -84,7 +57,7 @@
     }
 
     .issuable-count {
-
+      margin-top: 7px;
     }
 
     .gutter-toggle {
@@ -99,19 +72,19 @@
 
   .title {
     color: $gl-text-color;
-    margin-bottom: 8px;
+    margin-bottom: 10px;
+    line-height: 1;
 
     .avatar {
       margin-left: 0;
     }
 
-    label {
-      font-weight: normal;
-      margin-right: 4px;
-    }
-
     .edit-link {
       color: $gl-gray;
+
+      &:hover {
+        color: $md-link-color;
+      }
     }
   }
 
@@ -144,11 +117,6 @@
   .btn-clipboard {
     color: $gl-gray;
   }
-
-  .participants .avatar {
-    margin-top: 6px;
-    margin-right: 2px;
-  }
 }
 
 .right-sidebar {
@@ -163,8 +131,12 @@
   &.right-sidebar-expanded {
     width: $gutter_width;
 
-    hr {
-      display: none;
+    .value {
+      line-height: 1;
+    }
+
+    .bold {
+      font-weight: 600;
     }
 
     .sidebar-collapsed-icon {
@@ -172,8 +144,23 @@
     }
 
     .gutter-toggle {
+      margin-top: 7px;
       border-left: 1px solid $border-gray-light;
     }
+
+    .assignee .avatar {
+      float: left;
+      margin-right: 10px;
+      margin-bottom: 0;
+      margin-left: 0;
+    }
+
+    .username {
+      display: block;
+      margin-top: 4px;
+      font-size: 13px;
+      font-weight: normal;
+    }
   }
 
   .subscribe-button {
@@ -193,14 +180,6 @@
     width: $sidebar_collapsed_width;
     padding-top: 0;
 
-    hr {
-      margin: 0;
-      color: $gray-normal;
-      border-color: $gray-normal;
-      width: 62px;
-      margin-left: -20px
-    }
-
     .block {
       width: $sidebar_collapsed_width - 1px;
       margin-left: -19px;
@@ -209,12 +188,18 @@
       overflow: hidden;
     }
 
+    .participants {
+      border-bottom: 1px solid $border-gray-light;
+    }
+
     .hide-collapsed {
       display: none;
     }
 
     .gutter-toggle {
-      margin-left: -36px;
+      width: 100%;
+      margin-left: 0;
+      padding-left: 25px;
     }
 
     .sidebar-collapsed-icon {
@@ -229,6 +214,10 @@
         margin-top: 0;
       }
 
+      .author {
+        display: none;
+      }
+
       .btn-clipboard {
         border: none;
 
@@ -241,6 +230,11 @@
         }
       }
     }
+
+    .sidebar-collapsed-user {
+      padding-bottom: 0;
+      margin-bottom: 10px;
+    }
   }
 
   .btn {
@@ -251,6 +245,13 @@
       border: 1px solid $border-gray-dark;
     }
   }
+
+  a:not(.btn) {
+    &:hover {
+      color: $md-link-color;
+      text-decoration: none;
+    }
+  }
 }
 
 .btn-default.gutter-toggle {
@@ -262,3 +263,37 @@
     color: $gray-darkest;
   }
 }
+
+.edited-text {
+  color: $gray-darkest;
+
+  .author_link {
+    color: $gray-darkest;
+  }
+}
+
+.participants-list {
+  margin: -5px -5px;
+}
+
+.participants-author {
+  display: inline-block;
+  padding: 5px 5px;
+
+  .author_link {
+    display: block;
+  }
+
+  .avatar.avatar-inline {
+    margin: 0;
+  }
+}
+
+.participants-more {
+  margin-top: 5px;
+  margin-left: 5px;
+
+  a {
+    color: #8c8c8c;
+  }
+}
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 73718ff511a..6a1d28590c2 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -3,7 +3,7 @@
     padding: 10px $gl-padding;
     position: relative;
 
-    .issue-title {
+    .title {
       margin-bottom: 2px;
     }
 
@@ -49,7 +49,7 @@ form.edit-issue {
   margin: 0;
 }
 
-.merge-requests-title {
+.merge-requests-title, .related-branches-title {
   font-size: 16px;
   font-weight: 600;
 }
@@ -130,14 +130,14 @@ form.edit-issue {
 }
 
 .issue-closed-by-widget {
-  color: $secondary-text;
+  color: $gl-text-color;
   margin-left: 52px;
 }
 
 .editor-details {
   display: block;
-  
+
   @media (min-width: $screen-sm-min) {
     display: inline-block;
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index d9c47881265..bc41f7d306f 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -28,7 +28,7 @@
 
     img {
       max-width: 100%;
-      margin-bottom:  30px;
+      margin-bottom: 30px;
     }
 
     a {
@@ -85,7 +85,7 @@
 
     &.middle {
       border-top: 0;
-      margin-bottom:0;
+      margin-bottom: 0;
       @include border-radius(0);
     }
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 969c79a9be9..d408853cc80 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -3,9 +3,9 @@
  */
 
 @-webkit-keyframes targe3-note {
-  from { background:#fffff0; }
-  50% { background:#ffffd3; }
-  to { background:#fffff0; }
+  from { background: #fffff0; }
+  50% { background: #ffffd3; }
+  to { background: #fffff0; }
 }
 
 ul.notes {
@@ -93,12 +93,12 @@ ul.notes {
   .discussion {
     overflow: hidden;
     display: block;
-    position:relative;
+    position: relative;
   }
 
   .note {
     display: block;
-    position:relative;
+    position: relative;
 
     .note-body {
       overflow: auto;
@@ -108,6 +108,13 @@ ul.notes {
         word-wrap: break-word;
         @include md-typography;
 
+        // On diffs code should wrap nicely and not overflow
+        pre {
+          code {
+            white-space: pre-wrap;
+          }
+        }
+
         // Reset ul style types since we're nested inside a ul already
         & > ul {
           list-style-type: disc;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 3fe2c9a3346..82c5069638d 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -33,6 +33,13 @@
     .project-settings-dropdown {
       margin-left: 10px;
       display: inline-block;
+
+      .dropdown-menu {
+        left: auto;
+        width: auto;
+        right: 0px;
+        max-width: 240px;
+      }
     }
   }
 
@@ -286,11 +293,11 @@ table.table.protected-branches-list tr.no-border {
   padding-bottom: 4px;
 
   ul.nav {
-    display:inline-block;
+    display: inline-block;
   }
 
   .nav li {
-    display:inline;
+    display: inline;
   }
 
   .nav > li > a {
@@ -303,11 +310,11 @@ table.table.protected-branches-list tr.no-border {
   }
 
   li {
-    display:inline;
+    display: inline;
   }
 
   a {
-    float:left;
+    float: left;
     font-size: 17px;
   }
 
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index 27970eba159..f983e9829e6 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -14,25 +14,8 @@
 }
 
 .todo-item {
-  font-size: $gl-font-size;
-  padding-left: $gl-avatar-size + $gl-padding-top;
-  color: $secondary-text;
-
-  a {
-    color: #4c4e54;
-  }
-
-  .avatar {
-    margin-left: -($gl-avatar-size + $gl-padding-top);
-  }
-
   .todo-title {
     @include str-truncated(calc(100% - 174px));
-    font-weight: 600;
-
-    .author-name {
-      color: #333;
-    }
   }
 
   .todo-body {
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index ef63b010600..25b5e95583e 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -41,12 +41,12 @@
       vertical-align: middle;
 
       i, a {
-        color: $gl-link-color;
+        color: $gl-dark-link-color;
       }
 
       img {
         position: relative;
-        top:-1px;
+        top: -1px;
       }
     }