From 36fa45e7f6c6b70560e59ad62e330fa6f16ed05b Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 6 Jan 2017 10:52:00 +0000
Subject: [PATCH] Added note about width of sidebar Changed CSS transition
 property for only values that change

---
 .../javascripts/boards/components/board.js.es6 | 18 +++++++++++-------
 app/assets/stylesheets/pages/boards.scss       |  3 ++-
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6
index d0c5d9702d5..8d1a0f482f9 100644
--- a/app/assets/javascripts/boards/components/board.js.es6
+++ b/app/assets/javascripts/boards/components/board.js.es6
@@ -45,11 +45,15 @@
           const issue = this.list.findIssue(this.detailIssue.issue.id);
 
           if (issue) {
+            const offsetLeft = this.$el.offsetLeft;
             const boardsList = document.querySelectorAll('.boards-list')[0];
-            const left = boardsList.scrollLeft - this.$el.offsetLeft;
-            let right = (this.$el.offsetLeft + this.$el.offsetWidth);
+            const left = boardsList.scrollLeft - offsetLeft;
+            let right = (offsetLeft + this.$el.offsetWidth);
 
             if (window.innerWidth > 768 && boardsList.classList.contains('is-compact')) {
+              // -290 here because width of boardsList is animating so therefore
+              // getting the width here is incorrect
+              // 290 is the width of the sidebar
               right -= (boardsList.offsetWidth - 290);
             } else {
               right -= boardsList.offsetWidth;
@@ -58,11 +62,11 @@
             if (right - boardsList.scrollLeft > 0) {
               $(boardsList).animate({
                 scrollLeft: right
-              }, 200);
+              }, this.sortableOptions.animation);
             } else if (left > 0) {
               $(boardsList).animate({
-                scrollLeft: this.$el.offsetLeft
-              }, 200);
+                scrollLeft: offsetLeft
+              }, this.sortableOptions.animation);
             }
           }
         },
@@ -75,7 +79,7 @@
       }
     },
     mounted () {
-      const options = gl.issueBoards.getBoardSortableDefaultOptions({
+      this.sortableOptions = gl.issueBoards.getBoardSortableDefaultOptions({
         disabled: this.disabled,
         group: 'boards',
         draggable: '.is-draggable',
@@ -94,7 +98,7 @@
         }
       });
 
-      this.sortable = Sortable.create(this.$el.parentNode, options);
+      this.sortable = Sortable.create(this.$el.parentNode, this.sortableOptions);
     },
   });
 })();
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 67ffbae2ab9..83673932bfa 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -343,7 +343,8 @@
 .right-sidebar.right-sidebar-expanded {
   &.boards-sidebar-slide-enter-active,
   &.boards-sidebar-slide-leave-active {
-    transition: all .2s;
+    transition: width .2s,
+                padding .2s;
   }
 
   &.boards-sidebar-slide-enter,