Start designing the card details pane

Implement a dynamic overflow to focus sight on the pane.

3 files changed, 17 insertions, 32 deletions

diff --git a/client/components/lists/body.jade b/client/components/lists/body.jade
index 9f9d04ad..f1159ce5 100644
--- a/client/components/lists/body.jade
+++ b/client/components/lists/body.jade
@@ -16,8 +16,7 @@ template(name="listBody")
 
 template(name="addCardForm")
   .minicard.minicard-composer.js-composer
-    .minicard-labels.js-minicard-composer-labels
-    .minicard-details.clearfix
+    .minicard-detailss.clearfix
       textarea.minicard-composer-textarea.js-card-title(autofocus)
       .minicard-members.js-minicard-composer-members
   .add-controls.clearfix
diff --git a/client/components/lists/header.jade b/client/components/lists/header.jade
index b8548278..e319aa93 100644
--- a/client/components/lists/header.jade
+++ b/client/components/lists/header.jade
@@ -3,11 +3,14 @@ template(name="listHeader")
     +inlinedForm
       +editListTitleForm
     else
-      h2.list-header-name.js-open-inlined-form= title
+      h2.list-header-name(
+        class="{{#if currentUser.isBoardMember}}js-open-inlined-form is-editable{{/if}}")
+        = title
       a.list-header-menu-icon.fa.fa-bars.js-open-list-menu
 
 template(name="editListTitleForm")
-  input.field.single-line(type="text" value=title autofocus)
-  .edit-controls.clearfix
-    button.primary.confirm(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+  .list-composer
+    input.field.single-line(type="text" value=title autofocus)
+    .edit-controls.clearfix
+      button.primary.confirm(type="submit") {{_ 'save'}}
+      a.fa.fa-times-thin.js-close-inlined-form
diff --git a/client/components/lists/main.styl b/client/components/lists/main.styl
index 98b4abf4..bfa0f348 100644
--- a/client/components/lists/main.styl
+++ b/client/components/lists/main.styl
@@ -8,7 +8,7 @@
   position: relative
   // Even if this background color is the same as the body we can't leave it
   // transparent, because that won't work during a list drag.
-  background: darken(white, 10%)
+  background: darken(white, 13%)
   height: 100%
   border-left: 1px solid darken(white, 20%)
   padding: 0
@@ -17,7 +17,7 @@
     margin-left: 5px
     border-left: none
 
-  .card-detail + &
+  .card-details + &
     border-left: none
 
   &.ui-sortable-helper
@@ -32,13 +32,15 @@
     box-shadow: none
     height: 100px
 
-  &.list-composer
+  &.list-composer, & list-composer
     padding: 17px
 
+    form
+      margin-top: -5px
+
     .list-name-input
-      background: rgba(0, 0, 0, .05)
+      background: rgba(255, 255, 255, .4)
       border-color: #aaa
-      box-shadow: inset 0 1px 8px rgba(0, 0, 0, .15)
       display: block
       margin: 0
       transition: margin 85ms ease-in,
@@ -52,14 +54,9 @@
       overflow: hidden
       margin: 4px 0 0
 
-      input[type=submit]
-        margin-top: 0
-        min-height: 30px
-        height: 30px
-
 .list-header
   flex: 0 0 auto
-  margin: 20px 15px 4px
+  margin: 20px 12px 4px
   position: relative
   min-height: 20px
 
@@ -76,17 +73,9 @@
     word-wrap: break-word
 
   .list-header-menu-icon
-    background-clip: content-box
-    background-origin: content-box
-    // padding: 6px 8px
     position: absolute
     top: 0
     right: 0
-    color: #a6a6a6
-
-  .list-header-num-cards
-    color: #8c8c8c
-    margin: 0
 
 .list-body
   flex: 1
@@ -119,9 +108,3 @@
       background: #fafafa
       color: #222
       box-shadow: 0 1px 2px rgba(0,0,0,.2)
-
-@keyframes fadeIn
-  from
-    opacity: 0
-  to
-    opacity: 1