Add toggle button to show/hide subtasks in task list view

assets/js/src/Subtask.js

@@ -6,7 +6,7 @@ Kanboard.Subtask.prototype.listen = function() {
     var self = this;
     this.dragAndDrop();
 
-    $(document).on("click", ".subtask-toggle-status", function(e) {
+    $(document).on("click", ".js-subtask-toggle-status", function(e) {
         var el = $(this);
         e.preventDefault();
 
@@ -14,18 +14,12 @@ Kanboard.Subtask.prototype.listen = function() {
             cache: false,
             url: el.attr("href"),
             success: function(data) {
-                if (el.hasClass("subtask-refresh-table")) {
-                    $(".subtasks-table").replaceWith(data);
-                } else {
-                    el.replaceWith(data);
-                }
-
-                self.dragAndDrop();
+                $(el).closest('.subtask-title').replaceWith(data);
             }
         });
     });
 
-    $(document).on("click", ".subtask-toggle-timer", function(e) {
+    $(document).on("click", ".js-subtask-toggle-timer", function(e) {
         var el = $(this);
         e.preventDefault();
 
@@ -33,8 +27,7 @@ Kanboard.Subtask.prototype.listen = function() {
             cache: false,
             url: el.attr("href"),
             success: function(data) {
-                $(".subtasks-table").replaceWith(data);
-                self.dragAndDrop();
+                $(el).closest('.subtask-time-tracking').replaceWith(data);
             }
         });
     });

assets/sass/_subtasks.sass

@@ -1,5 +1,35 @@
 @import variables
+@import mixins
 
-.subtasks-table
-  td
-    vertical-align: middle
+.subtask-cell
+  padding: 4px 10px
+  border-top: 1px dotted #dedede
+  border-left: 1px dotted #dedede
+  display: table-cell
+  vertical-align: middle
+  a
+    color: color('primary')
+    text-decoration: none
+    &:hover, &:focus
+      color: link-color('primary')
+  &:first-child
+    border-left: none
+  @include sm-device
+    width: 90%
+    display: block
+    border-left: none
+
+.task-list-subtasks
+  display: table
+  width: 100%
+  @include sm-device
+    display: block
+
+.task-list-subtask
+  display: table-row
+  @include sm-device
+    display: block
+
+.subtask-assignee, .subtask-time-tracking-cell
+  @include sm-device
+    display: none

assets/sass/_table_list.sass

@@ -11,6 +11,13 @@
   line-height: 35px
   padding-left: 3px
   padding-right: 3px
+  a
+    color: color('primary')
+    font-weight: 500
+    text-decoration: none
+    margin-right: 10px
+    &:hover, &:focus
+      color: #767676
   .table-list-header-count
     color: #767676
     display: inline-block