diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index d8bfbce31..8014f0f6a 100644 --- a/www/kanban/app-kanban.less +++ b/www/kanban/app-kanban.less @@ -33,7 +33,12 @@ background-color: #c9c9c9; } .kanban-board { - background-color: @board-bg; + .kanban-board-inner { + background-color: @board-bg; + max-height: 100%; + display: flex; + flex-flow: column; + } color: @cryptpad_text_col; } @@ -42,49 +47,49 @@ } .cp-kanban-palette-color1 { background-color: @palette1; - &.kanban-board { + &.kanban-board-inner { background-color: lighten(@palette1, 5%); } } .cp-kanban-palette-color2 { background-color: @palette2; - &.kanban-board { + &.kanban-board-inner { background-color: lighten(@palette2, 5%); } } .cp-kanban-palette-color3 { background-color: @palette3; - &.kanban-board { + &.kanban-board-inner { background-color: lighten(@palette3, 10%); } } .cp-kanban-palette-color4 { background-color: @palette4; - &.kanban-board { + &.kanban-board-inner { background-color: lighten(@palette4, 10%); } } .cp-kanban-palette-color5 { background-color: @palette5; - &.kanban-board { + &.kanban-board-inner { background-color: lighten(@palette5, 10%); } } .cp-kanban-palette-color6 { background-color: @palette6; - &.kanban-board { + &.kanban-board-inner { background-color: lighten(@palette6, 5%); } } .cp-kanban-palette-color7 { background-color: @palette7; - &.kanban-board { + &.kanban-board-inner { background-color: lighten(@palette7, 5%); } } .cp-kanban-palette-color8 { background-color: @palette8; - &.kanban-board { + &.kanban-board-inner { background-color: lighten(@palette8, 5%); } } diff --git a/www/kanban/jkanban.js b/www/kanban/jkanban.js index f34875931..1678328fb 100644 --- a/www/kanban/jkanban.js +++ b/www/kanban/jkanban.js @@ -407,6 +407,8 @@ var boardNode = document.createElement('div'); boardNode.dataset.id = board.id; boardNode.classList.add('kanban-board'); + var boardNodeInner = document.createElement('div'); + boardNodeInner.classList.add('kanban-board-inner'); //set style if (self.options.responsivePercentage) { boardNode.style.width = boardWidth + '%'; @@ -430,7 +432,7 @@ if (/color/.test(board.color)) { // Palette color headerBoard.classList.add('cp-kanban-palette-'+board.color); - boardNode.classList.add('cp-kanban-palette-'+board.color); + boardNodeInner.classList.add('cp-kanban-palette-'+board.color); } else if (!/^[0-9a-f]{6}$/.test(board.color)) { // "string" color (red, blue, etc.) headerBoard.classList.add("kanban-header-" + board.color); @@ -472,9 +474,10 @@ __onAddItemClickHandler(addBoardItem); //board assembly - boardNode.appendChild(headerBoard); - boardNode.appendChild(contentBoard); - boardNode.appendChild(footerBoard); + boardNode.appendChild(boardNodeInner); + boardNodeInner.appendChild(headerBoard); + boardNodeInner.appendChild(contentBoard); + boardNodeInner.appendChild(footerBoard); return boardNode; };