2 files changed, 42 insertions, 23 deletions

diff --git a/assets/css/app.css b/assets/css/app.css
index 67e4e6df..45ec7444 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -484,23 +484,26 @@ nav .active a {
 }
 
 .project-menu li {
+    padding-left: 5px;
     display: inline;
-    padding-left: 10px;
-    padding-right: 10px;
     border-right: 1px dotted #ccc;
 }
 
 .project-menu li:last-child {
     border: none;
-    padding-right: 0;
 }
 
 .project-menu ul {
     padding-bottom: 5px;
 }
 
+.project-menu a {
+    padding-right: 5px;
+}
+
 .project-menu {
     text-align: right;
+    font-size: 0.8em;
 }
 
 .public-board {
@@ -540,7 +543,26 @@ a.filter-on {
     color: #444;
 }
 
+.task-category-container {
+    text-align: right;
+    padding-bottom: 2px;
+}
+
+.task-category {
+    font-weight: bold;
+    font-size: 0.8em;
+    color: #000;
+    border: 1px solid #555;
+    border-radius: 4px;
+    padding: 2px;
+    padding-right: 5px;
+    padding-left: 5px;
+}
+
 .task-date {
+    position: absolute;
+    bottom: 0;
+    left: 5px;
     font-weight: bold;
     color: #D90000;
 }
@@ -552,7 +574,7 @@ a.filter-on {
 }
 
 .task-footer {
-    margin-top: 10px;
+    height: 18px;
 }
 
 .task {
diff --git a/assets/js/board.js b/assets/js/board.js
index 84aca8b3..af54d0c8 100644
--- a/assets/js/board.js
+++ b/assets/js/board.js
@@ -76,7 +76,7 @@
                 $("#board").remove();
                 $("#main").append(data);
                 board_load_events();
-                filter_apply(filter_get_user_id(), filter_has_due_date());
+                filter_apply();
             }
         });
     }
@@ -96,32 +96,25 @@
                         $("#main").append(data);
                         board_unload_events();
                         board_load_events();
-                        filter_apply(filter_get_user_id(), filter_has_due_date());
+                        filter_apply();
                     }
                 }
             });
         }
     }
 
-    // Get the selected user id
-    function filter_get_user_id()
-    {
-        return $("#form-user_id").val();
-    }
-
-    // Return true if the filter is activated
-    function filter_has_due_date()
-    {
-        return $("#filter-due-date").hasClass("filter-on");
-    }
-
     // Apply user or date filter (change tasks opacity)
-    function filter_apply(selectedUserId, filterDueDate)
+    function filter_apply()
     {
+        var selectedUserId = $("#form-user_id").val();
+        var selectedCategoryId = $("#form-category_id").val();
+        var filterDueDate = $("#filter-due-date").hasClass("filter-on");
+
         $("[data-task-id]").each(function(index, item) {
 
             var ownerId = item.getAttribute("data-owner-id");
             var dueDate = item.getAttribute("data-due-date");
+            var categoryId = item.getAttribute("data-category-id");
 
             if (ownerId != selectedUserId && selectedUserId != -1) {
                 item.style.opacity = "0.2";
@@ -133,19 +126,23 @@
             if (filterDueDate && (dueDate == "" || dueDate == "0")) {
                 item.style.opacity = "0.2";
             }
+
+            if (categoryId != selectedCategoryId && selectedCategoryId != -1) {
+                item.style.opacity = "0.2";
+            }
         });
     }
 
     // Load filter events
     function filter_load_events()
     {
-        $("#form-user_id").change(function() {
-            filter_apply(filter_get_user_id(), filter_has_due_date());
-        });
+        $("#form-user_id").change(filter_apply);
+
+        $("#form-category_id").change(filter_apply);
 
         $("#filter-due-date").click(function(e) {
             $(this).toggleClass("filter-on");
-            filter_apply(filter_get_user_id(), filter_has_due_date());
+            filter_apply();
             e.preventDefault();
         });
     }