Refactor standard bootstrap date selector on task page to be non-js friendly

public/js/site.js

@@ -8,6 +8,7 @@ $(document).ready(function(){
     var toTopLinks = $('[data-role="top"]');
     var zoomResetButton = $('[data-role="zoom-reset"]');
     var graphContainer = $('[data-role="graph"]');
+    var dateSelectDropdownMenu = $('[data-role="date-select-dropdown-menu"]');
 
     var graphOptions = {
         series: {
@@ -57,10 +58,12 @@ $(document).ready(function(){
         $(animateSection($('#top'), -55));
     });
 
+    // Switch standards list of rules
 	switchStandardsList(standardSelect);
     $('.rules-list-title').addClass('hidden');
-    $('.date-links').removeClass('date-links list-group').addClass('dropdown-menu');
+    $('.date-links').removeClass('list-group date-links').addClass('dropdown-menu');
-    $('.dropdown-menu a').removeClass('list-group-item active');
+    $('.dropdown-menu a').removeClass('list-group-item');
+    dateSelectDropdownMenu.removeClass('hidden');
 
 	standardSelect.change( function(){
 		switchStandardsList($(this));

public/less/ie8and.less

@@ -107,12 +107,22 @@
 	.col-md-9 { width:72%; }
 	.col-md-10 { width:80%; } 
 	.col-md-12 { width: 97%; }
-	.dropdown-container {
+
-		position:relative;
-		z-index:900;
-		margin-bottom:20px;
-	}
 	.aside .task-stats li {
 		width:31.5%;
 	}
+	.aside .action-buttons {
+		width:80%;
+	}
+	.date-selector {
+		zoom:1;
+	}
+	.zfix {
+		position:relative;
+		z-index:100;
+	}
+	.list-group li .list-group-item {
+		margin:0;
+		position:static;
+	}
 }

public/less/site-nojavascript.less

@@ -7,6 +7,12 @@
 		display:block !important;
 		visibility:visible !important;
 	}
+	.date-links.hidden {
+		display:none !important;
+	}
+	.date-selector .btn-group:hover ul.date-links {
+		display:block !important;
+	}
 	table.hidden {
 		display:table !important;
 	}
@@ -17,9 +23,6 @@
 		margin-top:0;
 		border-radius: 3px 3px 0 0;
 	}
-	.dropdown-toggle {
-		display:none;
-	}
 	.show-class {
 		display:block;
 	}

public/less/site-responsive.less

@@ -13,13 +13,6 @@
 		margin-bottom:2rem;
 		padding-bottom:1rem;
 	}
-	.btn-full-width {
-		margin-top:0;
-	}
-	.ruled {
-		padding-bottom:1.5rem;
-		margin-bottom:2rem;
-	}
 	.task-header .run-details {
 		text-align:left;
 	}
@@ -39,6 +32,34 @@
 	.other-tasks {
 		.sr-only();
 	}
+	.action-buttons,
+	.task-stats,
+	.btn-full-width {
+		margin-bottom:0;
+	}
+	.aside {
+		margin-bottom:15px;
+	}
+	.graph-spacer {
+		padding-bottom:80px;
+	}
+}
+@media (max-width:767px) {
+	.date-selector {
+		margin-top:0;
+		margin-bottom:25px;
+	}
+	.graph-spacer {
+		padding-bottom:20px;
+		margin-bottom:15px;
+	}
+	.action-buttons {
+		margin-top:10px;
+
+		.btn-full-width {
+			margin-bottom:10px;
+		}
+	}
 }
 @media (max-width:640px) {
 	body {
@@ -68,9 +89,6 @@
 		font-size:ceil(@font-size-base * 1.25); // ~18px
 		line-height:1.1;
 	}
-	.btn-full-width {
-		margin:0;
-	}
 	.delete-button {
 		font-size:floor(@font-size-base * 1.35); // ~20px;
 		top:10px;
@@ -89,7 +107,7 @@
 		}
 	}
 }
-@media (max-width:480px) {
+@media (max-width:479px) {
 	.graph {
 		height:200px;
 		margin-bottom:1.5rem;
@@ -98,11 +116,7 @@
 		font-size:floor(@font-size-base * 0.8); // ~12px;
 	}
 }
-
 @media (max-width:360px) {
-	.task-stats li a {
-		padding:8px 0;
-	}
 	.delete-button {
 		display:block !important;
 		font-size:floor(@font-size-base * 1); // ~15px;

public/less/site.less

@@ -15,8 +15,6 @@
 }
 .ruled {
 	border-bottom:dotted 1px @gray;
-	padding-bottom:15px;
-	margin-bottom:30px;
 }
 .ruled-sm {
 	margin-bottom:15px;
@@ -45,7 +43,7 @@
 }
 .btn-full-width {
 	width:100%;
-	margin-top:15px
+	margin-bottom:10px
 }
 .dropdown-menu {
 	width:100%;
@@ -55,11 +53,6 @@
 	margin-top:0;
 	margin-bottom:10px;
 }
-.date-links {
-	.list-unstyled();
-	max-height:190px;
-	overflow-y: auto;
-}
 .list-group {
 	li .list-group-item {
 		border-radius:0;
@@ -176,8 +169,12 @@
 }
 
 /* Task details page*/
-.task-header h2 {
+.task-header {
-	word-wrap:break-word;
+	margin-bottom:30px;
+
+	h2 {
+		word-wrap:break-word;
+	}
 }
 .date {
 	margin-top:5px;
@@ -240,14 +237,31 @@
 	line-height:1;
 }
 
+/* Date selector */
+ul.date-links {
+	.list-unstyled();
+	position:absolute;
+	top:44px;
+	left:0;
+	width:100%;
+	z-index:10;
+}
+.date-selector {
+	margin-top:-125px;
+
+	.btn-group > .btn {
+		float:none;
+	}
+}
+
 /* Graph */
 .graph {
 	height:300px;
 	width:100%;
 }
-.graph-container {
+.graph-spacer {
-	margin-bottom:50px;
+	margin-bottom:60px;
-	padding-bottom:30px;
+	padding-bottom:60px;
 }
 .graph-table {
 	margin-bottom:50px;

view/task/index.html

@@ -36,7 +36,7 @@
 
 {{#if results}}
 	<div class="col-md-12 clearfix">
-		<div class="graph-container ruled">
+		<div class="graph-container graph-spacer ruled">
 			<div data-role="graph" class="graph"></div>
 			<ul class="list-unstyled floated-list series-checkboxes clearfix crunch-bottom" data-role="series-checkboxes"></ul>
 			<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>
@@ -44,25 +44,37 @@
 	</div>
 
 	<div class="col-md-12 hidden">
-		{{> results-table}}
+		<div class="graph-spacer ruled">
+			{{> results-table}}
+		</div>
 	</div>
+
+	<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">
+					<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"}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
+					          	{{/results}}
+					        </ul>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	</div>
+
 {{/if}}
 
 <div class="col-md-3 aside">
 	{{#if results}}
 		<div class="row">
-			<div id="top" class="col-md-12 col-xs-6 dropdown-container">
+			<div id="top" class="col-md-12 col-sm-6 col-xs-12">
-				<h4 class="show-stats hidden">Select a date to show stats for</h4>
-				<div 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">
-						{{#results}}
-			          		<li><a class="list-group-item" href="{{href}}">{{date-format date format="DD MMM YYYY"}}</a></li>
-			          	{{/results}}
-			        </ul>
-				</div>
-			</div>
-			<div class="col-md-12 col-xs-6">
 				<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}}</a></li>
@@ -71,18 +83,17 @@
 					{{/mainResult}}
 				</ul>
 			</div>
-		</div>
+			<div class="action-buttons col-md-12 col-sm-6 clearfix">
-
+				<div class="row">
-		<div class="row">
+					<!-- ########### Functionality to be done ############## -->
-			<div class="action-buttons clearfix">
+					<div class="col-md-12 col-sm-6 col-xs-12">
-				<div class="col-md-12 col-xs-6">
+				        <a class="btn-full-width btn btn-default">Download CSV <span class="glyphicon glyphicon-download"></span></a>
-			        <a class="btn-full-width btn btn-default">Download CSV <span class="glyphicon glyphicon-download"></span></a>
+					</div>
+					<!-- ##################### End ######################## -->
+					<div class="col-md-12 col-sm-6 col-xs-12">
+				        <a href="/{{task.id}}.json" target="_blank" class="btn-full-width btn btn-default">Download JSON <span class="glyphicon glyphicon-download"></span></a>
+					</div>
 				</div>
-				<!-- ########### Functionality to be done ############## -->
-				<div class="col-md-12 col-xs-6">
-			        <a href="/{{task.id}}.json" target="_blank" class="btn-full-width btn btn-default">Download JSON <span class="glyphicon glyphicon-download"></span></a>
-				</div>
-				<!-- ##################### End ######################## -->
 		    </div>
 		</div>
 	{{/if}}
@@ -113,7 +124,7 @@
 				<ul class="list-unstyled">
 					{{#mainResult.errors}}
 						<li>
-							<p class="crunch rule-name">{{type}} : {{code}} <span class="badge">{{count}}</span></p>
+							<p class="crunch rule-name">{{code}} <span class="badge">{{count}}</span></p>
 							<p>{{message}}</p>
 						</li>
 					{{/mainResult.errors}}
@@ -133,7 +144,7 @@
 				<ul class="list-unstyled">
 					{{#mainResult.warnings}}
 						<li>
-							<p class="crunch rule-name">{{type}} : {{code}} <span class="badge">{{count}}</span></p>
+							<p class="crunch rule-name">{{code}} <span class="badge">{{count}}</span></p>
 							<p>{{message}}</p>
 						</li>
 					{{/mainResult.warnings}}
@@ -154,7 +165,7 @@
 				<ul class="list-unstyled">
 					{{#mainResult.notices}}
 						<li>
-							<p class="crunch rule-name">{{type}} : {{code}} <span class="badge">{{count}}</span></p>
+							<p class="crunch rule-name">{{code}} <span class="badge">{{count}}</span></p>
 							<p>{{message}}</p>
 						</li>
 					{{/mainResult.notices}}