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.

5 files changed, 106 insertions, 105 deletions

diff --git a/client/components/cards/details.jade b/client/components/cards/details.jade
index 0de59297..55cc4b9e 100644
--- a/client/components/cards/details.jade
+++ b/client/components/cards/details.jade
@@ -1,47 +1,46 @@
-template(name="cardSidebar")
-  .card-sidebar.sidebar
-    .card-detail.sidebar-content.js-card-sidebar-content
-      if cover
-        .card-detail-cover(style="background-image: url({{ card.cover.url }})")
-      .card-detail-header(class="{{#if currentUser.isBoardMember}}editable{{/if}}")
-        a.js-close-card-detail
-          i.fa.fa-times
-        h2.card-detail-title.js-card-title= title
-      p.card-detail-list.js-move-card
-        | {{_ 'in-list'}}
-        a.card-detail-list-title(
-          class="{{#if currentUser.isBoardMember}}js-open-move-from-header is-editable{{/if}}")
-          = list.title
-      hr
-      //- if card.members
-      .card-detail-item.card-detail-item-members.clearfix.js-card-detail-members
-        h3.card-detail-item-header {{_ 'members'}}
-        .js-card-detail-members-list.clearfix
-          each members
-            +userAvatar(userId=this size="small" cardId=../_id)
-          a.card-detail-item-add-button.dark-hover.js-details-edit-members
-            i.fa.fa-plus
-      //- We should use "editable" to avoide repetiting ourselves
-      .clearfix
-      if currentUser.isBoardMember
-        h3 Description
-        +inlinedForm(classNames="js-card-description")
-          i.fa.fa-times.js-close-inlined-form
-          textarea(autofocus)= description
-          button(type="submit") {{_ 'edit'}}
-        else
-          .js-open-inlined-form
-            a {{_ 'edit'}}
-            +viewer
-              = description
-      else if description
-        h3 Description
-        +viewer
-          = description
-      hr
-      if attachments.count
-        +WindowAttachmentsModule(card=this)
-      +WindowActivityModule(card=this)
+template(name="cardDetails")
+  .card-detail.js-card-detail: .card-detail-canvas
+    if cover
+      .card-detail-cover(style="background-image: url({{ card.cover.url }})")
+    .card-detail-header(class="{{#if currentUser.isBoardMember}}editable{{/if}}")
+      a.js-close-card-detail
+        i.fa.fa-times
+      h2.card-detail-title.js-card-title= title
+    p.card-detail-list.js-move-card
+      | {{_ 'in-list'}}
+      a.card-detail-list-title(
+        class="{{#if currentUser.isBoardMember}}js-open-move-from-header is-editable{{/if}}")
+        = list.title
+    hr
+    //- if card.members
+    .card-detail-item.card-detail-item-members.clearfix.js-card-detail-members
+      h3.card-detail-item-header {{_ 'members'}}
+      .js-card-detail-members-list.clearfix
+        each members
+          +userAvatar(userId=this size="small" cardId=../_id)
+        a.card-detail-item-add-button.dark-hover.js-details-edit-members
+          i.fa.fa-plus
+    //- We should use "editable" to avoide repetiting ourselves
+    .clearfix
+    if currentUser.isBoardMember
+      h3 Description
+      +inlinedForm(classNames="js-card-description")
+        i.fa.fa-times.js-close-inlined-form
+        textarea(autofocus)= description
+        button(type="submit") {{_ 'edit'}}
+      else
+        .js-open-inlined-form
+          a {{_ 'edit'}}
+          +viewer
+            = description
+    else if description
+      h3 Description
+      +viewer
+        = description
+    hr
+    if attachments.count
+      +WindowAttachmentsModule(card=this)
+    +WindowActivityModule(card=this)
 
 template(name="moveCardPopup")
   +boardLists
diff --git a/client/components/cards/details.js b/client/components/cards/details.js
index cb1a3ef3..d0395129 100644
--- a/client/components/cards/details.js
+++ b/client/components/cards/details.js
@@ -1,6 +1,6 @@
 BlazeComponent.extendComponent({
   template: function() {
-    return 'cardSidebar';
+    return 'cardDetails';
   },
 
   mixins: function() {
@@ -8,7 +8,7 @@ BlazeComponent.extendComponent({
   },
 
   calculateNextPeak: function() {
-    var altitude = this.find('.js-card-sidebar-content').scrollHeight;
+    var altitude = this.find('.js-card-detail').scrollHeight;
     this.callFirstWith(this, 'setNextPeak', altitude);
   },
 
@@ -86,7 +86,7 @@ BlazeComponent.extendComponent({
       'click .js-details-edit-labels': Popup.open('cardLabels')
     }];
   }
-}).register('cardSidebar');
+}).register('cardDetails');
 
 Template.moveCardPopup.events({
   'click .js-select-list': function() {
diff --git a/client/components/cards/details.styl b/client/components/cards/details.styl
index 106a9cfd..68a436f9 100644
--- a/client/components/cards/details.styl
+++ b/client/components/cards/details.styl
@@ -1,45 +1,57 @@
 @import 'nib'
 
-.card-sidebar.sidebar
-  width: 496px
-  top: -46px
-
-  .card-detail.sidebar-content
-    padding: 0 20px
-    z-index: 20 !important
-    // XXX Animate apparition
-
-    .card-detail-header
-      margin: 0 -20px 5px
-      padding 7px 20px 0
-      background: #F7F7F7
-      border-bottom: 1px solid darken(white, 10%)
-      min-height: 38px
-
-      i.fa
-        float: right
-        font-size: 1.3em
-        color: darken(white, 35%)
-        margin-top: 7px
-
-      .card-detail-title
-        font-weight: bold
-        font-size: 1.7em
-        margin: 3px 0 0
-        padding: 0
-
-    .card-detail-list
-      font-size: 0.85em
-      margin-bottom: 3px
-
-      a.card-detail-list-title
-        font-weight: bold
-
-        &.is-editable
-          display: inline-block
-          background: darken(white, 10%)
-          border-radius: 3px
-          padding: 0px 5px
+.card-detail
+  padding: 0 20px
+  height: 100%
+  flex: 0 0 470px
+  overflow: hidden
+  background: white
+  border-radius: 3px
+  z-index: 20 !important
+  animation: growIn 0.2s
+  box-shadow: 0 0 7px 0 darken(white, 30%)
+  transition: flex 0.2s, padding 0.2s
+
+  .card-detail-canvas
+    width: 470px
+
+  .card-detail-header
+    margin: 0 -20px 5px
+    padding 7px 20px 0
+    background: #F7F7F7
+    border-bottom: 1px solid darken(white, 10%)
+    min-height: 38px
+
+    i.fa
+      float: right
+      font-size: 1.3em
+      color: darken(white, 35%)
+      margin-top: 7px
+
+    .card-detail-title
+      font-weight: bold
+      font-size: 1.7em
+      margin: 3px 0 0
+      padding: 0
+
+  .card-detail-list
+    font-size: 0.85em
+    margin-bottom: 3px
+
+    a.card-detail-list-title
+      font-weight: bold
+
+      &.is-editable
+        display: inline-block
+        background: darken(white, 10%)
+        border-radius: 3px
+        padding: 0px 5px
+
+@keyframes growIn
+  from
+    flex: 0 0 0
+  to
+    flex: 0 0 470px
 
 .new-comment
   position: relative
diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl
index a78cd46f..1b9e60b5 100644
--- a/client/components/cards/minicard.styl
+++ b/client/components/cards/minicard.styl
@@ -4,7 +4,6 @@
   border-radius: 2px
   cursor: pointer
   margin-bottom: 9px
-  max-width: 300px
   min-height: 20px
   position: relative
   z-index: 0
@@ -42,10 +41,16 @@
     position: relative
     z-index: 10
 
-
   &.is-selected
+    margin-left: -11px
+    transform: translateX(- @margin-left)
+    border-bottom-right-radius: 0
+    border-top-right-radius: 0
+    z-index: 100
+    box-shadow: -2px 1px 2px rgba(0,0,0,.2)
+
     .minicard-details
-      padding-bottom: 0
+      margin-right: 11px
 
   a.minicard-details
     text-decoration:none
diff --git a/client/components/cards/router.js b/client/components/cards/router.js
deleted file mode 100644
index 48bb9a95..00000000
--- a/client/components/cards/router.js
+++ /dev/null
@@ -1,15 +0,0 @@
-Router.route('/boards/:boardId/:slug/:cardId', {
-  name: 'Card',
-  template: 'board',
-  waitOn: function() {
-    var params = this.params;
-    // XXX We probably shouldn't rely on Session
-    Session.set('currentBoard', params.boardId);
-    Session.set('currentCard', params.cardId);
-
-    return BoardSubsManager.subscribe('board', params.boardId, params.slug);
-  },
-  data: function() {
-    return Boards.findOne(this.params.boardId);
-  }
-});