diff options
author | Phil Hughes <me@iamphill.com> | 2017-01-06 10:52:00 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-01-06 10:52:00 +0000 |
commit | 36fa45e7f6c6b70560e59ad62e330fa6f16ed05b (patch) | |
tree | 0c0153d09bb304bea0f43c8feabe7e34ba50b125 | |
parent | b16fbd69f52519d7962503b6d45987f63f60a02f (diff) | |
download | gitlab-ce-issue-boards-animate.tar.gz |
Added note about width of sidebarissue-boards-animate
Changed CSS transition property for only values that change
-rw-r--r-- | app/assets/javascripts/boards/components/board.js.es6 | 18 | ||||
-rw-r--r-- | 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, |