swimlane-view: have the swimlane header horizontal

This allows to use the header as a separator between swimlanes.

This will be most useful when we can set the background color of these
headers.

Author: bentiss

client/components/boards/boardBody.jade

@@ -23,6 +23,8 @@ template(name="boardBody")
       if isViewSwimlanes
         each currentBoard.swimlanes
           +swimlane(this)
+        if currentUser.isBoardMember
+          +addSwimlaneForm
       if isViewLists
         +listsGroup
       if isViewCalendar

client/components/lists/list.styl

@@ -10,7 +10,6 @@
   // transparent, because that won't work during a list drag.
   background: darken(white, 13%)
   border-left: 1px solid darken(white, 20%)
-  border-bottom: 1px solid #CCC
   padding: 0
   float: left
 

client/components/swimlanes/swimlanes.jade

@@ -1,21 +1,22 @@
 template(name="swimlane")
   .swimlane.js-lists.js-swimlane
     +swimlaneHeader
-    if isMiniScreen
-      if currentList
-        +list(currentList)
+    .swimlane.list-group.js-lists
+      if isMiniScreen
+        if currentList
+          +list(currentList)
+        else
+          each currentBoard.lists
+            +miniList(this)
+          if currentUser.isBoardMember
+            +addListForm
       else
         each currentBoard.lists
-          +miniList(this)
+          +list(this)
+          if currentCardIsInThisList _id ../_id
+            +cardDetails(currentCard)
         if currentUser.isBoardMember
           +addListForm
-    else
-      each currentBoard.lists
-        +list(this)
-        if currentCardIsInThisList _id ../_id
-          +cardDetails(currentCard)
-      if currentUser.isBoardMember
-        +addListAndSwimlaneForm
 
 template(name="listsGroup")
   .swimlane.list-group.js-lists
@@ -35,19 +36,8 @@ template(name="listsGroup")
       if currentUser.isBoardMember
         +addListForm
 
-template(name="addListAndSwimlaneForm")
+template(name="addSwimlaneForm")
   .list.list-composer.js-list-composer
-    .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'}}
     .list-header
       +inlinedForm(autoclose=false)
         input.swimlane-name-input.full-line(type="text" placeholder="{{_ 'add-swimlane'}}"

client/components/swimlanes/swimlanes.js

@@ -185,37 +185,22 @@ BlazeComponent.extendComponent({
     return [{
       submit(evt) {
         evt.preventDefault();
-        let titleInput = this.find('.list-name-input');
-        if (titleInput) {
-          const title = titleInput.value.trim();
-          if (title) {
-            Lists.insert({
-              title,
-              boardId: Session.get('currentBoard'),
-              sort: $('.list').length,
-            });
-
-            titleInput.value = '';
-            titleInput.focus();
-          }
-        } else {
-          titleInput = this.find('.swimlane-name-input');
-          const title = titleInput.value.trim();
-          if (title) {
-            Swimlanes.insert({
-              title,
-              boardId: Session.get('currentBoard'),
-              sort: $('.swimlane').length,
-            });
-
-            titleInput.value = '';
-            titleInput.focus();
-          }
+        let titleInput = this.find('.swimlane-name-input');
+        const title = titleInput.value.trim();
+        if (title) {
+          Swimlanes.insert({
+            title,
+            boardId: Session.get('currentBoard'),
+            sort: $('.swimlane').length,
+          });
+
+          titleInput.value = '';
+          titleInput.focus();
         }
       },
     }];
   },
-}).register('addListAndSwimlaneForm');
+}).register('addSwimlaneForm');
 
 Template.swimlane.helpers({
   canSeeAddList() {

client/components/swimlanes/swimlanes.styl

@@ -5,7 +5,7 @@
   // transparent, because that won't work during a swimlane drag.
   background: darken(white, 13%)
   display: flex
-  flex-direction: row
+  flex-direction: column
   overflow: 0;
   max-height: 100%
 
@@ -27,20 +27,15 @@
   .swimlane-header-wrap
     display: flex;
     flex-direction: row;
-    flex: 0 0 50px;
-    padding-bottom: 30px;
-    border-bottom: 1px solid #CCC
+    flex: 0 0 24px;
+    background-color: #ccc;
 
     .swimlane-header
-      -ms-writing-mode: tb-rl;
-      writing-mode: vertical-rl;
-      transform: rotate(180deg);
       font-size: 14px;
-      line-height: 50px;
-      margin-top: 50px;
+      padding: 5px 5px
       font-weight: bold;
       min-height: 9px;
-      width: 50px;
+      width: 100%;
       overflow: hidden;
       -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
@@ -49,7 +44,8 @@
 
     .swimlane-header-menu
       position: absolute
-      padding: 20px 20px
+      padding: 5px 5px
 
 .list-group
+  flex-direction: row
   height: 100%