Start designing the card details pane

Implement a dynamic overflow to focus sight on the pane.

5 files changed, 46 insertions, 41 deletions

diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade
index c3043327..12fc0e36 100644
--- a/client/components/boards/boardBody.jade
+++ b/client/components/boards/boardBody.jade
@@ -12,6 +12,8 @@ template(name="boardComponent")
         class=sidebarSize
         class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}"
         class="{{#if draggingActive.get}}is-dragging-active{{/if}}")
+        if showOverlay.get
+          .board-overlay
         .lists.js-lists
           each lists
             +list(this)
@@ -28,10 +30,10 @@ template(name="addListForm")
     +inlinedForm(autoclose=false)
       input.list-name-input(type="text" placeholder="{{_ 'add-list'}}"
         autocomplete="off" autofocus)
-      div.edit-controls.clearfix
-        button.primary.confirm.js-save-edit(type="submit") {{_ 'save'}}
+      .edit-controls.clearfix
+        button.primary.confirm(type="submit") {{_ 'save'}}
         a.fa.fa-times-thin.js-close-inlined-form
     else
-      .js-open-inlined-form
+      a.js-open-inlined-form
         i.fa.fa-plus
         | {{_ 'add-list'}}
diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js
index b5e4154a..6de7fba6 100644
--- a/client/components/boards/boardBody.js
+++ b/client/components/boards/boardBody.js
@@ -14,12 +14,16 @@ BlazeComponent.extendComponent({
 
   onCreated: function() {
     this.draggingActive = new ReactiveVar(false);
+    this.showOverlay = new ReactiveVar(false);
   },
 
   openNewListForm: function() {
     this.componentChildren('addListForm')[0].open();
   },
 
+  // XXX Flow components allow us to avoid creating these two setter methods by
+  // exposing a public API to modify the component state. We need to investigate
+  // best practices here.
   setIsDragging: function(bool) {
     this.draggingActive.set(bool);
   },
@@ -60,9 +64,9 @@ BlazeComponent.extendComponent({
         var removeNode = _.once(function() {
           node.parentNode.removeChild(node);
         });
-        if ($(node).hasClass('js-card-detail')) {
+        if ($(node).hasClass('js-card-details')) {
           $(node).css({
-            flex: '0 0 0',
+            flexBasis: 0,
             padding: 0
           });
           $(lists).one(endTransitionEvents, removeNode);
diff --git a/client/components/boards/boardBody.styl b/client/components/boards/boardBody.styl
index 281199e2..68034a16 100644
--- a/client/components/boards/boardBody.styl
+++ b/client/components/boards/boardBody.styl
@@ -1,21 +1,29 @@
 @import 'nib'
 
-.board-wrapper
-  left: 0
-  top: 0
-  bottom: 0
-  right: 0
-  position: absolute
-  overflow: hidden
-
-  .board-canvas
+position()
+  if arguments[0] == cover
     position: absolute
     left: 0
     right: 0
     top: 0
     bottom: 0
+  else
+    position: arguments
+
+.board-wrapper
+  position: cover
+
+  .board-canvas
+    position: cover
     transition: margin .1s
 
+    .board-overlay
+      position: cover
+      background: black
+      opacity: 0.33
+      animation: fadeIn 0.2s
+      z-index: 10
+
     &.next-sidebar
       margin-right: 248px
 
@@ -25,16 +33,18 @@
       .open-minicard-composer
         display: none
 
-.lists
-  align-items: flex-start
-  display: flex
-  flex-direction: row
-  margin-bottom: 10px
-  overflow-x: auto
-  overflow-y: hidden
-  padding-bottom: 10px
-  position: absolute
-  top: 0
-  right: 0
-  bottom: 0
-  left: 0
+  .lists
+    align-items: flex-start
+    display: flex
+    flex-direction: row
+    margin-bottom: 10px
+    overflow: auto
+    padding-bottom: 5px
+    position: cover
+
+    // In order for the card details pane to overlap the header we need to
+    // virtually increase this container size with the below hack. (Note that it
+    // is not possible to set overflow-x: auto, overflow-y: hidden as I
+    // originally tried).
+    padding-top: 10px
+    top: -10px
diff --git a/client/components/boards/boardList.styl b/client/components/boards/boardList.styl
index c068dbb0..61095d5b 100644
--- a/client/components/boards/boardList.styl
+++ b/client/components/boards/boardList.styl
@@ -30,17 +30,6 @@
       background-size: auto
       background-repeat: repeat
 
-  .details
-    height: 84px
-    padding-right: 36px
-    bottom: 0
-    left: 0
-    overflow: hidden
-    padding: 9px 12px
-    position: absolute
-    right: 0
-    top: 0
-
   .board-list-item-sub-name
     color: rgba(255, 255, 255, .5)
     display: block
diff --git a/client/components/boards/colors.styl b/client/components/boards/colors.styl
index 1097b20a..ff351880 100644
--- a/client/components/boards/colors.styl
+++ b/client/components/boards/colors.styl
@@ -2,9 +2,9 @@
 // http://flatuicolors.com
 //
 // XXX Centralizing all these properties in a single file just because their
-// value is derivedform the same color, doesn't make any sense. We should create
-// a macro that would generate 6 version of a given propertie and dispatch this
-// list in the other stylus files.
+// value is derived from the same color, doesn't make any sense. We should
+// create a mixin/macro that would generate 6 versions of a given property and
+// dispatch this list in the other stylus files.
 setBoardColor(color)
   &#header,
   &.sk-spinner div,