CHANGE Task-Manager-UI rref #5460

CSS Task Manager UI/UX Improvements

app/app.css

@@ -235,6 +235,8 @@ a.logo:hover {
 
 /** END OF LOADER **/
 
+
+
 /* Everything but the jumbotron gets side spacing for mobile first views */
 .header,
 .marketing,
@@ -3039,13 +3041,14 @@ table.dataTable thead .sorting:after {
 	float:left;	
 }
 
-.task-manager .panel-body {
-	height:437px;
-	overflow-y:auto;	
+.task-manager .panel-body ul li {
+	position:relative;
 }
 
-.task-manager .panel-body ul li {
-	position:relative;	
+.task-manager .panel-body ul li a {
+	padding:20px 25px;
+	display:block;
+	color:#333;
 }
 
 .task-manager .panel-body ul li .dropdown .dropdown-inner {
@@ -3069,6 +3072,17 @@ table.dataTable thead .sorting:after {
 	float:left;	
 }
 
+.task-manager .task-status img {
+	width: 30px;
+    margin-left: -7px;
+    margin-top: 17px;
+    opacity: 0.3;
+}
+
+.task-manager .task-status img:hover {
+    opacity: 0.6;
+}
+
 .task-manager .task-status .task-circle {
 	width:10px;
 	height:10px;
@@ -3081,24 +3095,21 @@ table.dataTable thead .sorting:after {
 	background-color:#D4244B;
 }
 
-.task-manager .urgent-task .task-due-date {
-	color:#D4244B;
-}
 
 .task-manager .approaching-task .task-circle {
 	background-color:#F7941E;
 }
 
-.task-manager .approaching-task .task-due-date {
-	color:#F7941E;
-}
-
 .task-manager .non-urgent-task .task-circle {
 	background-color:#01AEEE;
 }
 
-.task-manager .non-urgent-task .task-due-date {
-	color:#01AEEE;
+.task-manager .completed-task .task-circle {
+	background-color:#5dd015;
+}
+
+.task-manager .expired-task .task-circle {
+	background-color:#999;
 }
 
 .task-manager .task-title {
@@ -3224,7 +3235,7 @@ table.dataTable thead .sorting:after {
     top: 6px;
 }
 
-.task-manager-search input {
+.task-manager-search input[type=text] {
 	width: 100%;
     border: 1px solid #e6e6e6;
     height: 35px;
@@ -3232,6 +3243,17 @@ table.dataTable thead .sorting:after {
     margin-top: -5px;
 	outline: none;
     padding-left: 30px;
+	padding-right: 30px;
+}
+
+.task-manager-search input[type=checkbox] {
+	position: absolute;
+    right: 9px;
+    top: 2px;
+}
+
+.task-manager .panel-heading {
+	border:none;
 }
 
 .task-manager .panel-heading select {
@@ -3241,6 +3263,41 @@ table.dataTable thead .sorting:after {
 	border-color:#e6e6e6;
 }
 
+.task-manager .tab-content {
+	overflow: auto;
+    max-height: 460px;
+	padding-bottom: 5px;
+}
+
+.task-manager .nav-tabs {
+	border: none;
+    box-shadow: 0px 2px 3px rgba(0,0,0,0.07);
+    z-index: 1;
+    position: relative;	
+}
+
+
+.task-manager .panel-body .nav li {
+    border: none;
+}
+
+.task-manager .panel-body ul.nav li a {
+	padding: 15px;
+    border: none;
+	border-bottom:2px solid transparent;
+	color:#ccc;
+}
+
+.task-manager .panel-body ul.nav li a:hover,
+.task-manager .panel-body ul.nav li a:focus {
+    border: none;
+}
+
+.task-manager .panel-body ul.nav li.active a {
+	border-bottom: 2px solid #a61229;
+    color: #a61229;
+}
+
 /* END OF TASK MANAGER WIDGET */