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,
--
GitLab