Add column vertical scrolling and set column height dynamically

ChangeLog

@@ -11,6 +11,8 @@ New features:
 
 Improvements:
 
+* Add column vertical scrolling
+* Set dynamically column height based on viewport size
 * Enable support for Github Enterprise when using Github Authentication
 * Update iCalendar library to display organizer name
 

app/Template/board/table_swimlane.php

@@ -1,4 +1,5 @@
 <tr id="swimlane-<?= $swimlane['id'] ?>">
+    <!-- swimlane toggle -->
     <?php if (! $hide_swimlane): ?>
        <th>
            <?php if (! $not_editable && $swimlane['nb_tasks'] > 0): ?>
@@ -11,8 +12,9 @@
         </th>
     <?php endif ?>
 
+    <!-- column header title -->
     <?php foreach ($swimlane['columns'] as $column): ?>
-    <th class="board-column">
+    <th class="board-column-header">
         <?php if (! $not_editable): ?>
             <div class="board-add-icon">
                 <?= $this->url->link('+', 'taskcreation', 'create', array('project_id' => $column['project_id'], 'column_id' => $column['id'], 'swimlane_id' => $swimlane['id']), false, 'task-board-popover', t('Add a new task')) ?>
@@ -45,8 +47,9 @@
     </th>
     <?php endforeach ?>
 </tr>
-<tr class="swimlane-row-<?= $swimlane['id'] ?>">
+<tr class="board-swimlane swimlane-row-<?= $swimlane['id'] ?>">
 
+    <!-- swimlane title -->
     <?php if (! $hide_swimlane): ?>
         <th class="board-swimlane-title">
             <?= $this->e($swimlane['name']) ?>
@@ -57,27 +60,19 @@
         </th>
     <?php endif ?>
 
+    <!-- task list -->
     <?php foreach ($swimlane['columns'] as $column): ?>
-
+        <td id="column-<?= $column['id'] ?>" class="<?= $column['task_limit'] && $column['nb_tasks'] > $column['task_limit'] ? 'board-task-list-limit' : '' ?>">
-        <?php if ($not_editable): ?>
+            <div class="board-task-list" data-column-id="<?= $column['id'] ?>" data-swimlane-id="<?= $swimlane['id'] ?>" data-task-limit="<?= $column['task_limit'] ?>">
-            <td>
+                <?php foreach ($column['tasks'] as $task): ?>
-        <?php else: ?>
+                    <?= $this->render($not_editable ? 'board/task_public' : 'board/task_private', array(
-        <td
+                        'project' => $project,
-            id="column-<?= $column['id'] ?>"
+                        'task' => $task,
-            class="column <?= $column['task_limit'] && count($column['tasks']) > $column['task_limit'] ? 'task-limit-warning' : '' ?>"
+                        'board_highlight_period' => $board_highlight_period,
-            data-column-id="<?= $column['id'] ?>"
+                        'not_editable' => $not_editable,
-            data-swimlane-id="<?= $swimlane['id'] ?>"
+                    )) ?>
-            data-task-limit="<?= $column['task_limit'] ?>">
+                <?php endforeach ?>
-        <?php endif ?>
+            </div>
-
+        </td>
-        <?php foreach ($column['tasks'] as $task): ?>
-            <?= $this->render($not_editable ? 'board/task_public' : 'board/task_private', array(
-                'project' => $project,
-                'task' => $task,
-                'board_highlight_period' => $board_highlight_period,
-                'not_editable' => $not_editable,
-            )) ?>
-        <?php endforeach ?>
-    </td>
     <?php endforeach ?>
 </tr>

assets/css/app.css

@@ -775,11 +775,11 @@ nav .active a {
     width: 120px; /* Width of swimlane column */
 }
 
-#board th.board-column {
+#board th.board-column-header {
     width: 240px; /* Width of other columns, in default [horizontal scrolling] view mode */
 }
 
-#board th.board-column.board-column-compact {
+#board th.board-column-header.board-column-compact {
     width: initial; /* Do not force the width of the columns in compact view mode */
 }
 
@@ -793,10 +793,6 @@ nav .active a {
     vertical-align: top;
 }
 
-#board td.task-limit-warning {
-    background-color: #DF5353;
-}
-
 /* column header */
 .board-add-icon {
     float: left;
@@ -838,6 +834,16 @@ nav .active a {
 .board-swimlane-title {
     vertical-align: top;
 }
+
+/* board task list */
+.board-task-list {
+    height: 500px;
+    overflow: auto;
+}
+
+.board-task-list-limit {
+    background-color: #DF5353;
+}
 /* task inside the board */
 .task-board {
     position: relative;

assets/css/print.css

@@ -181,11 +181,11 @@ th a:hover {
     width: 120px; /* Width of swimlane column */
 }
 
-#board th.board-column {
+#board th.board-column-header {
     width: 240px; /* Width of other columns, in default [horizontal scrolling] view mode */
 }
 
-#board th.board-column.board-column-compact {
+#board th.board-column-header.board-column-compact {
     width: initial; /* Do not force the width of the columns in compact view mode */
 }
 
@@ -199,10 +199,6 @@ th a:hover {
     vertical-align: top;
 }
 
-#board td.task-limit-warning {
-    background-color: #DF5353;
-}
-
 /* column header */
 .board-add-icon {
     float: left;
@@ -244,6 +240,16 @@ th a:hover {
 .board-swimlane-title {
     vertical-align: top;
 }
+
+/* board task list */
+.board-task-list {
+    height: 500px;
+    overflow: auto;
+}
+
+.board-task-list-limit {
+    background-color: #DF5353;
+}
 /* task inside the board */
 .task-board {
     position: relative;

assets/css/src/board.css

@@ -33,11 +33,11 @@
     width: 120px; /* Width of swimlane column */
 }
 
-#board th.board-column {
+#board th.board-column-header {
     width: 240px; /* Width of other columns, in default [horizontal scrolling] view mode */
 }
 
-#board th.board-column.board-column-compact {
+#board th.board-column-header.board-column-compact {
     width: initial; /* Do not force the width of the columns in compact view mode */
 }
 
@@ -51,10 +51,6 @@
     vertical-align: top;
 }
 
-#board td.task-limit-warning {
-    background-color: #DF5353;
-}
-
 /* column header */
 .board-add-icon {
     float: left;
@@ -96,3 +92,13 @@
 .board-swimlane-title {
     vertical-align: top;
 }
+
+/* board task list */
+.board-task-list {
+    height: 500px;
+    overflow: auto;
+}
+
+.board-task-list-limit {
+    background-color: #DF5353;
+}

assets/js/src/board.js

@@ -43,11 +43,20 @@
         });
     }
 
+    function resize_column()
+    {
+        var position = $(".board-swimlane").position();
+        $(".board-task-list").height($(window).height() - position.top);
+    }
+
     // Setup the board
     function board_load_events()
     {
+        // Resize column height
+        resize_column();
+
         // Drag and drop
-        $(".column").sortable({
+        $(".board-task-list").sortable({
             delay: 300,
             distance: 5,
             connectWith: ".column",
@@ -261,6 +270,8 @@
             board_load_events();
             compactview_load_events();
             keyboard_shortcuts();
+
+            $(window).resize(resize_column);
         }
     });