Responsify-ay-ay-ay

public/less/site-responsive.less

@@ -1,15 +1,25 @@
 /* Media queries */
 @media (max-width:991px) {
-	h1 {
+	.h1, h1 {
-		font-size:32px;
+		font-size:floor(@font-size-base * 2.15); // ~32px;
 	}
-	h2 {
+	.h2, h2 {
-		font-size:28px;
+		font-size:floor(@font-size-base * 1.9); // ~28px;
+	}
+	.task-header .h4 {
+		font-size:floor(@font-size-base * 1.15); // ~17px;
 	}
 	.header {
 		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;
 	}
@@ -22,34 +32,29 @@
 		margin-bottom:3px;
 	}
 	.date {
-		margin-top:2px;
+		margin-top:10px;
+		float:right;
+		font-size:;
 	}
-	.action-buttons button {
+	.other-tasks {
-		width:49%;
+		.sr-only();
-		margin-right:2%;
-		float:left;
-	}
-	.action-buttons button:last-child {
-		margin-right:0;
 	}
 }
 @media (max-width:640px) {
 	body {
 		font-size:14px;
 	}
-	h1 {
+	.h1, h1 {
-		font-size:26px;
+		font-size:floor(@font-size-base * 1.75); // ~26px;
 	}
-	h2 {
+	.h2, h2 {
-		font-size:24px;
+		font-size:floor(@font-size-base * 1.6); // ~24px;
 	}
-	.action-buttons button {
+	.task-header .h4 {
-		width:100%;
+		font-size:floor(@font-size-base * 1.1); // ~16px;
-		margin-right:0;
-		float:none;
 	}
 	.label, .badge {
-		font-size:11px;
+		font-size:floor(@font-size-base * 0.75); // ~11px;
 		padding:7px;
 	}
 	.rule-name .badge {
@@ -58,12 +63,66 @@
 	.graph {
 		margin-bottom:3rem;
 	}
+	.task-stats li a {
+		padding:11px 0;
+		font-size:ceil(@font-size-base * 1.25); // ~18px
+		line-height:1.1;
+	}
 	.btn-full-width {
-		margin-top:8px;
+		margin:0;
+	}
+	.delete-button {
+		font-size:floor(@font-size-base * 1.35); // ~20px;
+		top:10px;
+		right:25px;
+	}
+	.standards-lists {
+		.tooltip {
+			&.top .tooltip-inner {
+				max-width:400px;
+			}
+		}
+	}
+	.tasks-list {
+		li {
+			margin-bottom:20px;
+		}
 	}
 }
+@media (max-width:480px) {
+	.graph {
+		height:200px;
+		margin-bottom:1.5rem;
+	}
+	.series-checkboxes li {
+		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;
+		top:5px;
+		right:20px;
+		.opacity(0.7)
+	}
+	.standards-lists {
+		.checkbox {
+			font-size:floor(@font-size-base * 0.9); // ~13px;
+		}
+		.tooltip {
+			&.top .tooltip-inner {
+				max-width:260px;
+			}
+		}
+	}
+	.task-stats li a {
+		padding:11px 0;
+		font-size:floor(@font-size-base * 1.1); // ~16px;
+		line-height:1.3;
+	}
 }

public/less/site.less

@@ -38,7 +38,6 @@
 }
 .btn-full-width {
 	width:100%;
-	display:block;
 	margin-top:15px
 }
 .dropdown-menu {
@@ -167,14 +166,12 @@
 }
 
 /* Task details page*/
-
 .task-header h2 {
 	word-wrap:break-word;
 }
 .date {
 	margin-top:5px;
 }
-
 .tasks-list {
 	padding:15px;
 	margin-bottom:30px;
@@ -255,6 +252,7 @@
 
 	.checkbox {
 		cursor: pointer;
+		word-wrap: break-word;
 	}
 
 	.tooltip {

view/new.html

@@ -3,7 +3,7 @@
 	Add a new url
 {{/content}}
 
-<form class="col-md-12 col-xs-" action="/new" method="post">
+<form class="col-md-12" action="/new" method="post">
 
 	<legend>Add a new url</legend>
 
@@ -18,7 +18,7 @@
 
 	<div class="form-group clearfix">
 		<div class="row">
-			<div class="col-md-8">
+			<div class="col-md-8 col-sm-8 col-xs-10">
 				<label class="control-label" for="new-task-url">URL</label>
 				<input class="form-control" id="new-task-url" type="url" placeholder="URL" name="url" value="{{task.url}}"/>
 			</div>
@@ -27,7 +27,7 @@
 
 	<div class="form-group clearfix">
 		<div class="row">
-			<div class="col-md-4">
+			<div class="col-md-4 col-sm-4 col-xs-6">
 				<label class="control-label" for="new-task-standard">Standard</label>
 				<select data-role="new-task-select" class="form-control" id="new-task-standard" name="standard">
 					{{#standards}}

view/task.html

@@ -35,14 +35,6 @@
 
 {{#if results}}
 	<div class="col-md-12 clearfix">
-		<div style="position:relative">
-			<div class="tooltip in">
-				<div class="tooltip-arrow"></div>
-				<div class="tooltip-inner">
-					This is the content
-				</div>
-			</div>
-		</div>
 		<div class="graph-container ruled">
 			<div data-role="graph" class="graph"></div>
 			<ul class="list-unstyled floated-list series-checkboxes clearfix crunch-bottom" data-role="series-checkboxes"></ul>
@@ -55,8 +47,10 @@
 	</div>
 {{/if}}
 
-<div class="col-md-3">
+<div class="col-md-3 aside">
 	{{#if results}}
+		<div class="row">
+			<div class="col-md-12 col-xs-6">
 				<div class="btn-group block-level clearfix">
 					<button data-toggle="dropdown" class="btn-full-width btn btn-primary dropdown-toggle" type="button">{{date-format lastResult.date format="DD MMM YYYY"}} <span class="glyphicon glyphicon-calendar"></span> <span class="caret"></span></button>
 					<ul role="menu" class="dropdown-menu">
@@ -65,7 +59,8 @@
 			          	{{/results}}
 			        </ul>
 				</div>
-
+			</div>
+			<div class="col-md-12 col-xs-6">
 				<ul id="top" data-role="task-list" class="clearfix list-unstyled floated-list task-stats">
 					{{#lastResult}}
 						<li class="danger"><a href="#errors" title="See errors">{{count.error}}</a></li>
@@ -73,13 +68,20 @@
 						<li class="info"><a href="#notifications" title="See notifications">{{count.notice}}</a></li>
 					{{/lastResult}}
 				</ul>
+			</div>
+		</div>
 
 		<!-- ########### Functionality to be done ############## -->
+		<div class="row">
 			<div class="action-buttons clearfix">
+				<div class="col-md-12 col-xs-6">
 			        <button class="btn-full-width btn btn-default">Download CSV <span class="glyphicon glyphicon-download"></span></button>
-
+				</div>
+				<div class="col-md-12 col-xs-6">
 			        <button class="btn-full-width btn btn-default">Download JSON <span class="glyphicon glyphicon-download"></span></button>
 				</div>
+		    </div>
+		</div>
 	{{/if}}
 
 	<!-- List of other urls -->