Numerous UI improvements

app/assets/javascripts/application.js.coffee

@@ -135,17 +135,25 @@ $ ->
     ), 1
   # Initialize tooltips
-  $('body').tooltip({
-    selector: '.has_tooltip, [data-toggle="tooltip"], .page-sidebar-collapsed .nav-sidebar a'
+  $('body').tooltip(
+    selector: '.has_tooltip, [data-toggle="tooltip"]'
     placement: (_, el) ->
       $el = $(el)
-      if $el.attr('id') == 'js-shortcuts-home'
-        # Place the logo tooltip on the right when collapsed, bottom when expanded
-        $el.parents('header').hasClass('header-collapsed') and 'right' or 'bottom'
-      else
-        # Otherwise use the data-placement attribute, or 'bottom' if undefined
-        $el.data('placement') or 'bottom'
-  })
+      $el.data('placement') || 'bottom'
+  )
+
+  $('.header-logo .home').tooltip(
+    placement: (_, el) ->
+      $el = $(el)
+      if $('.page-with-sidebar').hasClass('page-sidebar-collapsed') then 'right' else 'bottom'
+    container: 'body'
+  )
+
+  $('.page-with-sidebar').tooltip(
+    selector: '.sidebar-collapsed .nav-sidebar a, .sidebar-collapsed a.sidebar-user'
+    placement: 'right'
+    container: 'body'
+  )
   # Form submitter
   $('.trigger-submit').on 'change', ->

app/assets/javascripts/issues.js.coffee

@@ -29,7 +29,7 @@
     $('#filter_issue_search').val($('#issue_search').val())
   initSelects: ->
-    $("select#update_status").select2(width: 'resolve', dropdownAutoWidth: true)
+    $("select#update_state_event").select2(width: 'resolve', dropdownAutoWidth: true)
     $("select#update_assignee_id").select2(width: 'resolve', dropdownAutoWidth: true)
     $("select#update_milestone_id").select2(width: 'resolve', dropdownAutoWidth: true)
     $("select#label_name").select2(width: 'resolve', dropdownAutoWidth: true)

app/assets/javascripts/new_commit_form.js.coffee

@@ -3,7 +3,7 @@ class @NewCommitForm
     @newBranch = form.find('.js-new-branch')
     @originalBranch = form.find('.js-original-branch')
     @createMergeRequest = form.find('.js-create-merge-request')
-    @createMergeRequestFormGroup = form.find('.js-create-merge-request-form-group')
+    @createMergeRequestContainer = form.find('.js-create-merge-request-container')
     @renderDestination()
     @newBranch.keyup @renderDestination
@@ -12,10 +12,10 @@ class @NewCommitForm
     different = @newBranch.val() != @originalBranch.val()
     if different
-      @createMergeRequestFormGroup.show()
+      @createMergeRequestContainer.show()
       @createMergeRequest.prop('checked', true) unless @wasDifferent
     else
-      @createMergeRequestFormGroup.hide()
+      @createMergeRequestContainer.hide()
       @createMergeRequest.prop('checked', false)
     @wasDifferent = different

app/assets/javascripts/sidebar.js.coffee

@@ -5,6 +5,7 @@ $(document).on("click", '.toggle-nav-collapse', (e) ->
   $('.page-with-sidebar').toggleClass("#{collapsed} #{expanded}")
   $('header').toggleClass("header-collapsed header-expanded")
+  $('.sidebar-wrapper').toggleClass("sidebar-collapsed sidebar-expanded")
   $('.toggle-nav-collapse i').toggleClass("fa-angle-right fa-angle-left")
   $.cookie("collapsed_nav", $('.page-with-sidebar').hasClass(collapsed), { path: '/' })
 )

app/assets/javascripts/users_select.js.coffee

@@ -32,17 +32,15 @@ class @UsersSelect
               if showNullUser
                 nullUser = {
                   name: 'Unassigned',
-                  avatar: null,
-                  username: 'none',
                   id: 0
                 }
                 data.results.unshift(nullUser)
               if showAnyUser
+                name = showAnyUser
+                name = 'Any User' if name == true
                 anyUser = {
-                  name: 'Any',
-                  avatar: null,
-                  username: 'none',
+                  name: name,
                   id: null
                 }
                 data.results.unshift(anyUser)
@@ -50,7 +48,6 @@ class @UsersSelect
             if showEmailUser && data.results.length == 0 && query.term.match(/^[^@]+@[^@]+$/)
               emailUser = {
                 name: "Invite \"#{query.term}\"",
-                avatar: null,
                 username: query.term,
                 id: query.term
               }
@@ -82,10 +79,10 @@ class @UsersSelect
     else
       avatar = gon.default_avatar_url
-    "<div class='user-result'>
+    "<div class='user-result #{'no-username' unless user.username}'>
        <div class='user-image'><img class='avatar s24' src='#{avatar}'></div>
        <div class='user-name'>#{user.name}</div>
-       <div class='user-username'>#{user.username}</div>
+       <div class='user-username'>#{user.username || ""}</div>
      </div>"
   formatSelection: (user) ->

app/assets/stylesheets/application.scss

@@ -48,4 +48,4 @@
 /*
  * Styles for JS behaviors.
  */
-@import "behaviors.scss";
\ No newline at end of file
+@import "behaviors.scss";

app/assets/stylesheets/framework.scss

 @import "framework/fonts";
 @import "framework/variables";
 @import "framework/mixins";
-@import "framework/layout";
 @import 'framework/tw_bootstrap_variables';
 @import 'framework/tw_bootstrap';
+@import "framework/layout";
 @import "framework/avatar.scss";
 @import "framework/blocks.scss";
@@ -25,6 +25,7 @@
 @import "framework/markdown_area.scss";
 @import "framework/mobile.scss";
 @import "framework/pagination.scss";
+@import "framework/panels.scss";
 @import "framework/selects.scss";
 @import "framework/sidebar.scss";
 @import "framework/tables.scss";

app/assets/stylesheets/framework/blocks.scss

@@ -112,5 +112,14 @@
     position: absolute;
     top: 10px;
     right: 10px;
+
+    &.left {
+      left: 10px;
+      right: auto;
+    }
   }
 }
+
+.block-connector {
+  margin-top: -1px;
+}

app/assets/stylesheets/framework/common.scss

@@ -7,7 +7,7 @@
 /** COMMON CLASSES **/
 .prepend-top-10 { margin-top:10px }
-.prepend-top-default { margin-top: $gl-padding; }
+.prepend-top-default { margin-top: $gl-padding !important; }
 .prepend-top-20 { margin-top:20px }
 .prepend-left-10 { margin-left:10px }
 .prepend-left-20 { margin-left:20px }
@@ -52,6 +52,10 @@ pre {
   }
 }
+hr {
+  margin: $gl-padding 0;
+}
+
 .dropdown-menu > li > a {
   text-shadow: none;
 }
@@ -337,10 +341,6 @@ table {
   text-align: center;
 }
-.task-status {
-  margin-left: 10px;
-}
-
 #nprogress .spinner {
   top: 15px !important;
   right: 10px !important;
@@ -433,3 +433,7 @@ table {
 .space-right {
   margin-right: 10px;
 }
+
+.alert, .progress {
+  margin-bottom: $gl-padding;
+}

app/assets/stylesheets/framework/files.scss

@@ -8,7 +8,6 @@
   border: none;
   border-top: 1px solid #E7E9EE;
   border-bottom: 1px solid #E7E9EE;
-  margin-bottom: 1em;
   &.readme-holder {
     border-bottom: 0;
@@ -171,4 +170,3 @@
     }
   }
 }
-

app/assets/stylesheets/framework/forms.scss

@@ -22,9 +22,10 @@ input[type='text'].danger {
 }
 .form-actions {
-  padding: 17px 20px 18px;
-  margin-top: 18px;
-  margin-bottom: 18px;
+  margin: -$gl-padding;
+  margin-top: 0;
+  margin-bottom: -$gl-padding;
+  padding: $gl-padding;
   background-color: $background-color;
   border-top: 1px solid $border-color;
 }
@@ -73,6 +74,8 @@ label {
 .form-control {
   @include box-shadow(none);
+  height: 42px;
+  padding: 8px $gl-padding;
 }
 .wiki-content {
@@ -88,7 +91,19 @@ label {
 }
 .input-group {
+  .select2-container {
+    display: table-cell;
+    width: 200px !important;
+  }
   .input-group-addon {
     background-color: #f7f8fa;
   }
+  .input-group-addon:not(:first-child):not(:last-child) {
+    border-left: 0;
+    border-right: 0;
+  }
+}
+
+.help-block {
+  margin-bottom: 0;
 }

app/assets/stylesheets/framework/header.scss

@@ -6,15 +6,17 @@ header {
   transition-duration: .3s;
   &.navbar-empty {
+    height: 58px;
     background: #FFF;
     border-bottom: 1px solid #EEE;
     .center-logo {
-      margin: 8px 0;
+      margin: 11px 0;
       text-align: center;
-      img {
-        height: 32px;
+      #tanuki-logo, img {
+        width: 36px;
+        height: 36px;
       }
     }
   }

app/assets/stylesheets/framework/issue_box.scss

@@ -7,8 +7,9 @@
 .issue-box {
   @include border-radius(2px);
-  display: inline-block;
-  padding: 10px $gl-padding;
+  display: block;
+  float: left;
+  padding: 0 $gl-padding;
   font-weight: normal;
   margin-right: 10px;
   font-size: $gl-font-size;

app/assets/stylesheets/framework/layout.scss

@@ -2,10 +2,10 @@ html {
   overflow-y: scroll;
   &.touch .tooltip { display: none !important; }
-  body {
-    padding-top: $header-height;
-  }
+}
+body {
+  background-color: #EAEBEC;
 }
 .container {
@@ -18,6 +18,7 @@ html {
 }
 .navless-container {
+  padding-top: $header-height;
   margin-top: 30px;
 }

app/assets/stylesheets/framework/panels.scss

+.panel {
+  margin-bottom: $gl-padding;
+  
+  .panel-heading {
+    padding: 10px $gl-padding;
+  }
+  .panel-body {
+    padding: $gl-padding;
+
+    .form-actions {
+      margin: -$gl-padding;
+      margin-top: $gl-padding;
+    }
+  }
+}

app/assets/stylesheets/framework/selects.scss

@@ -15,6 +15,16 @@
       border-left: none;
       padding-top: 5px;
     }
+
+    .select2-chosen {
+      color: $gl-text-color;
+    }
+
+    &.select2-default {
+      .select2-chosen {
+        color: #999;
+      }
+    }
   }
 }
@@ -23,6 +33,7 @@
   border: 1px solid #e7e9ed;
 }
+
 .select2-drop {
   @include box-shadow(rgba(76, 86, 103, 0.247059) 0px 0px 1px 0px, rgba(31, 37, 50, 0.317647) 0px 2px 18px 0px);
   @include border-radius (0px);
@@ -48,17 +59,38 @@
   color: #313236;
 }
-.select2-container-multi .select2-choices {
-  @include border-radius(2px);
-  border-color: #CCC;
-}
-
-.select2-container-multi .select2-choices .select2-search-field input {
-  padding: 8px 14px;
-  font-size: 13px;
-  line-height: 18px;
-  height: auto;
+.select2-container-multi {
+  .select2-choices {
+    @include border-radius(2px);
+    border-color: $input-border;
+    background: white;
+    padding-left: $gl-padding / 2;
+
+    .select2-search-field input {
+      padding: $gl-padding / 2;
+      font-size: 13px;
+      height: auto;
+      font-family: inherit;
+      font-size: inherit;
+    }
+    .select2-search-choice {
+      margin: 8px 0 0 8px;
+      background: white;
+      box-shadow: none;
+      border-color: $input-border;
+      color: $gl-text-color;
+      line-height: 15px;
+
+      .select2-search-choice-close {
+        top: 5px;
+      }
+
+      &.select2-search-choice-focus {
+        border-color: $gl-text-color;
+      }
+    }
+  }
 }
 .select2-drop-active {
@@ -123,10 +155,16 @@
 }
 .user-result {
+  min-height: 24px;
+
   .user-image {
     float: left;
   }
-  .user-name {
+
+  &.no-username {
+    .user-name {
+      line-height: 24px;
+    }
   }
 }
@@ -143,4 +181,4 @@
 .ajax-users-dropdown {
   min-width: 250px !important;
-}
\ No newline at end of file
+}

app/assets/stylesheets/framework/sidebar.scss

 .page-with-sidebar {
+  padding-top: $header-height;
+  transition-duration: .3s;
+
   .sidebar-wrapper {
     position: fixed;
     top: 0;
@@ -14,19 +17,15 @@
 .sidebar-wrapper {
   z-index: 99;
   background: $background-color;
-  transition-duration: .3s;
 }
 .content-wrapper {
-  min-height: 100vh;
   width: 100%;
   padding: 20px;
-  background: #EAEBEC;
   .container-fluid {
     background: #FFF;
     padding: $gl-padding;
-    min-height: 90vh;
     &.container-blank {
       background: none;
@@ -36,6 +35,83 @@
   }
 }
+.sidebar-wrapper {
+  .header-logo {
+    border-bottom: 1px solid transparent;
+    float: left;
+    height: $header-height;
+    width: $sidebar_width;
+    position: fixed;
+    z-index: 999;
+    overflow: hidden;
+    transition-duration: .3s;
+
+    a {
+      float: left;
+      height: $header-height;
+      width: 100%;
+      padding: 11px 0 11px 22px;
+      overflow: hidden;
+      outline: none;
+      transition-duration: .3s;
+
+      img {
+        width: 36px;
+        height: 36px;
+      }
+
+      #tanuki-logo, img {
+        float: left;
+      }
+
+      .gitlab-text-container {
+        width: 230px;
+
+        h3 {
+          width: 158px;
+          float: left;
+          margin: 0;
+          margin-left: 14px;
+          font-size: 19px;
+          line-height: 41px;
+          font-weight: normal;
+        }
+      }
+    }
+
+    &:hover {
+      background-color: #EEE;
+    }
+  }
+
+  .sidebar-user {
+    padding: 9px 22px;
+    position: fixed;
+    bottom: 40px;
+    width: $sidebar_width;
+    overflow: hidden;
+    transition-duration: .3s;
+
+    .username {
+      margin-left: 10px;
+      width: $sidebar_width - 2 * 10px;
+      font-size: 16px;
+      line-height: 34px;
+    }
+  }
+}
+
+
+.tanuki-shape {
+  transition: all 0.8s;
+
+  &:hover {
+    fill: rgb(255, 255, 255);
+    transition: all 0.1s;
+  }
+}
+
+
 .nav-sidebar {
   margin-top: 14 + $header-height;
   margin-bottom: 100px;
@@ -62,7 +138,7 @@
       color: $gray;
       display: block;
       text-decoration: none;
-      padding-left: 22px;
+      padding-left: 23px;
       font-weight: normal;
       outline: none;
@@ -86,6 +162,10 @@
         padding: 0px 8px;
         @include border-radius(6px);
       }
+
+      &.back-link i {
+        transition-duration: .3s;
+      }
     }
   }
 }
@@ -101,7 +181,6 @@
 @mixin expanded-sidebar {
   padding-left: $sidebar_width;
-  transition-duration: .3s;
   .sidebar-wrapper {
     width: $sidebar_width;
@@ -115,16 +194,15 @@
       &.back-link {
         i {
-          visibility: hidden;
+          opacity: 0;
         }
       }
     }
   }
 }
-@mixin folded-sidebar {
-  padding-left: 60px;
-  transition-duration: .3s;
+@mixin collapsed-sidebar {
+  padding-left: $sidebar_collapsed_width;
   .sidebar-wrapper {
     width: $sidebar_collapsed_width;
@@ -133,7 +211,7 @@
       width: $sidebar_collapsed_width;
       a {
-        padding-left: 12px;
+        padding-left: ($sidebar_collapsed_width - 36) / 2;
         .gitlab-text-container {
           display: none;
@@ -144,9 +222,13 @@
     .nav-sidebar {
       width: $sidebar_collapsed_width;
-      li a {
-        span {
-          display: none;
+      li {
+        width: auto;
+
+        a {
+          span {
+            display: none;
+          }
         }
       }
     }
@@ -156,7 +238,7 @@
     }
     .sidebar-user {
-      padding-left: 12px;
+      padding-left: ($sidebar_collapsed_width - 36) / 2;
       width: $sidebar_collapsed_width;
       .username {
@@ -187,11 +269,11 @@
 @media (max-width: $screen-md-max) {
   .page-sidebar-collapsed {
-    @include folded-sidebar;
+    @include collapsed-sidebar;
   }
   .page-sidebar-expanded {
-    @include folded-sidebar;
+    @include collapsed-sidebar;
   }
   .collapse-nav {
@@ -201,83 +283,10 @@
 @media(min-width: $screen-md-max) {
   .page-sidebar-collapsed {
-    @include folded-sidebar;
+    @include collapsed-sidebar;
   }
   .page-sidebar-expanded {
     @include expanded-sidebar;
   }
 }
-
-.sidebar-user {
-  padding: 9px 22px;
-  position: fixed;
-  bottom: 40px;
-  width: $sidebar_width;
-  overflow: hidden;
-  transition-duration: .3s;
-
-  .username {
-    margin-left: 10px;
-    width: $sidebar_width - 2 * 10px;
-    font-size: 16px;
-    line-height: 34px;
-  }
-}
-
-.sidebar-wrapper {
-  .header-logo {
-    border-bottom: 1px solid transparent;
-    float: left;
-    height: $header-height;
-    width: $sidebar_width;
-    overflow: hidden;
-    transition-duration: .3s;
-
-    a {
-      float: left;
-      height: $header-height;
-      width: 100%;
-      padding: 10px 22px;
-      overflow: hidden;
-      outline: none;
-
-      img {
-        width: 36px;
-        height: 36px;
-      }
-
-      #tanuki-logo, img {
-        float: left;
-      }
-
-      .gitlab-text-container {
-        width: 230px;
-
-        h3 {
-          width: 158px;
-          float: left;
-          margin: 0;
-          margin-left: 14px;
-          font-size: 19px;
-          line-height: 41px;
-          font-weight: normal;
-        }
-      }
-    }
-
-    &:hover {
-      background-color: #EEE;
-    }
-  }
-}
-
-
-.tanuki-shape {
-  transition: all 0.8s;
-
-  &:hover {
-    fill: rgb(255, 255, 255);
-    transition: all 0.1s;
-  }
-}

app/assets/stylesheets/framework/tables.scss

@@ -6,6 +6,8 @@
 table {
   &.table {
+    margin-bottom: $gl-padding;
+    
     .dropdown-menu a {
       text-decoration: none;
     }

app/assets/stylesheets/framework/typography.scss

@@ -181,6 +181,10 @@ body {
   line-height: 1.3;
   font-size: 1.25em;
   font-weight: 600;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 .page-title-empty {

app/assets/stylesheets/pages/commit.scss

@@ -2,10 +2,6 @@
   display: block;
 }
-.commit-title{
-  margin-bottom: 10px;
-}
-
 .commit-author, .commit-committer{
   display: block;
   color: #999;
@@ -41,6 +37,8 @@
 .commit-box {
   .commit-title {
     margin: 0;
+    font-size: 23px;
+    color: #313236;
   }
   .commit-description {
@@ -108,16 +106,3 @@
     z-index: 2;
   }
 }
-
-.commit-ci-menu {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  margin-top: 5px;
-  height: 56px;
-  margin: -16px;
-  padding: 16px;
-  text-align: center;
-  margin-top: 0px;
-  margin-bottom: 2px;
-}