From 6ad007f06eda3f3f676a9ca6f83105a69f82b7f4 Mon Sep 17 00:00:00 2001 From: Hao Sun Date: Wed, 17 Nov 2021 17:51:11 +0800 Subject: [PATCH] * task #44357, refactor executions kanban with kanban component and support dnd. --- module/common/view/kanban.html.php | 30 +++- module/execution/css/executionkanban.css | 31 +--- module/execution/js/executionkanban.js | 133 ++++++++++++++++++ .../execution/view/executionkanban.html.php | 107 +++----------- www/js/zui/kanban/min.css | 2 +- 5 files changed, 189 insertions(+), 114 deletions(-) create mode 100644 module/execution/js/executionkanban.js diff --git a/module/common/view/kanban.html.php b/module/common/view/kanban.html.php index 513942c37d..ff17ccea9b 100644 --- a/module/common/view/kanban.html.php +++ b/module/common/view/kanban.html.php @@ -43,9 +43,13 @@ #kanbanList .kanban-header-col[data-type="doingProject"] + .kanban-header-col[data-type="doingExecution"] {padding: 38px 10px 0;} #kanbanList .kanban-header-col[data-type="doingProject"]:after {content: attr(data-span-text); display: block; position: absolute; z-index: 10; left: 0; right: -100%; right: calc(-100% - 2px); top: 0; line-height: 36px; text-align: center; font-weight: bold; border-bottom: 2px solid #fff; background-color: #ededed;} #kanbanList .kanban-col[data-type="unclosedProduct"] .kanban-lane-items {height: 100%; display: flex; flex-direction: column; justify-content: center;} +#kanbanList .kanban-item.kanban-item-span, #kanbanList .kanban-col[data-type="unclosedProduct"] .kanban-item {background-color: transparent; border: none; padding: 0; text-align: center; box-shadow: none!important;} +#kanbanList .kanban-item.kanban-item-span:hover, #kanbanList .kanban-col[data-type="unclosedProduct"] .kanban-item:hover {box-shadow: none;} +#kanbanList .kanban-item.kanban-item-span > .title, #kanbanList .kanban-col[data-type="unclosedProduct"] .kanban-item > .title {white-space: normal;} + #kanbanList .kanban-col[data-type="normalRelease"] .kanban-item > .title {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; height: 38px;} #kanbanList .kanban-col[data-type="normalRelease"] .kanban-item > .title > .text {display: block; white-space: nowrap; text-overflow: clip; overflow: hidden;} #kanbanList .kanban-col[data-type="normalRelease"] .kanban-item > .title.has-icon > .text {margin-right: 5px; max-width: calc(100% - 20px);} @@ -84,6 +88,25 @@ function isEarlierThanToday(date) return $.zui.createDate(date).getTime() < window.todayBegin; } +/** + * Render normal text span item + * @param {Object} item Product item object + * @param {JQuery} $item Kanban item element + * @param {Object} col Column object + * @returns {JQuery} $item Kanban item element + */ +function renderSpanItem(item, $item) +{ + console.log('renderSpanItem', item, $item); + var $title = $item.find('.title'); + if(!$title.length) + { + $title = $('
').appendTo($item); + } + $title.text(item.name).attr('title', item.name); + return $item.addClass('kanban-item-span'); +} + /** * Render product item * @param {Object} item Product item object @@ -301,6 +324,8 @@ function renderDoingProjectItem(item, $item) /** All build-in columns renderers */ if(!window.columnRenderers) window.columnRenderers = { + span: renderSpanItem, + execution: renderExecutionItem, unclosedProduct: renderProductItem, unexpiredPlan: renderPlanItem, waitProject: renderProjectItem, @@ -334,8 +359,7 @@ function addColumnRenderer(columnType, renderer) function renderKanbanItem(item, $item, col, lane, kanban) { var columnRenderers = window.columnRenderers; - var cardType = col.cardType || lane.defaultCardType || kanban.defaultCardType; - var renderer = columnRenderers[col.type] || columnRenderers[cardType]; + var renderer = columnRenderers[col.cardType] || columnRenderers[col.type] || columnRenderers[lane.defaultCardType || kanban.defaultCardType]; if(renderer) return renderer(item, $item, col); return $item; } @@ -404,7 +428,7 @@ $.extend($.fn.kanban.Constructor.DEFAULTS, showZeroCount: true, onRenderHeaderCol: function($col, col) { - if(col.type === 'doingProject') $col.attr('data-span-text', doingText); + if(col.type === 'doingProject' && window.doingText) $col.attr('data-span-text', window.doingText); }, onRenderKanban: function($kanban, kanbanData) { diff --git a/module/execution/css/executionkanban.css b/module/execution/css/executionkanban.css index 9c341bbe51..74c9b4a126 100644 --- a/module/execution/css/executionkanban.css +++ b/module/execution/css/executionkanban.css @@ -1,24 +1,7 @@ -.main-table .table {cursor: default; border-collapse: unset;} - -.boards {display: table; table-layout: fixed; width: 100%; min-width: 140px;} -.board {display: table-cell; width: 25%; padding: 10px;} -.board > div {max-height: 230px; overflow: auto;} -.board:not(:last-child), .board-project {border-right: 2px solid #fff;} -.board-item {border: 1px solid #EBEBEB; padding: 5px 10px; cursor: default; border-radius: 2px; background-color: #fff;} -.board-item:hover {border-color: #ccc;} -.board-item + .board-item {margin-top: 10px;} - -#kanban {overflow-y: auto;} -#kanban thead > tr > th:not(:last-child) {border-right: 2px solid #efefef;} -#kanban tbody > tr > td {line-height: 24px;} -#kanban tbody > tr > td {background-color: #F5F5F5;} -#kanban tbody > tr:not(:last-child) > td {border-bottom: 5px solid #fff !important;} - -.s-doing .table-row .table-col:last-child, .c-progress {width: 30px; padding-left: 3px; padding-top: 1px;} -.table-row .table-col:first-child, .board-project {overflow: hidden; white-space: nowrap;} - -.table-grouped > tbody > tr, -.table-grouped > tbody > tr:hover {background: #fff !important;} - -.projectColor {width: 5px; padding: 0px !important; border-right: unset !important} -th .count {font-weight: 500; color: #8b91a2;} +#kanbanList .panel-body {padding: 10px!important;} +#kanbanList .kanban-header {min-height: 32px!important;} +#kanbanList .kanban-header-col {height: 32px!important; padding: 0!important;} +#kanbanList .kanban-header-col > .title {padding: 0 5px!important;} +#kanbanList .kanban-col[data-type="project"] .kanban-lane-items {height: 100%; display: flex; flex-direction: column; justify-content: center;} +#kanbanList .kanban-lane-name {width: 5px; margin-right: 15px;} +#kanbanList .kanban-lane-name > .text {display: none;} diff --git a/module/execution/js/executionkanban.js b/module/execution/js/executionkanban.js new file mode 100644 index 0000000000..3dc8822f84 --- /dev/null +++ b/module/execution/js/executionkanban.js @@ -0,0 +1,133 @@ +/** + * Process kanban data + * @returns {Object} kanban data + */ +function processKanbanData() +{ + /* Generate columns */ + var columns = [{id: 'project', type: 'project', name: window.langDoingProject, cardType: 'span'}]; + $.each(kanbanColumns, function(type, name) + { + columns.push({id: type, type: type, name: name, cardType: 'execution'}); + }); + + /* Format lanes data */ + var lanes = []; + $.each(kanbanGroup, function(projectID, statusMap) + { + var projectName = +projectID ? projectNames[projectID] : langMyExecutions; + var cards = {project: [{id: projectID, name: projectName}]}; + + $.each(kanbanColumns, function(type) + { + var cardList = []; + var executions = statusMap[type]; + + if(!executions) return; + + $.each(executions, function(index, execution) + { + var executionCard = $.extend({}, execution, {id: projectID + '-' + execution.id, _id: execution.id}); + cardList.push(executionCard); + }); + cards[type] = cardList; + }); + + lanes.push({id: projectID, name: projectName, cards: cards}); + }); + + return {id: 'executions', columns: columns, lanes: lanes}; +} + +/* +* Find drop columns +* @param {JQuery} $element Drag element +* @param {JQuery} $root Dnd root element +*/ +function findDropColumns($element, $root) +{ + var $col = $element.closest('.kanban-col'); + var col = $col.data(); + var lane = $col.closest('.kanban-lane').data(); + var kanbanID = $root.data('id'); + console.log('findDropColumns', {$element, $root, kanbanID, col, lane}); + var kanbanRules = window.kanbanDropRules ? window.kanbanDropRules[kanbanID] : null; + + if(!kanbanRules) return $root.find('.kanban-lane[data-id="' + lane.id + '"] .kanban-lane-col:not([data-type="project"],[data-type="' + col.type + '"])'); + + var colRules = kanbanRules[col.type]; + var lane = $col.closest('.kanban-lane').data('lane'); + return $root.find('.kanban-lane-col').filter(function() + { + if(!colRules) return false; + if(colRules === true) return true; + + var $newCol = $(this); + var newCol = $newCol.data(); + if(newCol.id === col.id) return false; + + var $newLane = $newCol.closest('.kanban-lane'); + var newLane = $newLane.data('lane'); + return colRules.indexOf(newCol.type) > -1 && newLane.id === lane.id; + }); +} + +/** + * Change column type for a card + * 变更卡片类型 + * @param {Object} card Card object + * @param {String} fromColType The column type before change + * @param {String} toColType The column type after change + * @param {String} kanbanID Kanban ID + */ +function changeCardColType(card, fromColType, toColType, kanbanID) +{ + /* TODO: Post data to server on change card type 将变更卡片类型操作提交到服务器 */ + console.log('TODO: Post data to server on change card type 将变更卡片类型操作提交到服务器', {card, fromColType, toColType, kanbanID}); + + /* + // TODO: The server must return a updated kanban data 服务器返回更新后的看板数据 + + // 调用 updateKanban 更新看板数据 + updateKanban(kanbanID, newKanbanData); + */ +} + +/** + * Handle finish drop task + * @param {Object} event Event object + * @returns {void} + */ +function handleFinishDrop(event) +{ + var $card = $(event.element); // The drag card + var $dragCol = $card.closest('.kanban-lane-col'); + var $dropCol = $(event.target); + + /* Get d-n-d(drag and drop) infos 获取拖放操作相关信息 */ + var card = $card.data('item'); + var fromColType = $dragCol.data('type'); + var toColType = $dropCol.data('type'); + var kanbanID = $card.closest('.kanban').data('id'); + + changeCardColType(card, fromColType, toColType, kanbanID); +} + +$(function() +{ + var kanbanGroup = window.kanbanGroup; + if(!kanbanGroup) return; + + $('#kanban').kanban( + { + data: processKanbanData(), + // noLaneName: true, + droppable: + { + selector: '.kanban-item:not(.kanban-item-span)', + target: findDropColumns, + finish: handleFinishDrop, + mouseButton: 'left' + }, + }); +}); diff --git a/module/execution/view/executionkanban.html.php b/module/execution/view/executionkanban.html.php index f9db4cf325..ed3a0d8d49 100644 --- a/module/execution/view/executionkanban.html.php +++ b/module/execution/view/executionkanban.html.php @@ -9,94 +9,29 @@ */ ?> -
- -
-

- execution->noExecutions;?> -

+ + +
+

execution->noExecutions;?>

+
+ +
+
+
+
- - - - - - - execution->kanbanColType as $status => $colName):?> - - - - - - - $executionList):?> - - - - - - - - - -
execution->doingProject . ' ' . $projectCount . '';?>' . $statusCount[$status] . '' : '');?>
-
-
- execution->myExecutions : zget($projects, $projectID);?> - -
-
- 		-
-
- execution->kanbanColType as $colStatus => $colName):?> -
-
- - -
status == 'doing' and isset($execution->delay)) echo "style='border-left: 3px solid red';";?>> -
-
- project) . ' / ' . $execution->name : $execution->name; - - if(common::hasPriv('execution', 'task')) - { - echo html::a($this->createLink('execution', 'task', "executionID=$execution->id"), $executionName, '', "title='{$executionName}'"); - } - else - { - echo "{$executionName}"; - } - ?> -
- -
-
-
-
hours->progress);?>
-
-
-
- -
-
- - -
-
- -
-
-
-
- + diff --git a/www/js/zui/kanban/min.css b/www/js/zui/kanban/min.css index 6bb1638fd2..7e4df8df43 100644 --- a/www/js/zui/kanban/min.css +++ b/www/js/zui/kanban/min.css @@ -3,4 +3,4 @@ * http://openzui.com * GitHub: https://github.com/easysoft/zui.git * Copyright (c) 2021 cnezsoft.com; Licensed MIT - */.kanban{min-height:300px}.kanban-header,.kanban-lane,.kanban-sub-lane{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;flex-direction:row;background-color:#f1f3f5;border-bottom:2px solid #fff;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.kanban-header{padding-left:20px;background-color:rgba(0,0,0,.07)}.kanban-no-lane-name .kanban-header{padding-left:0}.kanban-col{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.not-use-flex .kanban-col{-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}.no-flex .kanban-col{float:left}.kanban-col+.kanban-col{border-left:2px solid #fff}.kanban-header-col{position:relative;height:32px}.kanban-header-col>.title{display:block;height:32px;margin:0 32px;line-height:32px;text-align:center}.kanban-header-col>.title>.text{display:inline-block;max-width:100px;margin:0 5px;overflow:hidden;text-overflow:'';white-space:nowrap}.kanban-header-col>.title>.count,.kanban-header-col>.title>.icon{position:relative;top:-12px}.kanban-header-col>.title>.count{color:#8b91a2}.kanban-header-col[data-id=ADD]>.title{margin:6px;opacity:.7}.kanban-header-col[data-id=ADD]>.actions{display:none}.kanban-header-col>.actions{position:absolute;top:0;right:0}.kanban-header-col>.actions>.btn{min-width:32px}.kanban-header-col>.actions>.btn>.icon{opacity:.5}.kanban-header-has-parent>.kanban-header-col{height:64px;padding:16px 0}.kanban-header-parent-col{padding:0!important}.kanban-header-parent-col>.kanban-header-col{height:32px;padding:0}.kanban-header-sub-cols{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-top:-1px;margin-left:-2px;flex-direction:row;border-top:2px solid #fff;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row}.kanban-header-sub-cols>.kanban-col{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.no-flex .kanban-header-sub-cols{display:table;table-layout:fixed}.no-flex .kanban-header-sub-cols>.kanban-col{width:50%}.kanban-col:first-child>.kanban-header-sub-cols{margin-left:0}.kanban-lane{min-height:100px}.kanban-lane+.kanban-lane{margin-top:3px}.no-flex .kanban-lane{position:relative;padding-left:20px}.kanban-lane-name{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:20px;overflow:hidden;color:#fff;text-align:center;background-color:#3dc6fd;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}.kanban-lane-name>.text{position:absolute;top:5px;right:1px;bottom:5px;display:block;overflow:hidden;line-height:20px;text-align:center;white-space:normal;-webkit-writing-mode:tb-rl;-ms-writing-mode:tb-rl;writing-mode:tb-rl;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl}.no-flex .kanban-lane-name{position:absolute;top:0;bottom:0;left:0}.kanban-sub-lanes{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-direction:column;-webkit-box-flex:1;-webkit-flex:auto;-ms-flex:auto;flex:auto;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:stretch;-webkit-justify-content:stretch;-ms-flex-pack:stretch;justify-content:stretch;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column}.kanban-sub-lanes.no-sub-lane{background-color:#f1f3f5}.kanban-sub-lane{-webkit-box-flex:1;-webkit-flex:auto;-ms-flex:auto;flex:auto}.kanban-dragging .kanban-lane-col{-webkit-transition:-webkit-box-shadow .1s;-o-transition:box-shadow .1s;transition:-webkit-box-shadow .1s;transition:box-shadow .1s;transition:box-shadow .1s,-webkit-box-shadow .1s}.kanban-lane-col.drop-target{-webkit-box-shadow:inset 0 0 0 3px rgba(255,152,0,.25);box-shadow:inset 0 0 0 3px rgba(255,152,0,.25)}.kanban-lane-col.drop-to{-webkit-box-shadow:inset 0 0 1px 4px rgba(255,152,0,.75);box-shadow:inset 0 0 1px 4px rgba(255,152,0,.75)}.kanban-lane-col.drop-to .kanban-lane-actions>.btn{background-color:rgba(255,152,0,.25);border:1px dotted #ff9800}.kanban-lane-col.drop-to .kanban-lane-actions>.btn>span{opacity:0}.kanban-lane-col[data-type=EMPTY]{background-color:#fff}.kanban-lane-items{max-height:300px;padding:0 10px 10px;overflow:auto}.kanban-size-inited .kanban-lane-items{max-height:100%!important}.kanban-lane-actions{padding:10px 15px}.kanban-item{padding:8px 10px;margin-top:10px;background:#fff;border:1px solid #fff;border-radius:4px;-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);-webkit-transition:-webkit-box-shadow .2s,-webkit-transform .2s;-o-transition:box-shadow .2s,-o-transform .2s;transition:-webkit-box-shadow .2s,-webkit-transform .2s;transition:box-shadow .2s,transform .2s;transition:box-shadow .2s,transform .2s,-webkit-box-shadow .2s,-webkit-transform .2s,-o-transform .2s}.kanban-item.drag-from{background-color:#aaa;opacity:.2}.kanban-item:hover{border-color:rgba(0,0,0,.1);-webkit-box-shadow:0 4px 10px 0 rgba(0,0,0,.09);box-shadow:0 4px 10px 0 rgba(0,0,0,.09)}.kanban-item.drag-shadow{border-color:rgba(0,0,0,.2);-webkit-box-shadow:0 4px 10px 0 rgba(0,0,0,.05),0 4px 20px 0 rgba(0,0,0,.3);box-shadow:0 4px 10px 0 rgba(0,0,0,.05),0 4px 20px 0 rgba(0,0,0,.3);-webkit-transition:-webkit-box-shadow .2s,-webkit-transform .4s!important;-o-transition:box-shadow .2s,-o-transform .4s!important;transition:-webkit-box-shadow .2s,-webkit-transform .4s!important;transition:box-shadow .2s,transform .4s!important;transition:box-shadow .2s,transform .4s,-webkit-box-shadow .2s,-webkit-transform .4s,-o-transform .4s!important}.kanban-item.drag-shadow.in{-webkit-transform:scale(1.1) rotate(5deg);-ms-transform:scale(1.1) rotate(5deg);-o-transform:scale(1.1) rotate(5deg);transform:scale(1.1) rotate(5deg)}.kanban-dragging{cursor:move} \ No newline at end of file + */.kanban{min-height:300px}.kanban-header,.kanban-lane,.kanban-sub-lane{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;flex-direction:row;background-color:#f1f3f5;border-bottom:2px solid #fff;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.kanban-header{padding-left:20px;background-color:rgba(0,0,0,.07)}.kanban-no-lane-name .kanban-header{padding-left:0}.kanban-col{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.not-use-flex .kanban-col{-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}.no-flex .kanban-col{float:left}.kanban-col+.kanban-col{border-left:2px solid #fff}.kanban-header-col{position:relative;height:32px}.kanban-header-col>.title{display:block;height:32px;margin:0 32px;line-height:32px;text-align:center}.kanban-header-col>.title>.text{display:inline-block;margin:0 5px;overflow:hidden;text-overflow:'';white-space:nowrap}.kanban-header-col>.title>.count,.kanban-header-col>.title>.icon{position:relative;top:-12px}.kanban-header-col>.title>.count{color:#8b91a2}.kanban-header-col[data-id=ADD]>.title{margin:6px;opacity:.7}.kanban-header-col[data-id=ADD]>.actions{display:none}.kanban-header-col>.actions{position:absolute;top:0;right:0}.kanban-header-col>.actions>.btn{min-width:32px}.kanban-header-col>.actions>.btn>.icon{opacity:.5}.kanban-header-has-parent>.kanban-header-col{height:64px;padding:16px 0}.kanban-header-parent-col{padding:0!important}.kanban-header-parent-col>.kanban-header-col{height:32px;padding:0}.kanban-header-sub-cols{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-top:-1px;margin-left:-2px;flex-direction:row;border-top:2px solid #fff;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row}.kanban-header-sub-cols>.kanban-col{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.no-flex .kanban-header-sub-cols{display:table;table-layout:fixed}.no-flex .kanban-header-sub-cols>.kanban-col{width:50%}.kanban-col:first-child>.kanban-header-sub-cols{margin-left:0}.kanban-lane{min-height:100px}.kanban-lane+.kanban-lane{margin-top:3px}.no-flex .kanban-lane{position:relative;padding-left:20px}.kanban-lane-name{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:20px;overflow:hidden;color:#fff;text-align:center;background-color:#3dc6fd;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}.kanban-lane-name>.text{position:absolute;top:5px;right:1px;bottom:5px;display:block;overflow:hidden;line-height:20px;text-align:center;white-space:normal;-webkit-writing-mode:tb-rl;-ms-writing-mode:tb-rl;writing-mode:tb-rl;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl}.no-flex .kanban-lane-name{position:absolute;top:0;bottom:0;left:0}.kanban-sub-lanes{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-direction:column;-webkit-box-flex:1;-webkit-flex:auto;-ms-flex:auto;flex:auto;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:stretch;-webkit-justify-content:stretch;-ms-flex-pack:stretch;justify-content:stretch;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column}.kanban-sub-lanes.no-sub-lane{background-color:#f1f3f5}.kanban-sub-lane{-webkit-box-flex:1;-webkit-flex:auto;-ms-flex:auto;flex:auto}.kanban-dragging .kanban-lane-col{-webkit-transition:-webkit-box-shadow .1s;-o-transition:box-shadow .1s;transition:-webkit-box-shadow .1s;transition:box-shadow .1s;transition:box-shadow .1s,-webkit-box-shadow .1s}.kanban-lane-col.drop-target{-webkit-box-shadow:inset 0 0 0 3px rgba(255,152,0,.25);box-shadow:inset 0 0 0 3px rgba(255,152,0,.25)}.kanban-lane-col.drop-to{-webkit-box-shadow:inset 0 0 1px 4px rgba(255,152,0,.75);box-shadow:inset 0 0 1px 4px rgba(255,152,0,.75)}.kanban-lane-col.drop-to .kanban-lane-actions>.btn{background-color:rgba(255,152,0,.25);border:1px dotted #ff9800}.kanban-lane-col.drop-to .kanban-lane-actions>.btn>span{opacity:0}.kanban-lane-col[data-type=EMPTY]{background-color:#fff}.kanban-lane-items{max-height:300px;padding:0 10px 10px;overflow:auto}.kanban-size-inited .kanban-lane-items{max-height:100%!important}.kanban-lane-actions{padding:10px 15px}.kanban-item{padding:8px 10px;margin-top:10px;background:#fff;border:1px solid #fff;border-radius:4px;-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);-webkit-transition:-webkit-box-shadow .2s,-webkit-transform .2s;-o-transition:box-shadow .2s,-o-transform .2s;transition:-webkit-box-shadow .2s,-webkit-transform .2s;transition:box-shadow .2s,transform .2s;transition:box-shadow .2s,transform .2s,-webkit-box-shadow .2s,-webkit-transform .2s,-o-transform .2s}.kanban-item.drag-from{background-color:#aaa;opacity:.2}.kanban-item:hover{border-color:rgba(0,0,0,.1);-webkit-box-shadow:0 4px 10px 0 rgba(0,0,0,.09);box-shadow:0 4px 10px 0 rgba(0,0,0,.09)}.kanban-item.drag-shadow{border-color:rgba(0,0,0,.2);-webkit-box-shadow:0 4px 10px 0 rgba(0,0,0,.05),0 4px 20px 0 rgba(0,0,0,.3);box-shadow:0 4px 10px 0 rgba(0,0,0,.05),0 4px 20px 0 rgba(0,0,0,.3);-webkit-transition:-webkit-box-shadow .2s,-webkit-transform .4s!important;-o-transition:box-shadow .2s,-o-transform .4s!important;transition:-webkit-box-shadow .2s,-webkit-transform .4s!important;transition:box-shadow .2s,transform .4s!important;transition:box-shadow .2s,transform .4s,-webkit-box-shadow .2s,-webkit-transform .4s,-o-transform .4s!important}.kanban-item.drag-shadow.in{-webkit-transform:scale(1.1) rotate(5deg);-ms-transform:scale(1.1) rotate(5deg);-o-transform:scale(1.1) rotate(5deg);transform:scale(1.1) rotate(5deg)}.kanban-dragging{cursor:move} \ No newline at end of file