Merge branch 'master' of gitlab.com:gitlab-org/gitlab-ce into sidebar-expand-collapse

21 files changed, 283 insertions, 140 deletions

diff --git a/app/assets/javascripts/ci/build.coffee b/app/assets/javascripts/ci/build.coffee
index fca0c3bae5c..98d05e41273 100644
--- a/app/assets/javascripts/ci/build.coffee
+++ b/app/assets/javascripts/ci/build.coffee
@@ -28,12 +28,15 @@ class CiBuild
       #
       CiBuild.interval = setInterval =>
         if window.location.href.split("#").first() is build_url
+          last_state = @state
           $.ajax
             url: build_url + "/trace.json?state=" + encodeURIComponent(@state)
             dataType: "json"
             success: (log) =>
-              @state = log.state
-              if log.status is "running"
+              return unless last_state is @state
+
+              if log.state and log.status is "running"
+                @state = log.state
                 if log.append
                   $('.fa-refresh').before log.html
                 else
diff --git a/app/assets/javascripts/dispatcher.js.coffee b/app/assets/javascripts/dispatcher.js.coffee
index f91aa3c5ad7..a3185f87640 100644
--- a/app/assets/javascripts/dispatcher.js.coffee
+++ b/app/assets/javascripts/dispatcher.js.coffee
@@ -16,7 +16,6 @@ class Dispatcher
     shortcut_handler = null
     switch page
       when 'projects:issues:index'
-        Issues.init()
         Issuable.init()
         shortcut_handler = new ShortcutsNavigation()
       when 'projects:issues:show'
@@ -119,7 +118,7 @@ class Dispatcher
             new UsersSelect()
           when 'projects'
             new NamespaceSelect()
-      when 'dashboard'
+      when 'dashboard', 'root'
         shortcut_handler = new ShortcutsDashboardNavigation()
       when 'profiles'
         new Profile()
diff --git a/app/assets/javascripts/issuable.js.coffee b/app/assets/javascripts/issuable.js.coffee
index afffed63ac5..6504e481102 100644
--- a/app/assets/javascripts/issuable.js.coffee
+++ b/app/assets/javascripts/issuable.js.coffee
@@ -1,7 +1,11 @@
+issuable_created = false
 @Issuable =
   init: ->
-    Issuable.initTemplates()
-    Issuable.initSearch()
+    unless issuable_created
+      issuable_created = true
+      Issuable.initTemplates()
+      Issuable.initSearch()
+      Issuable.initChecks()
 
   initTemplates: ->
     Issuable.labelRow = _.template(
@@ -19,7 +23,16 @@
       .on 'keyup', ->
         clearTimeout(@timer)
         @timer = setTimeout( ->
-          Issuable.filterResults $('#issue_search_form')
+          $search = $('#issue_search')
+          $form = $('.js-filter-form')
+          $input = $("input[name='#{$search.attr('name')}']", $form)
+
+          if $input.length is 0
+            $form.append "<input type='hidden' name='#{$search.attr('name')}' value='#{_.escape($search.val())}'/>"
+          else
+            $input.val $search.val()
+
+          Issuable.filterResults $form
         , 500)
 
   toggleLabelFilters: ->
@@ -59,15 +72,22 @@
       dataType: "json"
 
   reload: ->
-    if Issues.created
-      Issues.initChecks()
+    if Issuable.created
+      Issuable.initChecks()
 
     $('#filter_issue_search').val($('#issue_search').val())
 
+  initChecks: ->
+    $('.check_all_issues').on 'click', ->
+      $('.selected_issue').prop('checked', @checked)
+      Issuable.checkChanged()
+
+    $('.selected_issue').on 'change', Issuable.checkChanged
+
   updateStateFilters: ->
-    stateFilters =  $('.issues-state-filters')
+    stateFilters =  $('.issues-state-filters, .dropdown-menu-sort')
     newParams = {}
-    paramKeys = ['author_id', 'milestone_title', 'assignee_id', 'issue_search']
+    paramKeys = ['author_id', 'milestone_title', 'assignee_id', 'issue_search', 'issue_search']
 
     for paramKey in paramKeys
       newParams[paramKey] = gl.utils.getParameterValues(paramKey)[0] or ''
@@ -82,3 +102,17 @@
         else
           newUrl = gl.utils.mergeUrlParams(newParams, initialUrl)
         $(this).attr 'href', newUrl
+
+  checkChanged: ->
+    checked_issues = $('.selected_issue:checked')
+    if checked_issues.length > 0
+      ids = $.map checked_issues, (value) ->
+        $(value).data('id')
+
+      $('#update_issues_ids').val ids
+      $('.issues-other-filters').hide()
+      $('.issues_bulk_update').show()
+    else
+      $('#update_issues_ids').val []
+      $('.issues_bulk_update').hide()
+      $('.issues-other-filters').show()
diff --git a/app/assets/javascripts/issues.js.coffee b/app/assets/javascripts/issues.js.coffee
deleted file mode 100644
index 3330e6c68ad..00000000000
--- a/app/assets/javascripts/issues.js.coffee
+++ /dev/null
@@ -1,38 +0,0 @@
-@Issues =
-  init: ->
-    Issues.created = true
-    Issues.initChecks()
-
-    $("body").on "ajax:success", ".close_issue, .reopen_issue", ->
-      t = $(this)
-      totalIssues = undefined
-      reopen = t.hasClass("reopen_issue")
-      $(".issue_counter").each ->
-        issue = $(this)
-        totalIssues = parseInt($(this).html(), 10)
-        if reopen and issue.closest(".main_menu").length
-          $(this).html totalIssues + 1
-        else
-          $(this).html totalIssues - 1
-
-  initChecks: ->
-    $(".check_all_issues").click ->
-      $(".selected_issue").prop("checked", @checked)
-      Issues.checkChanged()
-
-    $(".selected_issue").bind "change", Issues.checkChanged
-
-  checkChanged: ->
-    checked_issues = $(".selected_issue:checked")
-    if checked_issues.length > 0
-      ids = []
-      $.each checked_issues, (index, value) ->
-        ids.push $(value).attr("data-id")
-
-      $("#update_issues_ids").val ids
-      $(".issues-other-filters").hide()
-      $(".issues_bulk_update").show()
-    else
-      $("#update_issues_ids").val []
-      $(".issues_bulk_update").hide()
-      $(".issues-other-filters").show()
diff --git a/app/assets/javascripts/lib/url_utility.js.coffee b/app/assets/javascripts/lib/url_utility.js.coffee
index 6a00932c028..e8085e1c2e4 100644
--- a/app/assets/javascripts/lib/url_utility.js.coffee
+++ b/app/assets/javascripts/lib/url_utility.js.coffee
@@ -26,10 +26,19 @@
     newUrl = decodeURIComponent(url)
     for paramName, paramValue of params
       pattern = new RegExp "\\b(#{paramName}=).*?(&|$)"
-      if url.search(pattern) >= 0
+      if not paramValue?
+        newUrl = newUrl.replace pattern, ''
+      else if url.search(pattern) isnt -1
         newUrl = newUrl.replace pattern, "$1#{paramValue}$2"
       else
         newUrl = "#{newUrl}#{(if newUrl.indexOf('?') > 0 then '&' else '?')}#{paramName}=#{paramValue}"
+
+    # Remove a trailing ampersand
+    lastChar = newUrl[newUrl.length - 1]
+
+    if lastChar is '&'
+        newUrl = newUrl.slice 0, -1
+
     newUrl
 
   # removes parameter query string from url. returns the modified url
diff --git a/app/assets/javascripts/merge_request_tabs.js.coffee b/app/assets/javascripts/merge_request_tabs.js.coffee
index 372732d0aac..49a4727205a 100644
--- a/app/assets/javascripts/merge_request_tabs.js.coffee
+++ b/app/assets/javascripts/merge_request_tabs.js.coffee
@@ -75,6 +75,9 @@ class @MergeRequestTabs
       @loadDiff($target.attr('href'))
       if bp? and bp.getBreakpointSize() isnt 'lg'
         @shrinkView()
+
+      navBarHeight = $('.navbar-gitlab').outerHeight()
+      $.scrollTo(".merge-request-details .merge-request-tabs", offset: -navBarHeight)
     else if action == 'builds'
       @loadBuilds($target.attr('href'))
       @expandView()
diff --git a/app/assets/javascripts/merge_request_widget.js.coffee b/app/assets/javascripts/merge_request_widget.js.coffee
index b6d590f681c..d16f44d52f8 100644
--- a/app/assets/javascripts/merge_request_widget.js.coffee
+++ b/app/assets/javascripts/merge_request_widget.js.coffee
@@ -106,6 +106,7 @@ class @MergeRequestWidget
         @firstCICheck = false
 
   showCIStatus: (state) ->
+    return if not state?
     $('.ci_widget').hide()
     allowed_states = ["failed", "canceled", "running", "pending", "success", "skipped", "not_found"]
     if state in allowed_states
@@ -126,6 +127,6 @@ class @MergeRequestWidget
     $('.ci_widget:visible .ci-coverage').text(text)
 
   setMergeButtonClass: (css_class) ->
-    $('.js-merge-button')
+    $('.js-merge-button,.accept-action .dropdown-toggle')
       .removeClass('btn-danger btn-warning btn-create')
       .addClass(css_class)
diff --git a/app/assets/javascripts/shortcuts_dashboard_navigation.js.coffee b/app/assets/javascripts/shortcuts_dashboard_navigation.js.coffee
index 4a05bdccdb3..cca2b8a1fcc 100644
--- a/app/assets/javascripts/shortcuts_dashboard_navigation.js.coffee
+++ b/app/assets/javascripts/shortcuts_dashboard_navigation.js.coffee
@@ -3,10 +3,10 @@
 class @ShortcutsDashboardNavigation extends Shortcuts
  constructor: ->
    super()
-   Mousetrap.bind('g a', -> ShortcutsDashboardNavigation.findAndFollowLink('.shortcuts-activity'))
-   Mousetrap.bind('g i', -> ShortcutsDashboardNavigation.findAndFollowLink('.shortcuts-issues'))
-   Mousetrap.bind('g m', -> ShortcutsDashboardNavigation.findAndFollowLink('.shortcuts-merge_requests'))
-   Mousetrap.bind('g p', -> ShortcutsDashboardNavigation.findAndFollowLink('.shortcuts-projects'))
+   Mousetrap.bind('g a', -> ShortcutsDashboardNavigation.findAndFollowLink('.dashboard-shortcuts-activity'))
+   Mousetrap.bind('g i', -> ShortcutsDashboardNavigation.findAndFollowLink('.dashboard-shortcuts-issues'))
+   Mousetrap.bind('g m', -> ShortcutsDashboardNavigation.findAndFollowLink('.dashboard-shortcuts-merge_requests'))
+   Mousetrap.bind('g p', -> ShortcutsDashboardNavigation.findAndFollowLink('.dashboard-shortcuts-projects'))
 
  @findAndFollowLink: (selector) ->
    link = $(selector).attr('href')
diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index f5ce70b606b..bb8d71fbae8 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -45,6 +45,7 @@
   &.s32 { font-size: 20px; line-height: 32px; }
   &.s40 { font-size: 16px; line-height: 40px; }
   &.s60 { font-size: 32px; line-height: 60px; }
+  &.s70 { font-size: 34px; line-height: 70px; }
   &.s90 { font-size: 36px; line-height: 90px; }
   &.s110 { font-size: 40px; line-height: 112px; font-weight: 300; }
   &.s140 { font-size: 72px; line-height: 140px; }
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 434a26d57c6..6981f834d30 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -24,8 +24,8 @@
   background-color: $background-color;
   padding: $gl-padding;
   margin-bottom: 0;
-  border-top: 1px solid $border-color;
-  border-bottom: 1px solid $border-color;
+  border-top: 1px solid $white-dark;
+  border-bottom: 1px solid $white-dark;
   color: $gl-gray;
 
   &.oneline-block {
@@ -110,9 +110,9 @@
   .cover-title {
     color: $gl-header-color;
     margin: 0;
-    font-size: 23px;
+    font-size: 24px;
     font-weight: normal;
-    margin: 16px 0 5px;
+    margin-bottom: 5px;
     color: #4c4e54;
     font-size: 23px;
     line-height: 1.1;
@@ -137,7 +137,6 @@
   }
 
   .cover-desc {
-    padding: 0 $gl-padding 3px;
     color: $gl-text-color;
 
     &.username:last-child {
@@ -205,7 +204,7 @@
 
 .content-block {
   padding: $gl-padding 0;
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid $white-dark;
 
   &.oneline-block {
     line-height: 36px;
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 4bf3a050403..79a37d87e82 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -162,6 +162,10 @@
   }
 }
 
+.dropdown-menu-full-width {
+  width: 100%;
+}
+
 .dropdown-menu-paging {
   .dropdown-page-two,
   .dropdown-menu-back {
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 8c96c7a9c31..71a9f79be3e 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -5,6 +5,10 @@
 .file-holder {
   border: 1px solid $border-color;
 
+  &.file-holder-no-border {
+    border: 0;
+  }
+
   &.readme-holder {
     margin: $gl-padding-top 0;
   }
@@ -23,8 +27,17 @@
     word-wrap: break-word;
     border-radius: 3px 3px 0 0;
 
+    &.file-title-clear {
+      padding-left: 0;
+      padding-right: 0;
+      background-color: transparent;
+
+      .file-actions {
+        right: 0;
+      }
+    }
+
     .file-actions {
-      float: right;
       position: absolute;
       top: 5px;
       right: 15px;
diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss
index 33cbee85987..bd531f8376b 100644
--- a/app/assets/stylesheets/framework/mobile.scss
+++ b/app/assets/stylesheets/framework/mobile.scss
@@ -48,10 +48,6 @@
       display: block;
     }
 
-    .project-home-desc {
-      font-size: 21px;
-    }
-
     .project-repo-buttons,
     .git-clone-holder {
       display: none;
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index a81fcb1c6b3..2ae6c61d524 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -119,7 +119,7 @@
     }
 
     input {
-      height: 34px;
+      height: 35px;
       display: inline-block;
       position: relative;
       top: 2px;
@@ -196,7 +196,7 @@
   position: fixed;
   top: $header-height;
   width: 100%;
-  z-index: 1;
+  z-index: 11;
   background: $background-color;
   border-bottom: 1px solid $border-color;
   transition-duration: .3s;
@@ -238,6 +238,10 @@
       @media (max-width: $screen-xs-min) {
         margin-left: 0;
       }
+
+      li.active {
+        font-weight: bold;
+      }
     }
   }
 
@@ -246,6 +250,11 @@
     height: 51px;
     white-space: nowrap;
     overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    &::-webkit-scrollbar {
+      display: none;
+    }
 
     li {
 
@@ -279,4 +288,8 @@
       margin-top: 96px;
     }
   }
+
+  .right-sidebar {
+    top: ($header-height * 2) + 2;
+  }
 }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index c5a4dbe372c..c7784e15844 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -119,8 +119,8 @@ $border-white-light: #f1f2f4;
 $border-white-normal: #d6dae2;
 $border-white-dark: #c6cacf;
 
-$border-gray-light: rgba(0, 0, 0, 0.06);
-$border-gray-normal: rgba(0, 0, 0, 0.10);;
+$border-gray-light: #dcdcdc;
+$border-gray-normal: rgba(0, 0, 0, 0.10);
 $border-gray-dark: #c6cacf;
 
 $border-green-light: #2faa60;
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index fc9db97132d..4e35ca329e4 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -40,11 +40,6 @@
   }
 }
 
-.issue-search-form {
-  margin: 0;
-  height: 24px;
-}
-
 form.edit-issue {
   margin: 0;
 }
@@ -96,8 +91,3 @@ form.edit-issue {
 .issue-form .select2-container {
   width: 250px !important;
 }
-
-.issue-closed-by-widget {
-  color: $gl-text-color;
-  margin-left: 52px;
-}
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 843379a3f54..8040dd0a1d8 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -134,14 +134,6 @@
   }
 }
 
-.change-username-title {
-  color: $gl-warning;
-}
-
-.remove-account-title {
-  color: $gl-danger;
-}
-
 .provider-btn-group {
   display: inline-block;
   margin-right: 10px;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index b4702b31182..edef336481d 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -10,7 +10,7 @@
   margin-bottom: 0;
 }
 .new_project,
-.edit_project {
+.edit-project {
   fieldset.features {
     .control-label {
       font-weight: normal;
@@ -26,8 +26,13 @@
 }
 
 .project-home-panel {
-  padding-bottom: 40px;
-  border-bottom: 1px solid $border-color;
+  background: $white-light;
+  text-align: left;
+  padding: 24px 0;
+
+  .container-fluid {
+    position: relative;
+  }
 
   .cover-controls {
     .project-settings-dropdown {
@@ -43,21 +48,55 @@
     }
   }
 
-  .project-identicon-holder {
-    margin-bottom: 16px;
+  .cover-title {
+    margin-bottom: 0;
+  }
+
+  .project-image-container {
+    @include make-sm-column(1);
+    max-width: 86px;
+    min-width: 86px;
+    padding-right: 0;
+    margin: 11px 0;
 
-    .avatar, .identicon {
-      margin: 0 auto;
-      float: none;
+    @media (max-width: $screen-md-max) {
+      padding-left: 0;
+      margin: 0 0 10px;
+      max-width: none;
+      min-width: none;
+
+      .avatar.s70 {
+        margin: auto;
+      }
     }
+  }
 
-    .identicon {
-      @include border-radius(50%);
+  .project-info {
+    @include make-sm-column(10);
+
+    h1 {
+      font-size: 24px;
+      font-weight: normal;
+      margin: 0;
+    }
+
+    .project-home-desc {
+      p {
+        margin: 0;
+      }
     }
   }
 
+  .identicon {
+    float: left;
+    @include border-radius(50%);
+  }
+
+  .avatar {
+    float: none;
+  }
+
   .notifications-btn {
-    margin-top: -28px;
 
     .fa-bell {
       margin-right: 6px;
@@ -69,28 +108,45 @@
   }
 
   .project-repo-buttons {
-    margin-top: 20px;
-    margin-bottom: 0;
+    font-size: 0;
 
-    .count-buttons {
-      display: block;
-      margin-bottom: 20px;
-    }
+    .btn {
+      @include btn-gray;
+      padding: 3px 10px;
+      text-transform: none;
+      background-color: $background-color;
 
-    .clone-row {
-      .split-repo-buttons,
-      .project-clone-holder {
-        display: inline-block;
+      .fa {
+        color: $layout-link-gray;
       }
 
-      .split-repo-buttons {
-        margin: 0 12px;
+      .fa-caret-down {
+        margin-left: 3px;
       }
     }
 
-    .btn {
-      @include btn-gray;
-      text-transform: none;
+    .btn-group:not(:first-child):not(:last-child) > .btn {
+      border-top-right-radius: 3px;
+      border-bottom-right-radius: 3px;
+    }
+
+    form {
+      margin-left: 10px;
+    }
+
+    .count-buttons {
+      display: inline-block;
+      vertical-align: top;
+      margin-top: 16px;
+    }
+
+    .project-clone-holder {
+      display: inline-block;
+      margin-top: 16px;
+
+      input {
+        height: 29px;
+      }
     }
 
     .count-with-arrow {
@@ -140,14 +196,14 @@
         line-height: 13px;
         padding: $gl-vert-padding $gl-padding;
         letter-spacing: .4px;
-        padding: 10px 14px;
+        padding: 7px 14px;
         text-align: center;
         vertical-align: middle;
         touch-action: manipulation;
         cursor: pointer;
         background-image: none;
         white-space: nowrap;
-        margin: 0 11px 0 4px;
+        margin: 0 10px 0 4px;
 
         a {
           color: inherit;
@@ -159,6 +215,30 @@
       }
     }
   }
+
+  .project-right-buttons {
+    position: absolute;
+    right: 16px;
+    bottom: 0;
+
+    .btn {
+      padding: 3px 10px;
+      background-color: $background-color;
+    }
+
+    @media (max-width: 1304px) {
+      top: 0;
+    }
+  }
+
+  @media (max-width: $screen-md-max) {
+    text-align: center;
+
+    .project-info,
+    .project-image-container {
+      width: 100%;
+    }
+  }
 }
 
 .split-one {
@@ -289,11 +369,11 @@ a.deploy-project-label {
 }
 
 .project-stats {
-  text-align: center;
   margin-top: $gl-padding;
   margin-bottom: 0;
-  padding-top: 10px;
-  padding-bottom: 4px;
+  padding: 16px 0;
+  background-color: $white-light;
+  font-size: 0;
 
   ul.nav {
     display: inline-block;
@@ -304,12 +384,11 @@ a.deploy-project-label {
   }
 
   .nav > li > a {
-    @include btn-default;
-    @include btn-gray;
-
     background-color: transparent;
-    border: 1px solid #f7f8fa;
-    margin-left: 12px;
+    margin-right: 12px;
+    padding: 0 10px;
+    font-size: 15px;
+    color: $notes-light-color;
   }
 
   li {
@@ -329,6 +408,10 @@ a.deploy-project-label {
       background-color: #f0f2f5;
     }
   }
+
+  &.row-content-block.second-block {
+    margin-top: 0;
+  }
 }
 
 pre.light-well {
@@ -446,9 +529,14 @@ pre.light-well {
   border-top: 0;
 
   .edit-project-readme {
-    z-index: 100;
+    z-index: 2;
     position: relative;
   }
+
+  .wiki h1 {
+    border-bottom: none;
+    padding: 0;
+  }
 }
 
 .git-clone-holder {
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 3fb70085713..2e8f356298d 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -12,3 +12,11 @@
   border: 1px solid $warning-message-border;
   border-radius: $border-radius-base;
 }
+
+.warning-title {
+  color: $gl-warning;
+}
+
+.danger-title {
+  color: $gl-danger;
+}
diff --git a/app/assets/stylesheets/pages/snippets.scss b/app/assets/stylesheets/pages/snippets.scss
index 639d639d5b0..2aa939b7dc3 100644
--- a/app/assets/stylesheets/pages/snippets.scss
+++ b/app/assets/stylesheets/pages/snippets.scss
@@ -16,19 +16,6 @@
   }
 }
 
-.snippet-box {
-  @include border-radius(2px);
-
-  display: block;
-  float: left;
-  padding: 0 $gl-padding;
-  font-weight: normal;
-  margin-right: 10px;
-  font-size: $gl-font-size;
-  border: 1px solid;
-  line-height: 32px;
-}
-
 .markdown-snippet-copy {
   position: fixed;
   top: -10px;
@@ -36,3 +23,34 @@
   max-height: 0;
   max-width: 0;
 }
+
+.file-holder.snippet-file-content {
+  padding-bottom: $gl-padding;
+  border-bottom: 1px solid $border-color;
+
+  .file-title {
+    padding-top: $gl-padding;
+    padding-bottom: $gl-padding;
+  }
+
+  .file-actions {
+    top: 12px;
+  }
+
+  .file-content {
+    border-left: 1px solid $border-color;
+    border-right: 1px solid $border-color;
+    border-bottom: 1px solid $border-color;
+  }
+}
+
+.snippet-title {
+  font-size: 24px;
+  font-weight: normal;
+}
+
+.snippet-actions {
+  @media (min-width: $screen-sm-min) {
+    float: right;
+  }
+}
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index e51c3491dae..afc00a68572 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -29,6 +29,17 @@
 .todo-item {
   .todo-title {
     @include str-truncated(calc(100% - 174px));
+    overflow: visible;
+  }
+
+  .status-box {
+    margin: 0;
+    float: none;
+    display: inline-block;
+    font-weight: normal;
+    padding: 0 5px;
+    line-height: inherit;
+    font-size: 14px;
   }
 
   .todo-body {
@@ -76,12 +87,11 @@
 
 @media (max-width: $screen-xs-max) {
   .todo-item {
-    padding-left: $gl-padding;
-
     .todo-title {
       white-space: normal;
       overflow: visible;
       max-width: 100%;
+      margin-bottom: 10px;
     }
 
     .avatar {