Moved form outside of list

This was causing issues with moving from the done list

3 files changed, 32 insertions, 23 deletions

diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6
index bc74a7b23c9..208aac504fd 100644
--- a/app/assets/javascripts/boards/components/board_list.js.es6
+++ b/app/assets/javascripts/boards/components/board_list.js.es6
@@ -78,7 +78,7 @@
         disabled: this.disabled,
         filter: '.board-list-count, .board-new-issue-form',
         onStart: (e) => {
-          const card = this.$refs.issue[e.oldIndex - 1];
+          const card = this.$refs.issue[e.oldIndex];
 
           Store.moving.issue = card.issue;
           Store.moving.list = card.list;
@@ -89,7 +89,7 @@
           gl.issueBoards.BoardsStore.moveIssueToList(Store.moving.list, this.list, Store.moving.issue);
         },
         onRemove: (e) => {
-          this.$refs.issue[e.oldIndex - 1].$destroy(true);
+          this.$refs.issue[e.oldIndex].$destroy(true);
         }
       });
 
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 46e92b8a187..6e6cb521dbc 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -162,6 +162,10 @@ lex
   list-style: none;
   overflow-y: scroll;
   overflow-x: hidden;
+
+  &.is-smaller {
+    height: calc(100% - 185px);    
+  }
 }
 
 .board-list-loading {
@@ -234,6 +238,10 @@ lex
   }
 }
 
+.board-new-issue-form {
+  margin: 5px;
+}
+
 .board-issue-count-holder {
   margin-top: -3px;
 
@@ -251,7 +259,7 @@ lex
   border-radius: $border-radius-base;
   border-color: $border-color;
   border-style: solid;
-  border-width: 1px 1px 1px 1px;
+  border-width: 1px;
 
   &.has-btn {
     border-top-right-radius: 0;
diff --git a/app/views/projects/boards/components/_board.html.haml b/app/views/projects/boards/components/_board.html.haml
index bd60e56a340..efec465bbb2 100644
--- a/app/views/projects/boards/components/_board.html.haml
+++ b/app/views/projects/boards/components/_board.html.haml
@@ -37,28 +37,29 @@
         ":issue-link-base" => "issueLinkBase" }
         .board-list-loading.text-center{ "v-if" => "loading" }
           = icon("spinner spin")
+        - if can? current_user, :create_issue, @project
+          %board-new-issue{ "inline-template" => true,
+            ":list" => "list",
+            ":show-issue-form.sync" => "showIssueForm",
+            "v-show" => "list.type !== 'done' && showIssueForm" }
+            .card.board-new-issue-form
+              %form{ "@submit" => "submit($event)" }
+                %label.label-light
+                  Title
+                %input.form-control{ type: "text",
+                  "v-model" => "title",
+                  "v-el:input" => true }
+                .clearfix.prepend-top-10
+                  %button.btn.btn-success.pull-left{ type: "submit",
+                    ":disabled" => "title === ''" }
+                    Submit issue
+                  %button.btn.btn-default.pull-right{ type: "button",
+                    "@click" => "cancel" }
+                    Cancel
         %ul.board-list{ "v-el:list" => true,
           "v-show" => "!loading",
-          ":data-board" => "list.id" }
-          - if can? current_user, :create_issue, @project
-            %board-new-issue{ "inline-template" => true,
-              ":list" => "list",
-              ":show-issue-form.sync" => "showIssueForm",
-              "v-show" => "list.type !== 'done' && showIssueForm" }
-              %li.card.board-new-issue-form
-                %form{ "@submit" => "submit($event)" }
-                  %label.label-light
-                    Title
-                  %input.form-control{ type: "text",
-                    "v-model" => "title",
-                    "v-el:input" => true }
-                  .clearfix.prepend-top-10
-                    %button.btn.btn-success.pull-left{ type: "submit",
-                      ":disabled" => "title === ''" }
-                      Submit issue
-                    %button.btn.btn-default.pull-right{ type: "button",
-                      "@click" => "cancel" }
-                      Cancel
+          ":data-board" => "list.id",
+          ":class" => "{ 'is-smaller': showIssueForm }" }
           = render "projects/boards/components/card"
           %li.board-list-count.text-center{ "v-if" => "showCount" }
             = icon("spinner spin", "v-show" => "list.loadingMore" )