external-repos/pa11y-dashboard
2
0
Fork 1
mirror of https://github.com/pa11y/pa11y-dashboard.git synced 2025-09-25 06:41:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
perryharlock
2013-09-26 14:08:38 +01:00
parent d668b26dea
commit 8d224e160a
7 changed files with 122 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/main.css
View File

File diff suppressed because one or more lines are too long

7
public/js/site.js
View File

@@ -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));

20
public/less/ie8and.less
View File

@@ -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;
}
}

9
public/less/site-nojavascript.less
View File

@@ -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;
}

44
public/less/site-responsive.less
View File

@@ -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;

40
public/less/site.less
View File

@@ -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;

67
view/task/index.html
View File

@@ -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">
<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">
<div id="top" 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}}</a></li>
@@ -71,18 +83,17 @@
{{/mainResult}}
</ul>
</div>
</div>
<div class="row">
<div class="action-buttons clearfix">
<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>
<div class="action-buttons col-md-12 col-sm-6 clearfix">
<div class="row">
<!-- ########### Functionality to be done ############## -->
<div class="col-md-12 col-sm-6 col-xs-12">
<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}}