Improve list title form

6 files changed, 33 insertions, 46 deletions

diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade
index 18673e89..65564623 100644
--- a/client/components/boards/boardBody.jade
+++ b/client/components/boards/boardBody.jade
@@ -27,13 +27,14 @@ template(name="boardBody")
 
 template(name="addListForm")
   .list.js-list.list-composer.js-list-composer
-    +inlinedForm(autoclose=false)
-      input.list-name-input(type="text" placeholder="{{_ 'add-list'}}"
-        autocomplete="off" autofocus)
-      .edit-controls.clearfix
-        button.primary.confirm(type="submit") {{_ 'save'}}
-        a.fa.fa-times-thin.js-close-inlined-form
-    else
-      a.js-open-inlined-form
-        i.fa.fa-plus
-        | {{_ 'add-list'}}
+    .list-header
+      +inlinedForm(autoclose=false)
+        input.list-name-input.full-line(type="text" placeholder="{{_ 'add-list'}}"
+          autocomplete="off" autofocus)
+        .edit-controls.clearfix
+          button.primary.confirm(type="submit") {{_ 'save'}}
+          a.fa.fa-times-thin.js-close-inlined-form
+      else
+        a.open-list-composer.js-open-inlined-form
+          i.fa.fa-plus
+          | {{_ 'add-list'}}
diff --git a/client/components/boards/boardBody.styl b/client/components/boards/boardBody.styl
index 868a4456..df5696a2 100644
--- a/client/components/boards/boardBody.styl
+++ b/client/components/boards/boardBody.styl
@@ -17,6 +17,19 @@ position()
     position: cover
     transition: margin .1s
 
+    &.is-sibling-sidebar-open
+      margin-right: 248px
+
+    .lists
+      align-items: flex-start
+      display: flex
+      flex-direction: row
+      margin: 0 0 10px
+      padding: 0 40px 5px 0
+      overflow-x: auto
+      overflow-y: hidden
+      position: cover
+
     .board-overlay
       position: cover
       top: -100px
@@ -26,20 +39,7 @@ position()
       animation: fadeIn 0.2s
       z-index: 16
 
-    &.is-sibling-sidebar-open
-      margin-right: 248px
-
     &.is-dragging-active
       .open-minicard-composer,
       .minicard-wrapper.is-checked
         display: none
-
-  .lists
-    align-items: flex-start
-    display: flex
-    flex-direction: row
-    margin: 0 0 10px
-    padding: 0 40px 5px 0
-    overflow-x: auto
-    overflow-y: hidden
-    position: cover
diff --git a/client/components/forms/forms.styl b/client/components/forms/forms.styl
index 06ae1302..83d25370 100644
--- a/client/components/forms/forms.styl
+++ b/client/components/forms/forms.styl
@@ -110,7 +110,6 @@ button
   background: #cfcfcf
   background: linear-gradient(#cfcfcf, #c2c2c2)
   border: none
-  box-shadow: 0 1px 0 #8c8c8c
   cursor: pointer
   display: inline-block
   font-weight: 700
diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl
index 3f4e9eba..1848459c 100644
--- a/client/components/lists/list.styl
+++ b/client/components/lists/list.styl
@@ -12,6 +12,7 @@
   height: 100%
   border-left: 1px solid darken(white, 20%)
   padding: 0
+  float: left
 
   &:first-child
     margin-left: 5px
@@ -35,27 +36,13 @@
     box-shadow: none
     height: 100px
 
-  &.list-composer, & list-composer
-    padding: 17px
-
-    form
-      margin-top: -5px
+  &.list-composer, & .list-composer
+    .open-list-composer
+      color: #8c8c8c
 
     .list-name-input
-      background: rgba(255, 255, 255, .4)
-      border-color: #aaa
-      display: block
-      margin: 0
-      transition: margin 85ms ease-in,
-        background 85ms ease-in
-      width: 100%
-
-    .edit-controls
-      height: 32px
-      transition: margin 85ms ease-in,
-        height 85ms ease-in
-      overflow: hidden
-      margin: 4px 0 0
+      background: white
+      margin: -3px 0 8px
 
 .list-header
   flex: 0 0 auto
diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade
index d87078cd..7d01f1ba 100644
--- a/client/components/lists/listHeader.jade
+++ b/client/components/lists/listHeader.jade
@@ -11,7 +11,7 @@ template(name="listHeader")
 
 template(name="editListTitleForm")
   .list-composer
-    input.full-line(type="text" value="{{../trySomething}}" autofocus)
+    input.list-name-input.full-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/sidebar/sidebar.styl b/client/components/sidebar/sidebar.styl
index 3ea4cf04..151a8f19 100644
--- a/client/components/sidebar/sidebar.styl
+++ b/client/components/sidebar/sidebar.styl
@@ -89,10 +89,10 @@
   height: @width
   left: -@width
   position: absolute
-  top: 12px
+  top: 0px
   z-index: 15
   background: darken(white, 3%)
-  border-radius: left 3px
+  border-bottom-left-radius: 3px
   box-shadow: -4px 0px 7px -4px darken(white, 30%)
   color: darken(white, 50%)
   transition: left .1s