Kanban: Move “Add Item” to Header

This patch moves the button to add new items to kanban boards to the
column headers.

The reasoning behind this change is that on larger boards the buttons at
the bottom may be pushed far away from the actual content, causing users
to constantly scroll up and down over the whole page just to add new
items.

This also helps on mobile devices since you may not see all of the
columns there due to the limited screen space. This means that you have
to remember which column you are working on to not accidentally add
items to the wrong column. This patch makes it clear to which  column
users add items since the button now resides next to the column title.
This commit is contained in:
Lars Kiesow 2019-10-09 22:04:31 +02:00
parent d9e7fc24fe
commit ef5a56954d
No known key found for this signature in database
GPG Key ID: 5DAFE8D9C823CE73
1 changed files with 3 additions and 4 deletions

View File

@ -395,17 +395,16 @@
contentBoard.appendChild(nodeItem);
}
//footer board
var footerBoard = document.createElement('footer');
//add button
var addBoardItem = document.createElement('button');
$(addBoardItem).addClass("kanban-additem btn btn-default fa fa-plus");
footerBoard.appendChild(addBoardItem);
addBoardItem.setAttribute('title', 'Add new item');
$(addBoardItem).addClass("btn btn-default fa fa-plus");
headerBoard.appendChild(addBoardItem);
__onAddItemClickHandler(addBoardItem);
//board assembly
boardNode.appendChild(headerBoard);
boardNode.appendChild(contentBoard);
boardNode.appendChild(footerBoard);
//board add
self.container.appendChild(boardNode);
}