AS1024
/
Kanboard-Prod
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add column vertical scrolling and set column height dynamically

This commit is contained in:
Frederic Guillot 2015-08-02 15:47:13 -04:00
parent a0004fb173
commit f04ec0700c
7 changed files with 89 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ChangeLog
View File

@ -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

41
app/Template/board/table_swimlane.php
View File

@ -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): ?>
<?php if ($not_editable): ?>
<td>
<?php else: ?>
<td
id="column-<?= $column['id'] ?>"
class="column <?= $column['task_limit'] && count($column['tasks']) > $column['task_limit'] ? 'task-limit-warning' : '' ?>"
data-column-id="<?= $column['id'] ?>"
data-swimlane-id="<?= $swimlane['id'] ?>"
data-task-limit="<?= $column['task_limit'] ?>">
<?php endif ?>
<?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>
<td id="column-<?= $column['id'] ?>" class="<?= $column['task_limit'] && $column['nb_tasks'] > $column['task_limit'] ? 'board-task-list-limit' : '' ?>">
<div class="board-task-list" data-column-id="<?= $column['id'] ?>" data-swimlane-id="<?= $swimlane['id'] ?>" data-task-limit="<?= $column['task_limit'] ?>">
<?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 ?>
</div>
</td>
<?php endforeach ?>
</tr>

18
assets/css/app.css
View File

@ -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;

18
assets/css/print.css
View File

@ -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;

18
assets/css/src/board.css
View File

@ -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;
}

41
assets/js/app.js
View File

File diff suppressed because one or more lines are too long

13
assets/js/src/board.js
View File

@ -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);
}
});