Fix the horizontal canvas scrolling on card opening

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 = {

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() {

client/config/router.js

@@ -7,12 +7,12 @@ FlowRouter.route('/', {
   name: 'home',
   triggersEnter: [AccountsTemplates.ensureSignedIn],
   action: function() {
-    EscapeActions.executeAll();
-    Filter.reset();
-
     Session.set('currentBoard', null);
     Session.set('currentCard', null);
 
+    Filter.reset();
+    EscapeActions.executeAll();
+
     BlazeLayout.render('defaultLayout', { content: 'boardList' });
   }
 });
@@ -21,15 +21,16 @@ FlowRouter.route('/b/:id/:slug', {
   name: 'board',
   action: function(params) {
     let currentBoard = params.id;
+    let previousBoard = Session.get('currentBoard');
+    Session.set('currentBoard', currentBoard);
+    Session.set('currentCard', null);
+
     // If we close a card, we'll execute again this route action but we don't
     // want to excape every current actions (filters, etc.)
-    if (Session.get('currentBoard') !== currentBoard) {
+    if (previousBoard !== currentBoard) {
       EscapeActions.executeAll();
     }
 
-    Session.set('currentBoard', currentBoard);
-    Session.set('currentCard', null);
-
     BlazeLayout.render('defaultLayout', { content: 'board' });
   }
 });
@@ -37,10 +38,11 @@ FlowRouter.route('/b/:id/:slug', {
 FlowRouter.route('/b/:boardId/:slug/:cardId', {
   name: 'card',
   action: function(params) {
-    EscapeActions.executeUpTo('inlinedForm');
     Session.set('currentBoard', params.boardId);
     Session.set('currentCard', params.cardId);
 
+    EscapeActions.executeUpTo('inlinedForm');
+
     BlazeLayout.render('defaultLayout', { content: 'board' });
   }
 });