Fix the horizontal canvas scrolling on card opening

2 files changed, 33 insertions, 21 deletions

diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js
index aa9d630d..fd9ee6bc 100644
--- a/client/components/boards/boardBody.js
+++ b/client/components/boards/boardBody.js
@@ -44,20 +44,10 @@ BlazeComponent.extendComponent({
     this.draggingActive.set(bool);
   },
 
-  scrollLeft: function(position) {
-    position = position || 0;
-    var $container = $(this.listsDom);
-    var containerWidth = $container.width();
-    var currentScrollPosition = $container.scrollLeft();
-    if (position < currentScrollPosition) {
-      $container.animate({
-        scrollLeft: position
-      });
-    } else if (position > currentScrollPosition + containerWidth) {
-      $container.animate({
-        scrollLeft: Math.max(0, position - containerWidth)
-      });
-    }
+  scrollLeft: function(position = 0) {
+    this.$('.js-lists').animate({
+      scrollLeft: position
+    });
   },
 
   currentCardIsInThisList: function() {
@@ -109,10 +99,12 @@ BlazeComponent.extendComponent({
 Template.boardBody.onRendered(function() {
   var self = BlazeComponent.getComponentForElement(this.firstNode);
 
-  self.scrollLeft();
-
   self.listsDom = this.find('.js-lists');
 
+  if (! Session.get('currentCard')) {
+    self.scrollLeft();
+  }
+
   // We want to animate the card details window closing. We rely on CSS
   // transition for the actual animation.
   self.listsDom._uihooks = {
diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js
index 5a7071e8..aba7254a 100644
--- a/client/components/cards/cardDetails.js
+++ b/client/components/cards/cardDetails.js
@@ -23,12 +23,32 @@ BlazeComponent.extendComponent({
     this.componentParent().mouseHasEnterCardDetails = false;
   },
 
+  scrollParentContainer: function() {
+    const cardPanelWidth = 510;
+    let bodyBoardComponent = this.componentParent();
+
+    let $cardContainer = bodyBoardComponent.$('.js-lists');
+    let $cardView = this.$(this.firstNode());
+    let cardContainerScroll = $cardContainer.scrollLeft();
+    let cardContainerWidth = $cardContainer.width();
+
+    let cardViewStart = $cardView.offset().left;
+    let cardViewEnd = cardViewStart + cardPanelWidth;
+
+    let offset = false;
+    if (cardViewStart < 0) {
+      offset = cardViewStart;
+    } else if(cardViewEnd > cardContainerWidth) {
+      offset = cardViewEnd - cardContainerWidth;
+    }
+
+    if (offset) {
+      bodyBoardComponent.scrollLeft(cardContainerScroll + offset);
+    }
+  },
+
   onRendered: function() {
-    var bodyBoardComponent = this.componentParent();
-    var additionalMargin = 550;
-    var $cardDetails = this.$(this.firstNode());
-    var scollLeft = $cardDetails.offset().left + additionalMargin;
-    bodyBoardComponent.scrollLeft(scollLeft);
+    this.scrollParentContainer();
   },
 
   onDestroyed: function() {