Redesign tasks lists headers and expander link

public/js/site.js

@@ -3,7 +3,7 @@ $(document).ready(function(){
     var data = {};
 	var standardsList = $('[data-role="standards-list"]');
 	var standardSelect = $('[data-role="new-task-select"]');
-	var headingBadges = $('.heading-badges');
+	var expandLink = $('[data-role="expander"]');
     var taskListSelector = $('[data-role="task-list"] a');
     var toTopLinks = $('[data-role="top"]');
     var zoomResetButton = $('[data-role="zoom-reset"]');
@@ -40,9 +40,15 @@ $(document).ready(function(){
     };
 
     // Toggle appearance of lists of error/warnings/notifications
-	headingBadges.click( function(){
+	expandLink.click( function(){
-		$(this).parent().next('ul').slideToggle();
+		$(this).parent().next('ul').slideToggle('slow', function(){});
-        $(this).toggleClass('showing');
+        if ($(this).parent().hasClass('showing')) {
+            $(this).html('+');
+        }
+        else {
+            $(this).html('-');
+        }
+        $(this).parent().toggleClass('showing');
 	});
 
      // Back to top links
@@ -62,8 +68,8 @@ $(document).ready(function(){
         e.preventDefault();
         target = $(this).attr('href');
         animateSection($(target), -25);
-        if (!$(target).next('ul').hasClass('showing')) {
+        if (!$(target).hasClass('showing')) {
-            $(target).children('.heading-badges').click();
+            $(target).children('[data-role="expander"]').click();
         }
     });
 

public/less/site-nojavascript.less

@@ -1,14 +1,20 @@
 /* No javascript */
-.no-javascript .graph-container {
+.no-javascript {
+	.graph-container, .expander {
 		display:none;
-}
+	}
-.no-javascript .hidden {
+	.hidden {
 		display:block !important;
 		visibility:visible !important;
-}
+	}
-.no-javascript table.hidden {
+	table.hidden {
 		display:table !important;
-}
+	}
-.no-javascript .collapse {
+	.collapse {
 		display:block;
+	}
+	.heading {
+		margin-top:0;
+		border-radius: 3px 3px 0 0;
+	}
 }

public/less/site-responsive.less

@@ -53,7 +53,7 @@
 	.task-header .h4 {
 		font-size:floor(@font-size-base * 1.1); // ~16px;
 	}
-	.label, .badge {
+	.badge {
 		font-size:floor(@font-size-base * 0.75); // ~11px;
 		padding:7px;
 	}

public/less/site.less

@@ -146,21 +146,12 @@
 .badge {
 	border-radius:0.25em;
 }
-.label, .badge {
+.badge {
 	display:inline-block;
 	padding:10px;
 	font-size:ceil(@font-size-base * 0.85); // ~13px;
 	text-transform: uppercase;
 }
-.badge-danger {
-	background-color:@brand-danger;
-}
-.badge-warning {
-	background-color:@brand-warning;
-}
-.badge-info {
-	background-color:@brand-info;
-}
 .rule-name .badge {
 	padding:6px;
 }
@@ -177,10 +168,9 @@
 	margin-bottom:30px;
 	border-width:3px;
 	border-style:solid;
-	border-radius: 3px;
 
 	li {
-		margin-bottom:30px;
+		margin-bottom:20px;
 
 		&:last-child {
 			margin-bottom:0;
@@ -208,10 +198,27 @@
 
 /* Task list heading */
 .heading {
-	margin-bottom:10px;
+	margin-top:12px;
+	padding:11px;
+	color: @btn-default-color;
+	font-weight:bold;
+	border-radius: 3px;
+
+	&.showing {
+		margin-bottom:0;
+		border-radius: 3px 3px 0 0;
+	}
+
+	&:first-child, &.first {
+		margin-top:0;
+	}
 }
-.heading-badges {
+.expander {
 	cursor:pointer;
+	padding:0 5px;
+	font-weight:bold;
+	font-size:floor(@font-size-base * @line-height-base); // ~20px
+	line-height:1;
 }
 
 /* Graph */

view/task.html

@@ -98,15 +98,12 @@
     </div>
 </div>
 
-
 <div class="col-md-9">
 	{{#if results}}
-		<p class="heading showing" id="errors">
+		<div class="heading label-danger showing first" id="errors">
-			<span class="heading-badges">
+			Errors ( 13 )
-				<span class="label label-danger">Errors</span> <span class="badge badge-danger">?</span>
+			<span data-role="expander" class="pull-right expander"> - </span>
-			</span>
+		</div>
-			<a href="#top" data-role="top" class="pull-right default"> <span class="glyphicon glyphicon-arrow-up"></span></a>
-		</p>
 		<ul class="list-unstyled task-danger tasks-list collapse in">
 			{{#lastResult.messages}}
 				<li>
@@ -115,12 +112,36 @@
 				</li>
 			{{/lastResult.messages}}
 		</ul>
-		<p class="heading">
+
-			<span class="heading-badges">
+		<div class="heading label-warning" id="warnings">
-				<span class="label label-default">Ignored Rules</span>
+			Warnings ( 142 )
-			</span>
+			<span data-role="expander" class="pull-right expander"> + </span>
-			<a href="#top" data-role="top" class="pull-right default"> <span class="glyphicon glyphicon-arrow-up"></span></a>
+		</div>
-		</p>
+		<ul class="list-unstyled task-warning tasks-list collapse">
+			{{#lastResult.messages}}
+				<li>
+					<p class="crunch rule-name">{{type}} : {{code}} <span class="badge">{{count}}</span></p>
+					<p>{{message}}</p>
+				</li>
+			{{/lastResult.messages}}
+		</ul>
+
+		<div class="heading label-info" id="notifications">
+			Notifications ( 166 )
+			<span data-role="expander" class="pull-right expander"> + </span>
+		</div>
+		<ul class="list-unstyled task-info tasks-list collapse">
+			{{#lastResult.messages}}
+				<li>
+					<p class="crunch rule-name">{{type}} : {{code}} <span class="badge">{{count}}</span></p>
+					<p>{{message}}</p>
+				</li>
+			{{/lastResult.messages}}
+		</ul>
+
+		<div class="heading label-default">Ignored Rules
+			<span data-role="expander" class="pull-right expander"> + </span>
+		</div>
 		<ul class="list-unstyled task-default tasks-list collapse">
 		    {{#task.ignore}}
 		        <li>