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(){
-		$(this).parent().next('ul').slideToggle();
-        $(this).toggleClass('showing');
+	expandLink.click( function(){
+		$(this).parent().next('ul').slideToggle('slow', function(){});
+        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')) {
-            $(target).children('.heading-badges').click();
+        if (!$(target).hasClass('showing')) {
+            $(target).children('[data-role="expander"]').click();
         }
     });
 

public/less/site-nojavascript.less

@@ -1,14 +1,20 @@
 /* No javascript */
-.no-javascript .graph-container {
-	display:none;
-}
-.no-javascript .hidden {
-	display:block !important;
-	visibility:visible !important;
-}
-.no-javascript table.hidden {
-	display:table !important;
-}
-.no-javascript .collapse {
-	display:block;
+.no-javascript {
+	.graph-container, .expander {
+		display:none;
+	}
+	.hidden {
+		display:block !important;
+		visibility:visible !important;
+	}
+	table.hidden {
+		display:table !important;
+	}
+	.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 */