A small patch which enables scroll view toggling.

If there are many columns, the board adds a horizontal scrollbar. However, This looses the full board visibility. Now there is a menu item on the Board, Action > Toggle view which switches. This can also be toggled by 'c' keypress.

3 files changed, 63 insertions, 0 deletions

diff --git a/app/Template/board/filters.php b/app/Template/board/filters.php
index a0de5fd9..673cc1fd 100644
--- a/app/Template/board/filters.php
+++ b/app/Template/board/filters.php
@@ -14,6 +14,10 @@
                             </span>
                         </li>
                         <li>
+                            <i class="fa fa-th"></i>
+                            <a href="#" class="compactview-toggle"><?= t('Toggle view') ?></a>
+                        </li>
+                        <li>
                             <i class="fa fa-search fa-fw"></i>
                             <?= $this->a(t('Search'), 'project', 'search', array('project_id' => $project['id'])) ?>
                         </li>
diff --git a/assets/css/src/board.css b/assets/css/src/board.css
index a1aa268d..2f168322 100644
--- a/assets/css/src/board.css
+++ b/assets/css/src/board.css
@@ -20,16 +20,36 @@
 
 /* board table */
 #board-container {
+	/* Will set the style from JS depending upon wide/compact view */
+}
+
+/* Board container classes for wide/compact view */
+#board-container-wide {
     overflow-x: scroll;
     padding-bottom: 180px; /* Space to avoid dropdown menu truncated */
 }
 
+.board-container-compact {
+    overflow-x: hidden;
+    padding-bottom: 180px; /* Space to avoid dropdown menu truncated */
+}
+
 #board td,
 #board th {
+    /* Will set the style from JS depending upon wide/compact view */
+	}
+
+/* Board table column for wide/compact view */
+.board-column-wide {
     min-width: 240px;
     max-width: 240px;
 }
 
+.board-column-compact {
+    min-width: 0px;
+    max-width: 0px;
+}
+
 #board th a {
     text-decoration: none;
     color: #3366CC;
diff --git a/assets/js/src/board.js b/assets/js/src/board.js
index 75c44f2e..26d92c05 100644
--- a/assets/js/src/board.js
+++ b/assets/js/src/board.js
@@ -23,6 +23,10 @@ Kanboard.Board = (function() {
         Mousetrap.bind("s", function() {
             stack_toggle();
         });
+        
+        Mousetrap.bind("c", function() {
+            compactview_toggle();
+        });
     }
 
     // Collapse/Expand tasks
@@ -351,6 +355,35 @@ Kanboard.Board = (function() {
     	filter_apply();
     }
 
+    // Toggle compact view. It will try to stuff all columns in the window
+    jQuery(document).on('click', ".compactview-toggle", function(e) {
+        e.preventDefault();
+        compactview_toggle();
+    });
+    
+    function compactview_toggle() {
+	var compactview = Kanboard.GetStorageItem("compactview");
+        if (compactview == '1') {
+            Kanboard.SetStorageItem("compactview",'0');
+        } else {
+	    Kanboard.SetStorageItem("compactview",'1');
+	}
+        compactview_reload ();
+    }
+    
+    function compactview_reload()
+    {
+	var compactview = Kanboard.GetStorageItem("compactview");
+	$("#board-container,#board th,#board td").removeClass ();
+	if (compactview == '1') {
+	    $('#board-container').addClass ('board-container-compact');
+	    $("#board th,#board td").addClass ('board-column-compact');
+	} else {
+	    $('#board-container').addClass ('board-container-wide');
+	    $("#board th,#board td").addClass ('board-column-wide');
+	}
+    }
+    
     jQuery(document).ready(function() {
 
         if (Kanboard.Exists("board")) {
@@ -358,7 +391,13 @@ Kanboard.Board = (function() {
             filter_load_events();
             stack_load_events();
             keyboard_shortcuts();
+            compactview_reload();
         }
     });
+    
+    // Reload the compactview states (shown/hidden) after an ajax call
+    jQuery(document).ajaxComplete(function() {
+	compactview_reload();
+    });
 
 })();