Add filter styling

Gruntfile.js

@@ -76,6 +76,8 @@ module.exports = function (grunt) {
 						'public/js/vendor/bootstrap/js/alert.js',
 						'public/js/vendor/bootstrap/js/dropdown.js',
 						'public/js/vendor/bootstrap/js/tooltip.js',
+						'public/js/vendor/bootstrap/js/transition.js',
+						'public/js/vendor/bootstrap/js/collapse.js',
 						'public/js/vendor/flot/jquery.flot.js',
 						'public/js/vendor/flot/jquery.flot.time.js',
 						'public/js/vendor/flot/jquery.flot.selection.js',

public/js/site.js

@@ -253,7 +253,7 @@ $(document).ready(function(){
 	}
 
 	function filterTasks (tasks, query) {
-		query = query.replace(/[^a-z0-9\s]+/gi, '').trim();
+		query = $.trim(query.replace(/[^a-z0-9\s]+/gi, ''));
 		tasks.removeClass('hidden');
 		if (/^\s*$/.test(query)) {
 			return;

public/less/site-ie8and.less

@@ -37,6 +37,20 @@
 	.date-selector .btn-full-width {
 		width:90%;
 	}
+	.filter-toggle {
+		&:before {
+			height:110%;
+			width:100%;
+			left:0;
+			top:0;
+		}
+		input {
+			width:92%;
+		}
+		.filter-trigger {
+			padding-bottom:0;
+		}
+	}
 }
 
 .ie7 {
@@ -80,4 +94,20 @@
 	.tasks-list li {
 		padding-right:105px;
 	}
+	.filter-toggle {
+		width:30%;
+		margin:0 35%;
+		margin-top:-10px;
+		background-color:lighten(@gray-lighter, 4%);
+		padding-bottom:10px;
+
+		.glyphicon {
+			display:none;
+		}
+
+		input {
+			width:80%;
+			margin-left:-25%;
+		}
+	}
 }

public/less/site.less

@@ -432,3 +432,34 @@ ul.date-links {
 		}
 	}
 }
+
+.filter-toggle {
+	top:-20px;
+	margin-top:-10px;
+	font-size:18px;
+	font-weight:bold;
+
+	.filter-trigger {
+		padding-bottom:20px;
+		cursor: pointer;
+
+		.glyphicon {
+			display:block;
+			margin:0 auto;
+		}
+	}
+
+	&:before {
+		position:absolute;
+		content:"";
+		height:90px;
+		width:90px;
+		left:50%;
+		top:-45px;
+		background-color:lighten(@gray-lighter, 4%);
+		transform: translateX(-50%) rotate(45deg);
+		-ms-transform: translateX(-50%) rotate(45deg);
+		-webkit-transform: translateX(-50%) rotate(45deg);
+		z-index:-1;
+	}
+}

view/partial/tasks.html

@@ -1,9 +1,10 @@
 
 <div data-control="task-list">
 
-	<div class="no-js-hide">
+	<div class="col-md-6 col-md-offset-3 filter-toggle no-js-hide text-center">
-		<label for="task-filter">Filter URLs</label>
+		<label for="filter-input" class="filter-trigger" data-toggle="collapse" data-target="#filter-input">Filter<span class="glyphicon glyphicon-filter"></span>
-		<input id="task-filter" type="text" data-role="input"/>
+		</label>
+		<input id="filter-input" class="form-control collapse" id="task-filter" type="text" data-role="input" placeholder="Type filter term (name or standard)"/>
 	</div>
 
 	<ul class="list-unstyled clearfix crunch-bottom">