Version 1.0.0

Amend positon of date in task-header when site is in demo mode

README.md

@@ -1,14 +1,14 @@
 pa11y-dashboard
 ===============
 
-pa11y-dashboard is a visual web interface to the [pa11y][pa11y] accessibility reporter.
+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.0.0-beta.3*  
+**Current Version:** *1.0.0*  
 **Node Version Support:** *0.10*
 
 
-![The Dashboard Page](https://f.cloud.github.com/assets/1225142/1269563/2fc6e4e0-2cfb-11e3-8f49-e74a9d49bb32.jpg)
-![The URL Page](https://f.cloud.github.com/assets/1225142/1297247/f749f3a0-30dd-11e3-9920-583f86f3c8f9.jpg)
+![dashboard](https://f.cloud.github.com/assets/1225142/1549567/f0361e72-4de8-11e3-8d14-3fe6900cc15d.jpg)
+![results-page](https://f.cloud.github.com/assets/1225142/1549568/f225aa54-4de8-11e3-8b25-ef2f405997a3.jpg)
 
 
 Setup
@@ -34,7 +34,7 @@ $ NODE_ENV=production node .   # Run in production
 $ NODE_ENV=development node .  # Run in development
 ```
 
-See [development instructions](#development) for more information about running locally (and restarting automatically when files change).
+Check the [development instructions](#development) for more information about running locally (and restarting automatically when files change).
 
 
 Configurations
@@ -48,6 +48,15 @@ The boot configurations for pa11y-dashboard are as follows. Look at the sample J
 ### port
 *(number)* The port to run the application on.
 
+### noindex
+*(boolean)* If set to `true` (default), the dashboard will not be indexed by search engines. Set to `false` to allow indexing.
+
+### readonly
+*(boolean)* If set to `true`, users will not be able to add, delete or run URLs (defaults to `false`).
+
+### siteMessage
+*(string)* A message to display prominently on the site home page. Defaults to `null`.
+
 
 Development
 -----------

app.js

@@ -11,6 +11,7 @@ module.exports = initApp;
 
 // Initialise the application
 function initApp (config, callback) {
+	config = defaultConfig(config);
 
 	var app = new EventEmitter();
 	app.address = null;
@@ -51,8 +52,12 @@ function initApp (config, callback) {
 		year: (new Date()).getFullYear(),
 		version: pkg.version,
 		repo: pkg.homepage,
-		bugtracker: pkg.bugs
+		bugtracker: pkg.bugs,
+		noindex: config.noindex,
+		readonly: config.readonly,
+		siteMessage: config.siteMessage
 	});
+
 	app.express.use(function (req, res, next) {
 		res.locals.isHomePage = (req.path === '/');
 		res.locals.host = req.host;
@@ -61,12 +66,14 @@ function initApp (config, callback) {
 
 	// Load routes
 	require('./route/index')(app);
-	require('./route/new')(app);
 	require('./route/task/index')(app);
-	require('./route/task/delete')(app);
-	require('./route/task/run')(app);
 	require('./route/result/index')(app);
 	require('./route/result/download')(app);
+	if (!config.readonly) {
+		require('./route/new')(app);
+		require('./route/task/delete')(app);
+		require('./route/task/run')(app);
+	}
 
 	// Error handling
 	app.express.get('*', function (req, res) {
@@ -93,3 +100,14 @@ function initApp (config, callback) {
 	});
 
 }
+
+// Get default configurations
+function defaultConfig (config) {
+	if (typeof config.noindex !== 'boolean') {
+		config.noindex = true;
+	}
+	if (typeof config.readonly !== 'boolean') {
+		config.readonly = false;
+	}
+	return config;
+}

config/development.sample.json

@@ -1,4 +1,6 @@
 {
 	"webservice": "http://localhost:3000/",
-	"port": 4000
+	"port": 4000,
+	"noindex": true,
+	"readonly": false
 }

config/production.sample.json

@@ -1,4 +1,6 @@
 {
 	"webservice": "http://localhost:3000/",
-	"port": 4000
+	"port": 4000,
+	"noindex": true,
+	"readonly": false
 }

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pa11y-dashboard",
-	"version": "1.0.0-beta.3",
+	"version": "1.0.0",
 	"private": true,
 
 	"description": "pa11y-dashboard is a visual web interface to the pa11y accessibility reporter",
@@ -25,7 +25,7 @@
 		"express": "~3.4",
 		"express-hbs": "~0.2",
 		"moment": "~2.2",
-		"pa11y-webservice-client-node": "git+ssh://git@github.com:nature/pa11y-webservice-client-node.git#1.0.0-beta.7",
+		"pa11y-webservice-client-node": "~1.0",
 		"underscore": "~1.5"
 	},
 	"devDependencies": {

public/js/site.js

@@ -132,9 +132,9 @@ $(document).ready(function(){
 
     function getData() {
         return [
-            { color: 'rgb(231, 76, 60)', label: 'Errors', data:  data.error },
-            { color: 'rgb(243, 156, 18)', label: 'Warnings', data:  data.warning  },
-            { color: 'rgb(52, 152, 219)', 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  },
+            { color: 'rgb(23, 123, 190)', label: 'Notices', data:  data.notice }
         ];
     }
 
@@ -168,11 +168,11 @@ $(document).ready(function(){
     $.each(datasets, function(key, val) {
         var lowerCaseValue = (val.label.substring(0, val.label.length - 1)).toLowerCase();
         choiceContainer.append('<li class="text-center '+
-        lowerCaseValue +'"><label for="id' + key +
-        '"><input type="checkbox" name="' + key +
+        lowerCaseValue +'"><div class="series-checkbox-container"><input type="checkbox" name="' + key +
         '" checked="checked" id="id' + key +
-        '"/><span class="stat-type">' + val.label +
-        '</span></label></li>');
+        '"/><label for="id' + key +
+        '"><span class="stat-type">' + val.label +
+        '</span></label></div></li>');
     });
     
     choiceContainer.find('input').click(plotAccordingToChoices);

public/less/site-responsive.less

@@ -32,7 +32,6 @@
 	.date {
 		margin-top:10px;
 		float:right;
-		font-size:;
 	}
 	.other-tasks {
 		.sr-only();
@@ -65,6 +64,11 @@
 		margin-top:0;
 		margin-bottom:25px;
 	}
+	.readonly-mode .date {
+		margin-top:0;
+		margin-bottom:5px;
+		float:none;
+	}
 	.graph-spacer {
 		padding-bottom:20px;
 		margin-bottom:15px;
@@ -131,6 +135,15 @@
 	.series-checkboxes li {
 		font-size:floor(@font-size-base * 0.8); // ~12px;
 	}
+	.task-header .h3 {
+		float:none !important;
+		text-align:center;
+		margin-bottom:15px !important;
+		padding:10px;
+	}
+	.task-header h1 {
+		margin-bottom:3px;
+	}
 }
 @media (max-width:360px) {
 	.delete-button {

public/less/site.less

@@ -96,6 +96,19 @@
 .delete-button:hover {
 	color:lighten(@brand-danger, 8%);
 }
+.footer a, .breadcrumb a {
+	text-decoration:underline;
+}
+.breadcrumb a {
+	&:hover, &:active, &:focus {
+		text-decoration: none;
+	}
+}
+.site-message {
+	.glyphicon {
+		margin-right:6px;
+	}
+}
 
 /* Type */
 .h1 {
@@ -219,6 +232,10 @@
 .task-header {
 	margin-bottom:30px;
 
+	h1 {
+		margin-bottom:6px;
+	}
+
 	h2 {
 		word-wrap:break-word;
 	}
@@ -226,6 +243,9 @@
 .date {
 	margin-top:5px;
 }
+.readonly-mode .date {
+	margin-top:40px;
+}
 .tasks-list {
 	padding:15px;
 	margin-bottom:30px;
@@ -334,12 +354,20 @@ ul.date-links {
 		border-radius: @border-radius-base;
 
 		label {
-			padding:2px 4px;
 			margin-bottom:0;
 		}
 
+		.series-checkbox-container {
+			padding:2px 4px 3px 4px;
+		}
+
+		input {
+			margin:5px auto 3px auto;
+		}
+
 		input, label {
 			cursor: pointer;
+			display:block;
 		}
 
 		&:last-child {

public/less/variables-flatly.less

@@ -13,16 +13,16 @@
 @gray-dark:              #616D6E;
 @gray:                   #6C7878;
 @gray-light:             #7C8C8D;
-@gray-lighter:           #ecf0f1;
+@gray-lighter:           #eaeff1;
 
 // Brand colors
 // -------------------------
 
 @brand-primary:         #2C3E50;
-@brand-success:         #00A18C;
-@brand-warning:         #F39C12;
-@brand-danger:          #E74C3C;
-@brand-info:            #3498DB;
+@brand-success:         #00806F;
+@brand-warning:         #A86700;
+@brand-danger:          #D83D2D;
+@brand-info:            #177BBE;
 
 // Scaffolding
 // -------------------------
@@ -551,7 +551,7 @@
 // Breadcrumbs
 // -------------------------
 @breadcrumb-bg:               lighten(@gray-lighter, 4%);
-@breadcrumb-color:            lighten(@gray-dark, 3%);
+@breadcrumb-color:            @gray-dark;
 @breadcrumb-active-color:     @breadcrumb-color;
 
 

view/index.html

@@ -1,5 +1,14 @@
 {{#content "title"}}pa11y-dashboard{{/content}}
 
+{{#if siteMessage}}
+    <div class="col-md-12 clearfix">
+        <div class="alert alert-info site-message">
+            <h3 class="crunch-top"><span class="pull-left glyphicon glyphicon-exclamation-sign"></span> Important</h3>
+            <p class="h5">{{siteMessage}}</p>
+        </div>
+    </div>
+{{/if}}
+
 {{#deleted}}
     <div class="col-md-12 clearfix">
         <div class="alert alert-info">

view/layout/default.html

@@ -9,6 +9,8 @@
 	<title>{{block "title"}}</title>
 	<meta name="description" content="{{block "description"}}"/>
 
+	{{#if noindex}}<meta name="robots" content="noindex"/>{{/if}}
+
 	<link rel="icon" type="image/png" href="favicon.png" />
 
 	<!-- For mobile devices. -->
@@ -30,7 +32,11 @@
 	{{> breadcrumb}}
 
 	<div class="container">
+		{{#if readonly}}
+			<div class="row readonly-mode">
+		{{else}}
 			<div class="row">
+		{{/if}}
 			<section>
 				<div class="section" role="main">
 					{{{body}}}

view/new.html

@@ -58,8 +58,8 @@
 				<ul class="list-unstyled">
 					{{#rules}}
 						<li>
-							<label title="{{description}}" data-role="rules-tooltip" class="checkbox">
-								<input type="checkbox" name="ignore[]" value="{{name}}" {{#ignored}}checked{{/ignored}}/>
+							<input class="pull-left" id="{{name}}" type="checkbox" name="ignore[]" value="{{name}}" {{#ignored}}checked{{/ignored}}/>
+							<label for="{{name}}" title="{{description}}" data-role="rules-tooltip" class="checkbox">
 								{{name}}
 							</label>
 						</li>

view/partial/breadcrumb.html

@@ -8,10 +8,10 @@
 						<li class="active">Add URL</li>
 					{{/if}}
 			  		{{#if isTaskPage}}
-					  <li class="active">{{simplify-url task.url}}</li>
+					  <li class="active">{{task.name}}</li>
 					{{/if}}
 					{{#if isResultPage}}
-						<li><a href="{{task.href}}">{{simplify-url task.url}}</a></li>
+						<li><a href="{{task.href}}">{{task.name}}</a></li>
 				  		<li class="active">Results for {{date-format mainResult.date format="DD MMM YYYY"}}</li>
 			  		{{/if}}
 				</ol>

view/partial/page-footer.html

@@ -2,7 +2,7 @@
 	<div class="footer" role="contentinfo">
 		<div class="container">
 			<div class="col-md-7">
-				<p>&copy; {{year}} Nature Publishing Group.<br/>pa11y dashboard is licensed under the GNU General Public License 3.0.<br/>Version {{version}}</p>
+				<small>&copy; {{year}} Nature Publishing Group.<br/>pa11y dashboard is licensed under the GNU General Public License 3.0.<br/>Version {{version}}</small>
 			</div>
 			<div class="col-md-5 clearfix">
 				<ul class="crunch-bottom floated-list nav">

view/partial/result-header.html

@@ -4,7 +4,7 @@
 			<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>
-				<p class="h4">{{simplify-url task.url}}<span class="h5"> - ({{task.standard}})</span></p>
+				<p class="h4">{{simplify-url task.url}}<span class="h5"> ({{task.standard}})</span></p>
 			</div>
 		</div>
 	</div>

view/partial/task-header.html

@@ -3,10 +3,12 @@
 		<div class="row clearfix">
 			<div class="col-md-9 col-sm-9">
 				<h1 class="h2 crunch-top">{{task.name}}</h1>
-				<p class="h4">{{simplify-url task.url}}<span class="h5"> - ({{task.standard}})</span></p>
+				<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}}
 					<a href="{{task.hrefRun}}" class="btn btn-success">Run <span class="glyphicon glyphicon-play"></span></a>
+				{{/unless}}
 				{{#if mainResult}}
 					<div class="date">Last run : {{date-format mainResult.date format="DD MMM YYYY"}}</div>
 				{{else}}

view/partial/tasks.html

@@ -1,12 +1,20 @@
 
 <ul class="list-unstyled clearfix crunch-bottom">
 	<li class="col-md-4 col-sm-6 task-card add-task">
+		{{#if readonly}}
+			{{! TODO PERRY: make this look disabled }}
+			<span class="well task-card-link crunch-bottom">
+				<p class="h3 crunch">Add new URL</p>
+				<p class="supersize-me crunch">+</p>
+			</span>
+		{{else}}
 			<a class="well task-card-link crunch-bottom" data-role="add-task" href="/new">
 				<p class="h3 crunch">Add new URL</p>
 				<p class="supersize-me crunch">+</p>
 			</a>
+		{{/if}}
 	</li>
-	{{#tasks}}
+	{{#each tasks}}
 		<li class="col-md-4 col-sm-6 task-card">
 			<a class="well task-card-link crunch-bottom" title="Details for URL {{simplify-url url}}" href="{{href}}">
 				<p class="h3">{{name}}</p>
@@ -24,7 +32,9 @@
 					<p class="no-results">No results</p>
 				{{/if}}
 			</a>
+			{{#unless ../readonly}}
 				<a title="Delete this URL" class="delete-button" href="{{hrefDelete}}"><span class="sr-only">Delete </span><span class="glyphicon glyphicon-remove"></span></a>
+			{{/unless}}
 		</li>
-	{{/tasks}}
+	{{/each}}
 </ul>

view/result/index.html

@@ -1,6 +1,6 @@
 
 {{#content "title"}}
-    {{task.url}} ({{task.standard}}) {{date-format mainResult.date format="DD MMM YYYY"}}
+    {{task.name}} - {{simplify-url task.url}} ({{task.standard}}) - {{date-format mainResult.date format="DD MMM YYYY"}}
 {{/content}}
 
 {{> result-header}}

view/task/index.html

@@ -1,6 +1,6 @@
 
 {{#content "title"}}
-	{{task.url}} ({{task.standard}})
+	{{task.name}} - {{simplify-url task.url}} ({{task.standard}})
 {{/content}}
 
 {{#added}}