Merge pull request #94 from nature/enhance-graph

Enhance graph for accessibility

Gruntfile.js

@@ -94,6 +94,7 @@ module.exports = function (grunt) {
 						'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.dashes.js',
 						'public/js/vendor/flot/jquery.flot.time.js',
 						'public/js/vendor/flot/jquery.flot.selection.js',
 						'public/js/vendor/flot/jquery.flot.resize.js',

README.md

@@ -3,7 +3,7 @@ pa11y-dashboard
 
 pa11y-dashboard is a web interface to the [pa11y][pa11y] accessibility reporter; allowing you to focus on *fixing* issues rather than hunting them down.
 
-**Current Version:** *1.6.1*  
+**Current Version:** *1.7.0*  
 **Build Status:** [![Build Status][travis-img]][travis]  
 **Node Version Support:** *0.10*
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pa11y-dashboard",
-	"version": "1.6.1",
+	"version": "1.7.0",
 	"private": true,
 
 	"description": "pa11y-dashboard is a visual web interface to the pa11y accessibility reporter",

public/js/site.js

@@ -24,9 +24,11 @@ $(document).ready(function(){
     var zoomResetButton = $('[data-role="zoom-reset"]');
     var graphContainer = $('[data-role="graph"]');
     var dateSelectDropdownMenu = $('[data-role="date-select-dropdown-menu"]');
+    var legend = graphContainer.parent('.graph-container').find('.dashedLegend');
 
     var graphOptions = {
         series: {
+            dashes: { show: false, lineWidth: 3 },
             lines: { show: true },
             points: { show: true },
             hoverable: true
@@ -43,6 +45,12 @@ $(document).ready(function(){
         lines: {
             lineWidth: 3
         },
+        points: {
+            fill: true,
+            radius:4,
+            lineWidth:3
+        },
+        shadowSize: 0,
         grid: {
             backgroundColor: '#fff',
             borderColor: '#808080',
@@ -60,17 +68,38 @@ $(document).ready(function(){
         }
     };
 
+    // have we declared a custom legend
+    if (legend.length === 1) {
+        $('body').addClass('custom-legend');
+    }
+
     // Toggle appearance of lists of error/warnings/notices
-	expandLink.click( function(){
-		$(this).parent().next().slideToggle('slow', function(){});
-        if ($(this).parent().hasClass('showing')) {
-            $(this).html('+');
+    expandLink.click( function(){
+		$(this).next().slideToggle('slow', function(){});
+        if ($(this).hasClass('showing')) {
+            $(this).find('span.expander').html('+');
+            $(this).attr('aria-expanded', false);
         }
         else {
-            $(this).html('-');
+            $(this).find('span.expander').html('-');
+            $(this).attr('aria-expanded', true);
         }
-        $(this).parent().toggleClass('showing');
+        $(this).toggleClass('showing');
 	});
+    $(document).on('keydown.lists', '[data-role="expander"]', function (e) {
+        var $this = $(this);
+        var k = e.which || e.keyCode;
+
+        if (!/(13|32)/.test(k)) {
+            return;
+        }
+        if (k === 13 || k === 32) {
+            $this.click();
+        }
+
+        e.preventDefault();
+        e.stopPropagation();
+    });
 
      // Back to top links
     toTopLinks.click( function(e){
@@ -94,7 +123,7 @@ $(document).ready(function(){
         target = $(this).attr('href');
         animateSection($(target), -25);
         if (!$(target).hasClass('showing')) {
-            $(target).children('[data-role="expander"]').click();
+            $(target).click();
         }
     });
 
@@ -152,9 +181,25 @@ $(document).ready(function(){
 
     function getData() {
         return [
-            { color: 'rgb(216, 61, 45)', label: 'Errors', data:  data.error },
-            { color: 'rgb(168, 103, 0)', label: 'Warnings', data:  data.warning  },
-            { color: 'rgb(23, 123, 190)', label: 'Notices', data:  data.notice }
+            {
+                color: 'rgb(216, 61, 45)',
+                label: 'Errors',
+                data: data.error
+            },
+            {
+                color: 'rgb(168, 103, 0)',
+                label: 'Warnings',
+                data: data.warning,
+                lines: { show: false },
+                dashes: { show: true, dashLength: [10, 5] }
+            },
+            {
+                color: 'rgb(23, 123, 190)',
+                label: 'Notices',
+                data: data.notice,
+                lines: { show: false },
+                dashes: { show: true, dashLength: 5 }
+            }
         ];
     }
 
@@ -209,13 +254,25 @@ $(document).ready(function(){
 
     function plotAccordingToChoices() {
         var data = [];
+        var labels = [];
         choiceContainer.find('input:checked').each(function () {
             var key = $(this).attr('name');
             if (key && datasets[key]) {
+                labels.push(datasets[key].label);
                 data.push(datasets[key]);
             }
         });
 
+        if (labels.length && legend.length === 1) {
+            legend.find('tr').hide();
+            $.each(labels, function (index, value) {
+                $('.legend' + value).parents('tr').show();
+            });
+            legend.show();
+        } else {
+            legend.hide();
+        }
+
         if (data.length > -1) {
             $.plot(graphContainer, data, graphOptions);
         }

public/js/vendor/flot/jquery.flot.dashes.js

@@ -0,0 +1,228 @@
+/*
+ * jQuery.flot.dashes
+ *
+ * options = {
+ *   series: {
+ *     dashes: {
+ *
+ *       // show
+ *       // default: false
+ *       // Whether to show dashes for the series.
+ *       show: <boolean>,
+ *
+ *       // lineWidth
+ *       // default: 2
+ *       // The width of the dashed line in pixels.
+ *       lineWidth: <number>,
+ *
+ *       // dashLength
+ *       // default: 10
+ *       // Controls the length of the individual dashes and the amount of
+ *       // space between them.
+ *       // If this is a number, the dashes and spaces will have that length.
+ *       // If this is an array, it is read as [ dashLength, spaceLength ]
+ *       dashLength: <number> or <array[2]>
+ *     }
+ *   }
+ * }
+ */
+(function($){
+
+  function init(plot) {
+    plot.hooks.drawSeries.push(function(plot, ctx, series) {
+      if (!series.dashes.show) return;
+
+      var plotOffset = plot.getPlotOffset(),
+          axisx = series.xaxis,
+          axisy = series.yaxis;
+
+      function plotDashes(xoffset, yoffset) {
+
+        var points = series.datapoints.points,
+            ps = series.datapoints.pointsize,
+            prevx = null,
+            prevy = null,
+            dashRemainder = 0,
+            dashOn = true,
+            dashOnLength,
+            dashOffLength;
+
+        if (series.dashes.dashLength[0]) {
+          dashOnLength = series.dashes.dashLength[0];
+          if (series.dashes.dashLength[1]) {
+            dashOffLength = series.dashes.dashLength[1];
+          } else {
+            dashOffLength = dashOnLength;
+          }
+        } else {
+          dashOffLength = dashOnLength = series.dashes.dashLength;
+        }
+
+        ctx.beginPath();
+
+        for (var i = ps; i < points.length; i += ps) {
+
+          var x1 = points[i - ps],
+              y1 = points[i - ps + 1],
+              x2 = points[i],
+              y2 = points[i + 1];
+
+          if (x1 == null || x2 == null) continue;
+
+          // clip with ymin
+          if (y1 <= y2 && y1 < axisy.min) {
+            if (y2 < axisy.min) continue;   // line segment is outside
+            // compute new intersection point
+            x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
+            y1 = axisy.min;
+          } else if (y2 <= y1 && y2 < axisy.min) {
+            if (y1 < axisy.min) continue;
+            x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;
+            y2 = axisy.min;
+          }
+
+          // clip with ymax
+          if (y1 >= y2 && y1 > axisy.max) {
+            if (y2 > axisy.max) continue;
+            x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
+            y1 = axisy.max;
+          } else if (y2 >= y1 && y2 > axisy.max) {
+            if (y1 > axisy.max) continue;
+            x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;
+            y2 = axisy.max;
+          }
+
+          // clip with xmin
+          if (x1 <= x2 && x1 < axisx.min) {
+            if (x2 < axisx.min) continue;
+            y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
+            x1 = axisx.min;
+          } else if (x2 <= x1 && x2 < axisx.min) {
+            if (x1 < axisx.min) continue;
+            y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;
+            x2 = axisx.min;
+          }
+
+          // clip with xmax
+          if (x1 >= x2 && x1 > axisx.max) {
+            if (x2 > axisx.max) continue;
+            y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
+            x1 = axisx.max;
+          } else if (x2 >= x1 && x2 > axisx.max) {
+            if (x1 > axisx.max) continue;
+            y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;
+            x2 = axisx.max;
+          }
+
+          if (x1 != prevx || y1 != prevy) {
+            ctx.moveTo(axisx.p2c(x1) + xoffset, axisy.p2c(y1) + yoffset);
+          }
+
+          var ax1 = axisx.p2c(x1) + xoffset,
+              ay1 = axisy.p2c(y1) + yoffset,
+              ax2 = axisx.p2c(x2) + xoffset,
+              ay2 = axisy.p2c(y2) + yoffset,
+              dashOffset;
+
+          function lineSegmentOffset(segmentLength) {
+
+            var c = Math.sqrt(Math.pow(ax2 - ax1, 2) + Math.pow(ay2 - ay1, 2));
+
+            if (c <= segmentLength) {
+              return {
+                deltaX: ax2 - ax1,
+                deltaY: ay2 - ay1,
+                distance: c,
+                remainder: segmentLength - c
+              }
+            } else {
+              var xsign = ax2 > ax1 ? 1 : -1,
+                  ysign = ay2 > ay1 ? 1 : -1;
+              return {
+                deltaX: xsign * Math.sqrt(Math.pow(segmentLength, 2) / (1 + Math.pow((ay2 - ay1)/(ax2 - ax1), 2))),
+                deltaY: ysign * Math.sqrt(Math.pow(segmentLength, 2) - Math.pow(segmentLength, 2) / (1 + Math.pow((ay2 - ay1)/(ax2 - ax1), 2))),
+                distance: segmentLength,
+                remainder: 0
+              };
+            }
+          }
+          //-end lineSegmentOffset
+
+          do {
+
+            dashOffset = lineSegmentOffset(
+                dashRemainder > 0 ? dashRemainder :
+                  dashOn ? dashOnLength : dashOffLength);
+
+            if (dashOffset.deltaX != 0 || dashOffset.deltaY != 0) {
+              if (dashOn) {
+                ctx.lineTo(ax1 + dashOffset.deltaX, ay1 + dashOffset.deltaY);
+              } else {
+                ctx.moveTo(ax1 + dashOffset.deltaX, ay1 + dashOffset.deltaY);
+              }
+            }
+
+            dashOn = !dashOn;
+            dashRemainder = dashOffset.remainder;
+            ax1 += dashOffset.deltaX;
+            ay1 += dashOffset.deltaY;
+
+          } while (dashOffset.distance > 0);
+
+          prevx = x2;
+          prevy = y2;
+        }
+
+        ctx.stroke();
+      }
+      //-end plotDashes
+
+      ctx.save();
+      ctx.translate(plotOffset.left, plotOffset.top);
+      ctx.lineJoin = 'round';
+
+      var lw = series.dashes.lineWidth,
+          sw = series.shadowSize;
+
+      // FIXME: consider another form of shadow when filling is turned on
+      if (lw > 0 && sw > 0) {
+        // draw shadow as a thick and thin line with transparency
+        ctx.lineWidth = sw;
+        ctx.strokeStyle = "rgba(0,0,0,0.1)";
+        // position shadow at angle from the mid of line
+        var angle = Math.PI/18;
+        plotDashes(Math.sin(angle) * (lw/2 + sw/2), Math.cos(angle) * (lw/2 + sw/2));
+        ctx.lineWidth = sw/2;
+        plotDashes(Math.sin(angle) * (lw/2 + sw/4), Math.cos(angle) * (lw/2 + sw/4));
+      }
+
+      ctx.lineWidth = lw;
+      ctx.strokeStyle = series.color;
+
+      if (lw > 0) {
+        plotDashes(0, 0);
+      }
+
+      ctx.restore();
+
+    });
+    //-end draw hook
+  }
+  //-end init
+
+  $.plot.plugins.push({
+    init: init,
+    options: {
+      series: {
+        dashes: {
+          show: false,
+          lineWidth: 2,
+          dashLength: 10
+        }
+      }
+    },
+    name: 'dashes',
+    version: '0.1'
+  });
+
+})(jQuery)

public/less/site-nojavascript.less

@@ -1,15 +1,15 @@
 // This file is part of pa11y-dashboard.
-// 
+//
 // pa11y-dashboard is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // (at your option) any later version.
-// 
+//
 // pa11y-dashboard is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // GNU General Public License for more details.
-// 
+//
 // You should have received a copy of the GNU General Public License
 // along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 

public/less/site.less

@@ -1,15 +1,15 @@
 // This file is part of pa11y-dashboard.
-// 
+//
 // pa11y-dashboard is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // (at your option) any later version.
-// 
+//
 // pa11y-dashboard is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // GNU General Public License for more details.
-// 
+//
 // You should have received a copy of the GNU General Public License
 // along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 
@@ -252,7 +252,7 @@
 		word-wrap:break-word;
 	}
 	.h4 {
-		margin-bottom:22px;
+		margin-bottom:6px;
 	}
 }
 .date {
@@ -347,19 +347,35 @@ ul.date-links {
 	z-index:10;
 }
 .date-selector {
-	margin-top:-125px;
+	margin-bottom:5px;
 
-	.btn-group > .btn {
-		float:none;
+	.show-stats {
+		margin-top: 0;
 	}
 
-	&.single-result {
-		margin-top:-52px;
-
-		.show-stats {
-			display:none;
-		}
+	h2 {
+		margin-top: 0;
 	}
+
+	.dates-list {
+		margin: 0;
+		padding: 0;
+		list-style-type: none;
+	}
+
+	.dates-list > li {
+		list-style-type: none;
+		padding: 0;
+		margin: 0;
+	}
+
+	.dates-list a {
+		color: #fff;
+		text-decoration: underline;
+	}
+}
+.single-result .date-selector-row {
+	display: none;
 }
 
 /* Graph */
@@ -368,11 +384,11 @@ ul.date-links {
 	width:100%;
 }
 .graph-spacer {
-	margin-bottom:60px;
-	padding-bottom:60px;
+	margin-bottom:30px;
+	padding-bottom:30px;
 }
 .graph-table {
-	margin-bottom:50px;
+	margin-bottom:0;
 
 	td {
 		width:25%;
@@ -413,8 +429,7 @@ ul.date-links {
 	}
 }
 .btn-reset {
-	margin-top:-24px;
-	margin-right:35px
+	margin-top:12px;
 }
 .flot-x-axis {
 	.flot-tick-label {
@@ -424,6 +439,68 @@ ul.date-links {
 .tooltip-graph {
 	font-size:12px;
 }
+.custom-legend .legend {
+	display:none !important;
+}
+.dashedLegend {
+	position:absolute;
+	top:17px;
+	right:40px;
+	font-size:smaller;
+	color:#545454;
+	background-color: #fff;
+	background-color: rgba(255, 255, 255, 0.75);
+	display:none;
+}
+.dashedContainer {
+	background: #fff;
+	border: 1px solid #808080;
+	margin: 5px;
+	padding-top: 5px;
+}
+.dashedLegend tr {
+	display: none;
+}
+.dashedLegend .legendColorBox > div:first-child {
+	border: 1px solid rgb(204, 204, 204);
+	padding: 3px;
+}
+.dashedLegend .legendIcon div {
+	height: 0px;
+	border-width: 3px 0px 0px;
+	border-top-style: solid;
+	overflow: hidden;
+}
+.dashedLegend .legendErrors div {
+	width: 25px;
+	border-top-color: rgb(216, 61, 45);
+}
+.dashedLegend .legendWarnings div {
+	width: 10px;
+	border-top-color: rgb(168, 103, 0);
+	float: left;
+}
+.dashedLegend .legendWarnings div:first-child {
+	margin-right: 5px;
+}
+.dashedLegend .legendNotices div {
+	width: 5px;
+	border-top-color: rgb(23, 123, 190);
+	float: left;
+	margin-left: 5px;
+}
+.dashedLegend .legendNotices div:first-child {
+	margin-left: 0;
+}
+.dashedLegend td.legendColorBox {
+	padding-right: 5px;
+	padding-bottom: 5px;
+	padding-left: 10px;
+}
+.dashedLegend td.legendLabel {
+	padding-right: 10px;
+	padding-bottom: 5px;
+}
 
 /* New task page */
 .standards-lists {
@@ -478,3 +555,21 @@ ul.date-links {
 		z-index:-1;
 	}
 }
+
+/* inline link list */
+
+.inline-list {
+	display: inline-block;
+	margin: 0;
+	padding: 0;
+}
+.inline-list > li {
+	display: inline-block;
+	border-right: 1px solid @dropdown-fallback-border; // IE8 fallback
+    border-right: 1px solid @dropdown-border;
+	padding: 0 4px 0 0;
+	margin: 0 4px 0 0;
+}
+.inline-list + div.date {
+	display: inline-block;
+}

public/less/utilities.less

@@ -43,3 +43,11 @@
 .affix {
   position: fixed;
 }
+
+
+// Cursors
+// -------------------------
+
+.pointer {
+  cursor: pointer;
+}

public/less/variables.less

@@ -545,6 +545,7 @@
 // Wells
 // -------------------------
 @well-bg:                     #f5f5f5;
+@well-bg-drk:                 #2c3e50;
 
 
 // Badges

public/less/wells.less

@@ -27,3 +27,11 @@
   padding: 9px;
   border-radius: @border-radius-small;
 }
+
+// Dark well
+
+.dark-well {
+    background-color: @well-bg-drk;
+    border-color: darken(@well-bg-drk, 7%);
+    color: #fff;
+}

view/partial/graph.html

@@ -1,4 +1,4 @@
-{{! 
+{{!
 This file is part of pa11y-dashboard.
 
 pa11y-dashboard is free software: you can redistribute it and/or modify
@@ -15,10 +15,42 @@ You should have received a copy of the GNU General Public License
 along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 }}
 <div class="col-md-12 clearfix">
-	<div class="graph-container graph-spacer ruled">
+	<div class="graph-container graph-spacer ruled clearfix">
 		<div data-role="graph" class="graph"></div>
 		<div class="row">
-			<ul class="list-unstyled floated-list series-checkboxes clearfix crunch-bottom col-md-3 col-sm-6 col-xs-12" data-role="series-checkboxes"></ul>
+			<ul class="list-unstyled floated-list series-checkboxes clearfix crunch-bottom col-md-3 col-sm-6 col-xs-12 pull-right" data-role="series-checkboxes"></ul>
+		</div>
+		<div class="dashedLegend">
+			<div class="dashedContainer">
+			    <table>
+			        <tbody>
+			            <tr>
+			                <td class="legendColorBox">
+			                    <div class="clearfix legendIcon legendErrors">
+			                        <div></div>
+			                    </div>
+			                </td>
+			                <td class="legendLabel">Errors</td>
+			            </tr>
+			            <tr>
+			                <td class="legendColorBox">
+			                    <div class="clearfix legendIcon legendWarnings">
+			                        <div></div><div></div>
+			                    </div>
+			                </td>
+			                <td class="legendLabel">Warnings</td>
+			            </tr>
+			            <tr>
+			                <td class="legendColorBox">
+			                    <div class="clearfix legendIcon legendNotices">
+			                        <div></div><div></div><div></div>
+			                    </div>
+			                </td>
+			                <td class="legendLabel">Notices</td>
+			            </tr>
+			        </tbody>
+			    </table>
+			</div>
 		</div>
 		<button data-role='zoom-reset' class="btn btn-xs btn-primary pull-right btn-reset hidden">Reset Zoom <i class="glyphicon glyphicon-zoom-out"></i></button>
 	</div>

view/partial/result-header.html

@@ -1,4 +1,4 @@
-{{! 
+{{!
 This file is part of pa11y-dashboard.
 
 pa11y-dashboard is free software: you can redistribute it and/or modify
@@ -16,7 +16,7 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 }}
 <div class="col-md-12">
 	<div class="ruled task-header">
-		<div class="row clearfix">
+		<div class="row clearfix task-header">
 			<div class="col-md-12">
 				<div class="h3 crunch well-med well pull-right"><span class="glyphicon glyphicon-calendar"></span>&nbsp;{{date-format mainResult.date format="DD MMM YYYY"}}</div>
 				<h1 class="h2 crunch-top">{{task.name}}</h1>
@@ -24,4 +24,4 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 			</div>
 		</div>
 	</div>
-</div>
+</div>

view/partial/result-selector.html

@@ -1,35 +0,0 @@
-{{! 
-This file is part of pa11y-dashboard.
-
-pa11y-dashboard is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-pa11y-dashboard is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
-}}
-<div class="col-md-12 zfix">
-	<div class="row">
-		<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
-			<div class="date-selector{{#if hasOneResult}} single-result{{/if}}">
-				<h4 class="show-stats text-center">Select a date to show stats for</h4>
-				<ul class="list-unstyled">
-					<li class="btn-group block-level clearfix">
-						<button data-toggle="dropdown" class="btn-full-width btn btn-primary dropdown-toggle" type="button">{{date-format task.lastResult.date format="DD MMM YYYY"}} <span class="glyphicon glyphicon-calendar"></span> <span class="caret"></span></button>
-						<ul role="navigation" class="date-links list-group hidden" data-role="date-select-dropdown-menu">
-							{{#results}}
-				          		<li><a class="list-group-item text-center" href="{{href}}">{{date-format date format="DD MMM YYYY"}}</a></li>
-				          	{{/results}}
-				        </ul>
-					</li>
-				</ul>
-			</div>
-		</div>
-	</div>
-</div>

view/partial/result.html

@@ -1,4 +1,4 @@
-{{! 
+{{!
 This file is part of pa11y-dashboard.
 
 pa11y-dashboard is free software: you can redistribute it and/or modify
@@ -14,9 +14,10 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 }}
+
 <div class="col-md-3 aside">
 	<div class="row">
-		<div id="top" class="col-md-12 col-sm-6 col-xs-12">
+		<div class="col-md-12 col-sm-6 col-xs-12">
 			<ul data-role="task-list" class="clearfix list-unstyled floated-list task-stats">
 				{{#mainResult}}
 					<li class="danger"><a href="#errors" title="See errors">{{count.error}}<span class="stat-type">Errors</span></a></li>
@@ -40,6 +41,25 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 			</div>
 		</div>
 	</div>
+	<div class="row date-selector-row">
+		<div id="top" class="col-md-12 col-sm-12 clearfix">
+			<div class="well dark-well">
+				<div class="date-selector">
+					<div class="btn-group block-level clearfix">
+						<h2 class="h4">
+							<span class="glyphicon glyphicon-calendar"></span>&nbsp;&nbsp;{{date-format task.lastResult.date format="DD MMM YYYY"}}
+						</h2>
+						<h3 class="h5 show-stats">Select a date to show stats for:</h3>
+						<ul role="navigation" class="dates-list">
+							{{#results}}
+							<li><a class="" href="{{href}}">{{date-format date format="DD MMM YYYY"}}</a></li>
+							{{/results}}
+						</ul>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 	<div class="row">
 		<div class="col-md-12 col-sm-12 clearfix">
 			<div class="well">
@@ -50,13 +70,13 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 	</div>
 </div>
 
-<div class="col-md-9">
+<div class="col-md-9" data-role="expandable-results" role="main">
 	{{#if mainResult.count.error}}
-		<div class="heading label-danger showing first" id="errors" data-test="task-errors">
-			<span data-role="expander" class="pull-right expander"> - </span>
+		<div class="heading label-danger pointer showing first" id="errors" data-test="task-errors" data-role="expander" role="button" tabindex="0" aria-expanded="true" aria-controls="errors-list">
+			<span class="pull-right expander"> - <span class="hide">(close panel)</span></span>
 			Errors ( {{mainResult.count.error}} )
 		</div>
-		<div class="task-danger tasks-list collapse clearfix in">
+		<div class="task-danger tasks-list collapse clearfix in" id="errors-list">
 
 			<ul class="list-unstyled">
 				{{#mainResult.errors}}
@@ -81,11 +101,11 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 	{{/if}}
 
 	{{#if mainResult.count.warning}}
-		<div class="heading label-warning" id="warnings" data-test="task-warnings">
-			<span data-role="expander" class="pull-right expander"> + </span>
+		<div class="heading label-warning pointer" id="warnings" data-test="task-warnings" data-role="expander" role="button" tabindex="0" aria-expanded="false" aria-controls="warnings-list">
+			<span class="pull-right expander"> + <span class="hide">(open panel)</span></span>
 			Warnings ( {{mainResult.count.warning}} )
 		</div>
-		<div class="task-warning tasks-list collapse clearfix">
+		<div class="task-warning tasks-list collapse clearfix" id="warnings-list">
 			<ul class="list-unstyled">
 				{{#mainResult.warnings}}
 					<li>
@@ -110,11 +130,11 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 	{{/if}}
 
 	{{#if mainResult.count.notice}}
-		<div class="heading label-info" id="notices" data-test="task-notices">
-			<span data-role="expander" class="pull-right expander"> + </span>
+		<div class="heading label-info pointer" id="notices" data-test="task-notices" data-role="expander" role="button" tabindex="0" aria-expanded="false" aria-controls="notices-list">
+			<span class="pull-right expander"> + <span class="hide">(open panel)</span></span>
 			Notices ( {{mainResult.count.notice}} )
 		</div>
-		<div class="task-info tasks-list collapse clearfix">
+		<div class="task-info tasks-list collapse clearfix" id="notices-list">
 			<ul class="list-unstyled">
 				{{#mainResult.notices}}
 					<li>
@@ -138,11 +158,11 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 	{{/if}}
 
 	{{#if mainResult.ignore.length}}
-		<div class="heading label-default">
-			<span data-role="expander" class="pull-right expander"> + </span>
+		<div class="heading label-default pointer" id="ignore" data-role="expander" role="button" tabindex="0" aria-expanded="false" aria-controls="ignore-list">
+			<span class="pull-right expander"> + <span class="hide">(open panel)</span></span>
 			Ignored Rules ( {{mainResult.ignore.length}} )
 		</div>
-		<div class="task-default tasks-list collapse clearfix">
+		<div class="task-default tasks-list collapse clearfix" id="ignore-list">
 			<ul class="list-unstyled">
 			    {{#mainResult.ignore}}
 			        <li>

view/partial/task-header.html

@@ -1,4 +1,4 @@
-{{! 
+{{!
 This file is part of pa11y-dashboard.
 
 pa11y-dashboard is free software: you can redistribute it and/or modify
@@ -17,27 +17,25 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 <div class="col-md-12 zfix">
 	<div class="ruled task-header">
 		<div class="row clearfix">
-			<div class="col-md-9 col-sm-9">
+			<div class="col-md-12">
 				<h1 class="h2 crunch-top">{{task.name}}</h1>
 				<p class="h4">{{simplify-url task.url}}<span class="h5"> ({{task.standard}})</span></p>
 			</div>
-			<div class="col-md-3 col-sm-3 text-right run-details">
-				{{#unless readonly}}
-					<div class="btn-group">
-				        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Options <span class="caret"></span></button>
-				        <ul class="dropdown-menu pull-right" role="menu">
+			<div class="run-details task-header clearfix">
+				<div class="col-md-12 clearfix">
+					{{#unless readonly}}
+				        <ul class="inline-list" role="menu">
 				          	<li><a href="/{{task.id}}/edit">Edit this task</a></li>
 							<li><a href="/{{task.id}}/delete">Delete this task</a></li>
-							<li class="divider"></li>
 							<li><a href="{{task.hrefRun}}" data-test="run-task">Run pa11y</a></li>
 						</ul>
-				    </div>
-				{{/unless}}
-				{{#if mainResult}}
-					<div class="date">Last run : {{date-format mainResult.date format="DD MMM YYYY"}}</div>
-				{{else}}
-					<div class="date">Not yet run</div>
-				{{/if}}
+					{{/unless}}
+					{{#if mainResult}}
+						<div class="date">Last run: <strong>{{date-format mainResult.date format="DD MMM YYYY"}}</strong></div>
+					{{else}}
+						<div class="date">Not yet run</div>
+					{{/if}}
+				</div>
 			</div>
 		</div>
 	</div>

view/result/index.html

@@ -1,4 +1,4 @@
-{{! 
+{{!
 This file is part of pa11y-dashboard.
 
 pa11y-dashboard is free software: you can redistribute it and/or modify
@@ -21,4 +21,6 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 
 {{> result-header}}
 
-{{> result}}
+<div class="single-result">
+    {{> result}}
+</div>

view/task/index.html

@@ -1,4 +1,4 @@
-{{! 
+{{!
 This file is part of pa11y-dashboard.
 
 pa11y-dashboard is free software: you can redistribute it and/or modify
@@ -76,8 +76,6 @@ along with pa11y-dashboard.  If not, see <http://www.gnu.org/licenses/>.
 		{{> graph}}
 	{{/unless}}
 
-	{{> result-selector}}
-
 {{/if}}
 
 {{#if mainResult}}