Merge branch 'sprint/168_sunhao/improve_kanban' into 'sprint/168'

* Adjust kanban layout.

See merge request easycorp/zentaopms!278

module/common/view/kanban.html.php

@@ -367,18 +367,17 @@ function affixKanbanHeader($kanbanBoard, affixed)
  */
 function updateKanbanAffixState()
 {
-    var $boards = $('.kanban-board');
+    var $boards           = $('.kanban-board');
     var $lastAffixedBoard = $boards.filter('.kanban-affixed');
+    var containerTop      = window.kanbanAffixContainer ? $(window.kanbanAffixContainer)[0].getBoundingClientRect().top : 0;
     var $currentAffixedBoard;
-    var currentOffsetTop = 0;
-    var scrollTop = $(window).scrollTop();
+
     $('.kanban-board').each(function()
     {
         var $board = $(this);
-        var offsetTop = $board.offset().top;
-        if(scrollTop >= offsetTop && offsetTop > currentOffsetTop && scrollTop < (offsetTop + $board.outerHeight() - 72))
+        var bounds = $board[0].getBoundingClientRect();
+        if(bounds.top < containerTop && bounds.bottom > (containerTop))
         {
-            currentOffsetTop = offsetTop;
             $currentAffixedBoard = $board;
         }
     });
@@ -399,7 +398,6 @@ $.extend($.fn.kanban.Constructor.DEFAULTS,
 {
     readonly: true,
     maxColHeight: 260,
-    /* laneItemsClass: 'scrollbar-hover', */ // only show scrollbar on mouse hover
     itemRender: renderKanbanItem,
     useFlex: false,
     showCount: true,
@@ -448,7 +446,7 @@ $(function()
         updateKanbanAffixState();
         updateTimer = null;
     };
-    $(window).on('scroll resize', function(e)
+    $(window.kanbanAffixContainer || window).on('scroll resize', function(e)
     {
         if(updateTimer)
         {

module/execution/css/kanban.css

@@ -1,3 +1,4 @@
+#main {padding-bottom: 10px;}
 #main > .container {max-width: 1960px!important; padding: 0 10px}
 
 .kanban + .kanban {margin-top: 15px}
@@ -29,6 +30,12 @@
 .kanban-affixed .kanban-header-col > .title > .text,
 .kanban-affixed .kanban-header-col > .title > .count {color: #fff!important;}
 
+#kanbanContainer {margin: 0;}
+#kanbanContainer > .panel-body {overflow: auto;}
+#kanbans .kanban {min-height: initial;}
+#kanbans .kanban-lane {min-height: 150px;}
+#kanbans .kanban-affixed > .kanban-header {top: 100px;}
+
 .dropdown-menu a {text-align: left;}
 .scrollbar-hover {max-height: 2000px; overflow: scroll !important;}
 .c-type, .c-group {width: 150px !important; overflow: unset;}

module/execution/js/kanban.js

@@ -636,6 +636,14 @@ function createTaskMenu(options)
     return items;
 }
 
+/** Resize kanban container size */
+function resizeKanbanContainer()
+{
+    var $container = $('#kanbanContainer');
+    var maxHeight = window.innerHeight - 98 - 15;
+    $container.children('.panel-body').css('max-height', maxHeight);
+}
+
 /* Define menu creators */
 window.menuCreators =
 {
@@ -647,6 +655,9 @@ window.menuCreators =
     task:         createTaskMenu,
 };
 
+/* Set kanban affix container */
+window.kanbanAffixContainer = '#kanbanContainer>.panel-body';
+
 /* Overload kanban default options */
 $.extend($.fn.kanban.Constructor.DEFAULTS,
 {
@@ -657,7 +668,7 @@ $.extend($.fn.kanban.Constructor.DEFAULTS,
         {
             maxWidth = Math.max(maxWidth, $(this).outerWidth());
         });
-        $('#kanbanContainer').css('min-width', maxWidth + 40);
+        $('#kanbans').css('min-width', maxWidth);
     }
 });
 
@@ -726,6 +737,10 @@ $(function()
         $.zui.ContextMenu.show(items, items.$options || {event: event});
     });
 
+    /* Resize kanban container on window resize */
+    resizeKanbanContainer();
+    $(window).on('resize', resizeKanbanContainer);
+
     /* Hide contextmenu when page scroll */
     $(window).on('scroll', function()
     {