Experiment new ergonomics to interact with card details

The idea is that by displaying card details in a sidebar stuck on the
right of the screen, the mouse had to travel too much before
interacting with it. I also don’t want to use the Trello solution
(modal) on big screens, because I like the ability to interact with
the selected card and with the board at the same time (like in a
e-mail client).

The solution introduced in this commit consist of opening the card
detail in a column next to the minicard list.

This commit also fix right sidebar members and labels drag and drop.

1 files changed, 25 insertions, 2 deletions

diff --git a/client/components/boards/router.js b/client/components/boards/router.js
index 6845b7f2..9c5bee35 100644
--- a/client/components/boards/router.js
+++ b/client/components/boards/router.js
@@ -1,6 +1,6 @@
 Meteor.subscribe('boards');
 
-BoardSubsManager = new SubsManager();
+var boardSubsManager = new SubsManager();
 
 Router.route('/boards', {
   name: 'Boards',
@@ -17,6 +17,7 @@ Router.route('/boards/:_id/:slug', {
   name: 'Board',
   template: 'board',
   onAfterAction: function() {
+    // XXX We probably shouldn't rely on Session
     Session.set('sidebarIsOpen', true);
     Session.set('currentWidget', 'home');
     Session.set('menuWidgetIsOpen', false);
@@ -26,9 +27,31 @@ Router.route('/boards/:_id/:slug', {
     Session.set('currentBoard', params._id);
     Session.set('currentCard', null);
 
-    return BoardSubsManager.subscribe('board', params._id, params.slug);
+    return boardSubsManager.subscribe('board', params._id, params.slug);
   },
   data: function() {
     return Boards.findOne(this.params._id);
   }
 });
+
+Router.route('/boards/:boardId/:slug/:cardId', {
+  name: 'Card',
+  template: 'board',
+  onAfterAction: function() {
+    Tracker.nonreactive(function() {
+      if (! Session.get('currentCard') && typeof Sidebar !== 'undefined') {
+        Sidebar.hide();
+      }
+    });
+    var params = this.params;
+    Session.set('currentBoard', params.boardId);
+    Session.set('currentCard', params.cardId);
+  },
+  waitOn: function() {
+    var params = this.params;
+    return boardSubsManager.subscribe('board', params.boardId, params.slug);
+  },
+  data: function() {
+    return Boards.findOne(this.params.boardId);
+  }
+});