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');
-    $('.dropdown-menu a').removeClass('list-group-item active');
+    $('.date-links').removeClass('list-group date-links').addClass('dropdown-menu');
+    $('.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 {
-	word-wrap:break-word;
+.task-header {
+	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 {
-	margin-bottom:50px;
-	padding-bottom:30px;
+.graph-spacer {
+	margin-bottom:60px;
+	padding-bottom:60px;
 }
 .graph-table {
 	margin-bottom:50px;