Table View for tasks (#76)

Save sort order to local storage

Save selected columns to localStorage

Loading spinner

More sorting

Add sorting

Styling and hiding of column filter

Add checkbox to show/hide columns

Use fancycheckbox everywhere

Fix is done badge

Change sort order in table view

Add is done column to table

Better text handling

Refactor is done into seperate component

Add pagination to table view

Add assignees to table view

Fix redirecting to table view

Add date tooltip to date field

Add date tooltip to date field

labels for table view

Styling

Add basic table view

Extend priority label

Split list view in mixins

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/76

src/styles/components/_all.scss

@@ -13,3 +13,4 @@
 @import 'teams';
 @import 'migrator';
 @import 'comments';
+@import 'table-view';

src/styles/components/base/fancycheckbox.scss

@@ -28,6 +28,7 @@
     span {
       font-size: 0.8em;
       vertical-align: top;
+      padding-left: .5em;
     }
 
     svg {

src/styles/components/table-view.scss

@@ -0,0 +1,32 @@
+.table-view {
+  .table {
+    background: transparent;
+
+    .user {
+      margin: 0;
+    }
+
+    .is-done {
+      font-size: .9em;
+      margin: 0;
+    }
+  }
+
+  .column-filter {
+    text-align: right;
+    width: 100%;
+    max-width: 180px;
+    position: absolute;
+    right: 3em;
+    margin-top: -80px;
+
+    .card {
+      text-align: left;
+      margin-top: 1em;
+    }
+
+    .fancycheckbox {
+      display: block;
+    }
+  }
+}

src/styles/components/task.scss

@@ -55,16 +55,6 @@
       height: auto;
     }
 
-    .is-done {
-      background: $green;
-      color: $white;
-      padding: .5em;
-      font-size: 1.5em;
-      margin-left: .5em;
-      font-weight: bold;
-      line-height: 1;
-      border-radius: 4px;
-    }
   }
 
   .date-input {
@@ -181,3 +171,15 @@
     }
   }
 }
+
+.is-done {
+  background: $green;
+  color: $white;
+  padding: .5em;
+  font-size: 1.5em;
+  margin-left: .5em;
+  font-weight: bold;
+  line-height: 1;
+  border-radius: 4px;
+  text-align: center;
+}