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.

client/components/lists/body.jade

@@ -4,7 +4,7 @@ template(name="listBody")
       +inlinedForm(autoclose=false position="top")
         +addCardForm(listId=_id position="top")
     each cards
-      .minicard.card.js-minicard.js-member-droppable(
+      .minicard.card.js-minicard(
         class="{{#if isSelected}}is-selected{{/if}}")
         a.minicard-details.clearfix.show(href=absoluteUrl)
           if cover

client/components/lists/main.js

@@ -25,13 +25,14 @@ BlazeComponent.extendComponent({
   onRendered: function() {
     if (Meteor.user().isBoardMember()) {
       var boardComponent = this.componentParent();
+      var itemsSelector = '.js-minicard:not(.placeholder, .hide, .js-composer)';
       var $cards = this.$('.js-minicards');
       $cards.sortable({
         connectWith: '.js-minicards',
         tolerance: 'pointer',
         appendTo: '.js-lists',
         helper: 'clone',
-        items: '.js-minicard:not(.placeholder, .hide, .js-composer)',
+        items: itemsSelector,
         placeholder: 'minicard placeholder',
         start: function(event, ui) {
           $('.minicard.placeholder').height(ui.item.height());
@@ -57,24 +58,20 @@ BlazeComponent.extendComponent({
         }
       }).disableSelection();
 
-      Utils.liveEvent('mouseover', function($el) {
-        $el.find('.js-member-droppable').droppable({
+      $(document).on('mouseover', function() {
+        $cards.find(itemsSelector).droppable({
           hoverClass: 'draggable-hover-card',
-          accept: '.js-member',
+          accept: '.js-member,.js-label',
           drop: function(event, ui) {
-            var memberId = Blaze.getData(ui.draggable.get(0)).userId;
             var cardId = Blaze.getData(this)._id;
-            Cards.update(cardId, {$addToSet: {members: memberId}});
-          }
-        });
 
-        $el.find('.js-member-droppable').droppable({
-          hoverClass: 'draggable-hover-card',
-          accept: '.js-label',
-          drop: function(event, ui) {
-            var labelId = Blaze.getData(ui.draggable.get(0))._id;
-            var cardId = Blaze.getData(this)._id;
-            Cards.update(cardId, {$addToSet: {labelIds: labelId}});
+            if (ui.draggable.hasClass('js-member')) {
+              var memberId = Blaze.getData(ui.draggable.get(0)).userId;
+              Cards.update(cardId, {$addToSet: {members: memberId}});
+            } else {
+              var labelId = Blaze.getData(ui.draggable.get(0))._id;
+              Cards.update(cardId, {$addToSet: {labelIds: labelId}});
+            }
           }
         });
       });

client/components/lists/main.styl

@@ -10,8 +10,7 @@
   // transparent, because that won't work during a list drag.
   background: darken(white, 10%)
   height: 100%
-  border-right: 1px solid darken(white, 17%)
-  border-left: 1px solid darken(white, 4%)
+  border-left: 1px solid darken(white, 20%)
   padding: 12px 7px 5px
   overflow-y: auto
 
@@ -19,9 +18,8 @@
     margin-left: 5px
     border-left: none
 
-  &:last-child
-    margin-right: 5px
-    border-right: none
+  .card-detail + &
+    border-left: none
 
   &.editable
     cursor: grab
@@ -87,9 +85,6 @@
     margin: 0
 
 .minicards
-  // flex: 1 1 auto
-  overflow-y: auto
-  overflow-x: hidden
   padding: 4px 4px 1px
   z-index: 1
   height: 100%
@@ -105,7 +100,6 @@
   padding: 7px 10px
   position: relative
   text-decoration: none
-  animation: fadeIn 0.2s
 
   i.fa
     margin-right: 7px