Improve list title form

2 files changed, 24 insertions, 23 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