Add show/hide columns on the board

3 files changed, 207 insertions, 78 deletions

diff --git a/assets/css/app.css b/assets/css/app.css
index b1400922..b12966e1 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -757,6 +757,19 @@ nav .active a {
     overflow-x: scroll;
 }
 
+#board {
+    table-layout: fixed;
+}
+
+#board th.board-column-header {
+    width: 240px;
+}
+
+#board td {
+    vertical-align: top;
+}
+
+/* compact mode/horizontal scrolling */
 .board-container-compact {
     overflow-x: initial;
 }
@@ -767,30 +780,43 @@ nav .active a {
     }
 }
 
-#board {
-    table-layout: fixed;
+#board th.board-column-header.board-column-compact {
+    width: initial; /* Do not force the width of the columns in compact view mode */
 }
 
-#board th {
-    width: 120px; /* Width of swimlane column */
+/* show/hide column */
+.board-column-collapsed {
+    display: none;
 }
 
-#board th.board-column-header {
-    width: 240px; /* Width of other columns, in default [horizontal scrolling] view mode */
+td.board-column-task-collapsed {
+    font-weight: bold;
+    background-color: #fbfbfb;
 }
 
-#board th.board-column-header.board-column-compact {
-    width: initial; /* Do not force the width of the columns in compact view mode */
+#board th.board-column-header-collapsed {
+    width: 28px;
+    min-width: 28px;
+    text-align: center;
+    overflow: hidden;
 }
 
-#board th a {
-    text-decoration: none;
-    color: #3366CC;
-    font-size: 150%;
+.board-rotation-wrapper {
+    position: relative;
+    padding: 8px 4px;
 }
 
-#board td {
-    vertical-align: top;
+.board-rotation {
+    min-width: 250px;
+    -webkit-backface-visibility: hidden;
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    -webkit-transform-origin: 0 100%;
+    -moz-transform-origin: 0 100%;
+    -ms-transform-origin: 0 100%;
+    transform-origin: 0 100%;
 }
 
 /* column header */
@@ -800,29 +826,33 @@ nav .active a {
 }
 
 .board-add-icon a {
+    text-decoration: none;
+    color: #3366CC;
+    font-size: 150%;
     line-height: 70%;
 }
 
-.task-count {
+.board-add-icon a:focus,
+.board-add-icon a:hover {
+    text-decoration: none;
+    color: red;
+}
+
+.board-column-header-task-count {
     color: #999;
     font-weight: normal;
 }
 
-/* drag and drop */
-.draggable-item {
-    cursor: pointer;
-    user-select: none;
+th.board-column-header-collapsed .board-column-header-task-count {
+    font-size: 0.85em;
 }
 
-.draggable-placeholder {
-    border: 2px dashed #000;
-    background: #fafafa;
-    height: 70px;
-    margin-bottom: 10px;
+/* swimlanes */
+th.board-swimlane-header {
+    width: 120px;
 }
 
-/* swimlanes */
-#board th a.board-swimlane-toggle {
+a.board-swimlane-toggle {
     font-size: 0.95em;
 }
 
@@ -844,6 +874,19 @@ nav .active a {
 .board-task-list-limit {
     background-color: #DF5353;
 }
+
+/* drag and drop */
+.draggable-item {
+    cursor: pointer;
+    user-select: none;
+}
+
+.draggable-placeholder {
+    border: 2px dashed #000;
+    background: #fafafa;
+    height: 70px;
+    margin-bottom: 10px;
+}
 /* task inside the board */
 .task-board {
     position: relative;
diff --git a/assets/css/print.css b/assets/css/print.css
index 293bed34..540d759e 100644
--- a/assets/css/print.css
+++ b/assets/css/print.css
@@ -162,6 +162,19 @@ th a:hover {
     overflow-x: scroll;
 }
 
+#board {
+    table-layout: fixed;
+}
+
+#board th.board-column-header {
+    width: 240px;
+}
+
+#board td {
+    vertical-align: top;
+}
+
+/* compact mode/horizontal scrolling */
 .board-container-compact {
     overflow-x: initial;
 }
@@ -172,30 +185,43 @@ th a:hover {
     }
 }
 
-#board {
-    table-layout: fixed;
+#board th.board-column-header.board-column-compact {
+    width: initial; /* Do not force the width of the columns in compact view mode */
 }
 
-#board th {
-    width: 120px; /* Width of swimlane column */
+/* show/hide column */
+.board-column-collapsed {
+    display: none;
 }
 
-#board th.board-column-header {
-    width: 240px; /* Width of other columns, in default [horizontal scrolling] view mode */
+td.board-column-task-collapsed {
+    font-weight: bold;
+    background-color: #fbfbfb;
 }
 
-#board th.board-column-header.board-column-compact {
-    width: initial; /* Do not force the width of the columns in compact view mode */
+#board th.board-column-header-collapsed {
+    width: 28px;
+    min-width: 28px;
+    text-align: center;
+    overflow: hidden;
 }
 
-#board th a {
-    text-decoration: none;
-    color: #3366CC;
-    font-size: 150%;
+.board-rotation-wrapper {
+    position: relative;
+    padding: 8px 4px;
 }
 
-#board td {
-    vertical-align: top;
+.board-rotation {
+    min-width: 250px;
+    -webkit-backface-visibility: hidden;
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    -webkit-transform-origin: 0 100%;
+    -moz-transform-origin: 0 100%;
+    -ms-transform-origin: 0 100%;
+    transform-origin: 0 100%;
 }
 
 /* column header */
@@ -205,29 +231,33 @@ th a:hover {
 }
 
 .board-add-icon a {
+    text-decoration: none;
+    color: #3366CC;
+    font-size: 150%;
     line-height: 70%;
 }
 
-.task-count {
+.board-add-icon a:focus,
+.board-add-icon a:hover {
+    text-decoration: none;
+    color: red;
+}
+
+.board-column-header-task-count {
     color: #999;
     font-weight: normal;
 }
 
-/* drag and drop */
-.draggable-item {
-    cursor: pointer;
-    user-select: none;
+th.board-column-header-collapsed .board-column-header-task-count {
+    font-size: 0.85em;
 }
 
-.draggable-placeholder {
-    border: 2px dashed #000;
-    background: #fafafa;
-    height: 70px;
-    margin-bottom: 10px;
+/* swimlanes */
+th.board-swimlane-header {
+    width: 120px;
 }
 
-/* swimlanes */
-#board th a.board-swimlane-toggle {
+a.board-swimlane-toggle {
     font-size: 0.95em;
 }
 
@@ -249,6 +279,19 @@ th a:hover {
 .board-task-list-limit {
     background-color: #DF5353;
 }
+
+/* drag and drop */
+.draggable-item {
+    cursor: pointer;
+    user-select: none;
+}
+
+.draggable-placeholder {
+    border: 2px dashed #000;
+    background: #fafafa;
+    height: 70px;
+    margin-bottom: 10px;
+}
 /* task inside the board */
 .task-board {
     position: relative;
diff --git a/assets/css/src/board.css b/assets/css/src/board.css
index 469e5773..00766c66 100644
--- a/assets/css/src/board.css
+++ b/assets/css/src/board.css
@@ -14,6 +14,19 @@
     overflow-x: scroll;
 }
 
+#board {
+    table-layout: fixed;
+}
+
+#board th.board-column-header {
+    width: 240px;
+}
+
+#board td {
+    vertical-align: top;
+}
+
+/* compact mode/horizontal scrolling */
 .board-container-compact {
     overflow-x: initial;
 }
@@ -24,30 +37,43 @@
     }
 }
 
-#board {
-    table-layout: fixed;
+#board th.board-column-header.board-column-compact {
+    width: initial; /* Do not force the width of the columns in compact view mode */
 }
 
-#board th {
-    width: 120px; /* Width of swimlane column */
+/* show/hide column */
+.board-column-collapsed {
+    display: none;
 }
 
-#board th.board-column-header {
-    width: 240px; /* Width of other columns, in default [horizontal scrolling] view mode */
+td.board-column-task-collapsed {
+    font-weight: bold;
+    background-color: #fbfbfb;
 }
 
-#board th.board-column-header.board-column-compact {
-    width: initial; /* Do not force the width of the columns in compact view mode */
+#board th.board-column-header-collapsed {
+    width: 28px;
+    min-width: 28px;
+    text-align: center;
+    overflow: hidden;
 }
 
-#board th a {
-    text-decoration: none;
-    color: #3366CC;
-    font-size: 150%;
+.board-rotation-wrapper {
+    position: relative;
+    padding: 8px 4px;
 }
 
-#board td {
-    vertical-align: top;
+.board-rotation {
+    min-width: 250px;
+    -webkit-backface-visibility: hidden;
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    -webkit-transform-origin: 0 100%;
+    -moz-transform-origin: 0 100%;
+    -ms-transform-origin: 0 100%;
+    transform-origin: 0 100%;
 }
 
 /* column header */
@@ -57,29 +83,33 @@
 }
 
 .board-add-icon a {
+    text-decoration: none;
+    color: #3366CC;
+    font-size: 150%;
     line-height: 70%;
 }
 
-.task-count {
+.board-add-icon a:focus,
+.board-add-icon a:hover {
+    text-decoration: none;
+    color: red;
+}
+
+.board-column-header-task-count {
     color: #999;
     font-weight: normal;
 }
 
-/* drag and drop */
-.draggable-item {
-    cursor: pointer;
-    user-select: none;
+th.board-column-header-collapsed .board-column-header-task-count {
+    font-size: 0.85em;
 }
 
-.draggable-placeholder {
-    border: 2px dashed #000;
-    background: #fafafa;
-    height: 70px;
-    margin-bottom: 10px;
+/* swimlanes */
+th.board-swimlane-header {
+    width: 120px;
 }
 
-/* swimlanes */
-#board th a.board-swimlane-toggle {
+a.board-swimlane-toggle {
     font-size: 0.95em;
 }
 
@@ -101,3 +131,16 @@
 .board-task-list-limit {
     background-color: #DF5353;
 }
+
+/* drag and drop */
+.draggable-item {
+    cursor: pointer;
+    user-select: none;
+}
+
+.draggable-placeholder {
+    border: 2px dashed #000;
+    background: #fafafa;
+    height: 70px;
+    margin-bottom: 10px;
+}