Add board horizontal scrolling

app/Template/board/filters.php

@@ -29,6 +29,11 @@
                             <i class="fa fa-calendar fa-fw"></i>
                             <?= $this->a(t('Calendar'), 'calendar', 'show', array('project_id' => $project['id'])) ?>
                         </li>
+                        <?php if ($project['is_public']): ?>
+                        <li>
+                            <i class="fa fa-share-alt fa-fw"></i> <?= $this->a(t('Public link'), 'board', 'readonly', array('token' => $project['token']), false, '', '', true) ?>
+                        </li>
+                        <?php endif ?>
                         <?php if ($this->acl->isManagerActionAllowed($project['id'])): ?>
                         <li>
                             <i class="fa fa-line-chart fa-fw"></i>

app/Template/board/show.php

@@ -1,27 +1,29 @@
-<?php if (isset($not_editable)): ?>
+<div id="board-container">
-    <table id="board">
+    <?php if (isset($not_editable)): ?>
-<?php else: ?>
+        <table id="board">
-    <table id="board"
-           data-project-id="<?= $project['id'] ?>"
-           data-check-interval="<?= $board_private_refresh_interval ?>"
-           data-save-url="<?= $this->u('board', 'save', array('project_id' => $project['id'])) ?>"
-           data-check-url="<?= $this->u('board', 'check', array('project_id' => $project['id'], 'timestamp' => time())) ?>"
-    >
-<?php endif ?>
-
-<?php foreach ($swimlanes as $swimlane): ?>
-    <?php if (empty($swimlane['columns'])): ?>
-        <p class="alert alert-error"><?= t('There is no column in your project!') ?></p>
-        <?php break ?>
     <?php else: ?>
-        <?= $this->render('board/swimlane', array(
+        <table id="board"
-            'project' => $project,
+               data-project-id="<?= $project['id'] ?>"
-            'swimlane' => $swimlane,
+               data-check-interval="<?= $board_private_refresh_interval ?>"
-            'board_highlight_period' => $board_highlight_period,
+               data-save-url="<?= $this->u('board', 'save', array('project_id' => $project['id'])) ?>"
-            'categories' => $categories,
+               data-check-url="<?= $this->u('board', 'check', array('project_id' => $project['id'], 'timestamp' => time())) ?>"
-            'hide_swimlane' => count($swimlanes) === 1,
+        >
-            'not_editable' => isset($not_editable),
-        )) ?>
     <?php endif ?>
-<?php endforeach ?>
+
-</table>
+    <?php foreach ($swimlanes as $swimlane): ?>
+        <?php if (empty($swimlane['columns'])): ?>
+            <p class="alert alert-error"><?= t('There is no column in your project!') ?></p>
+            <?php break ?>
+        <?php else: ?>
+            <?= $this->render('board/swimlane', array(
+                'project' => $project,
+                'swimlane' => $swimlane,
+                'board_highlight_period' => $board_highlight_period,
+                'categories' => $categories,
+                'hide_swimlane' => count($swimlanes) === 1,
+                'not_editable' => isset($not_editable),
+            )) ?>
+        <?php endif ?>
+    <?php endforeach ?>
+    </table>
+</div>

app/Template/board/swimlane.php

@@ -2,7 +2,7 @@
     <?php if (! $hide_swimlane): ?>
        <th>
 
-           <?php if ($swimlane['nb_tasks'] > 0): ?>
+           <?php if (! $not_editable && $swimlane['nb_tasks'] > 0): ?>
                 <a href="#" class="board-swimlane-toggle" data-swimlane-id="<?= $swimlane['id'] ?>">
                     <i class="fa fa-minus-circle hide-icon-swimlane-<?= $swimlane['id'] ?>"></i>
                     <i class="fa fa-plus-circle show-icon-swimlane-<?= $swimlane['id'] ?>" style="display: none"></i>
@@ -18,7 +18,7 @@
     <?php endif ?>
 
     <?php foreach ($swimlane['columns'] as $column): ?>
-    <th>
+    <th class="board-column">
         <?php if (! $not_editable): ?>
             <div class="board-add-icon">
                 <?= $this->a('+', 'task', 'create', array('project_id' => $column['project_id'], 'column_id' => $column['id'], 'swimlane_id' => $swimlane['id']), false, 'task-creation-popover', t('Add a new task')) ?>

app/Template/board/task.php

@@ -22,7 +22,7 @@
                     <li><i class="fa fa-align-left"></i> <?= $this->a(t('Change description'), 'task', 'description', array('task_id' => $task['id'], 'project_id' => $task['project_id']), false, 'task-description-popover') ?></li>
                     <li><i class="fa fa-pencil-square-o"></i> <?= $this->a(t('Edit this task'), 'task', 'edit', array('task_id' => $task['id'], 'project_id' => $task['project_id']), false, 'task-edit-popover') ?></li>
                     <li><i class="fa fa-close"></i> <?= $this->a(t('Close this task'), 'task', 'close', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'confirmation' => 'yes', 'redirect' => 'board'), true) ?></li>
-                </li>
+                </ul>
             </li>
         </ul>
 

assets/css/app.css

@@ -740,8 +740,14 @@ a.filter-on {
 }
 
 /* board table */
-#board {
+#board-container {
-    table-layout: fixed;
+    overflow-x: auto;
+}
+
+#board td,
+#board th {
+    min-width: 230px;
+    max-width: 230px;
 }
 
 #board th a {
@@ -827,6 +833,11 @@ a.task-board-collapsed-title {
     font-weight: normal;
 }
 
+.task-board .dropdown {
+    float: left;
+    margin-right: 5px;
+}
+
 .task-board-title {
     margin-top: 10px;
     font-size: 1.1em;
@@ -1429,10 +1440,10 @@ a.task-board-nobody {
     position: absolute;
     left: 0;
     z-index: 1000;
-    min-width: 180px;
+    min-width: 230px;
     list-style: none;
     margin: 3px 0 0 1px;
-    padding: 6px 0;    
+    padding: 6px 0;
     background-color: #fff;
     border: 1px solid #b2b2b2;
     -webkit-border-radius: 3px;

assets/css/src/board.css

@@ -16,8 +16,14 @@ a.filter-on {
 }
 
 /* board table */
-#board {
+#board-container {
-    table-layout: fixed;
+    overflow-x: auto;
+}
+
+#board td,
+#board th {
+    min-width: 230px;
+    max-width: 230px;
 }
 
 #board th a {

assets/css/src/dropdown.css

@@ -12,10 +12,10 @@
     position: absolute;
     left: 0;
     z-index: 1000;
-    min-width: 180px;
+    min-width: 230px;
     list-style: none;
     margin: 3px 0 0 1px;
-    padding: 6px 0;    
+    padding: 6px 0;
     background-color: #fff;
     border: 1px solid #b2b2b2;
     -webkit-border-radius: 3px;

assets/css/src/task.css

@@ -36,6 +36,11 @@ a.task-board-collapsed-title {
     font-weight: normal;
 }
 
+.task-board .dropdown {
+    float: left;
+    margin-right: 5px;
+}
+
 .task-board-title {
     margin-top: 10px;
     font-size: 1.1em;