external-repos/pa11y-dashboard
2
0
Fork 1
mirror of https://github.com/pa11y/pa11y-dashboard.git synced 2025-09-24 22:31:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Redesign tasks lists headers and expander link

Browse Source
This commit is contained in:
perryharlock
2013-09-23 15:12:12 +01:00
parent 9f917f97ec
commit aa1cf59ff0
6 changed files with 87 additions and 47 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

18
public/js/site.js
View File

@@ -3,7 +3,7 @@ $(document).ready(function(){
var data = {};
var standardsList = $('[data-role="standards-list"]');
var standardSelect = $('[data-role="new-task-select"]');
var headingBadges = $('.heading-badges');
var expandLink = $('[data-role="expander"]');
var taskListSelector = $('[data-role="task-list"] a');
var toTopLinks = $('[data-role="top"]');
var zoomResetButton = $('[data-role="zoom-reset"]');
@@ -40,9 +40,15 @@ $(document).ready(function(){
};
// Toggle appearance of lists of error/warnings/notifications
headingBadges.click( function(){
$(this).parent().next('ul').slideToggle();
$(this).toggleClass('showing');
expandLink.click( function(){
$(this).parent().next('ul').slideToggle('slow', function(){});
if ($(this).parent().hasClass('showing')) {
$(this).html('+');
}
else {
$(this).html('-');
}
$(this).parent().toggleClass('showing');
});
// Back to top links
@@ -62,8 +68,8 @@ $(document).ready(function(){
e.preventDefault();
target = $(this).attr('href');
animateSection($(target), -25);
if (!$(target).next('ul').hasClass('showing')) {
$(target).children('.heading-badges').click();
if (!$(target).hasClass('showing')) {
$(target).children('[data-role="expander"]').click();
}
});

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

@@ -1,14 +1,20 @@
/* No javascript */
.no-javascript .graph-container {
display:none;
}
.no-javascript .hidden {
display:block !important;
visibility:visible !important;
}
.no-javascript table.hidden {
display:table !important;
}
.no-javascript .collapse {
display:block;
.no-javascript {
.graph-container, .expander {
display:none;
}
.hidden {
display:block !important;
visibility:visible !important;
}
table.hidden {
display:table !important;
}
.collapse {
display:block;
}
.heading {
margin-top:0;
border-radius: 3px 3px 0 0;
}
}

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

@@ -53,7 +53,7 @@
.task-header .h4 {
font-size:floor(@font-size-base * 1.1); // ~16px;
}
.label, .badge {
.badge {
font-size:floor(@font-size-base * 0.75); // ~11px;
padding:7px;
}

35
public/less/site.less
View File

@@ -146,21 +146,12 @@
.badge {
border-radius:0.25em;
}
.label, .badge {
.badge {
display:inline-block;
padding:10px;
font-size:ceil(@font-size-base * 0.85); // ~13px;
text-transform: uppercase;
}
.badge-danger {
background-color:@brand-danger;
}
.badge-warning {
background-color:@brand-warning;
}
.badge-info {
background-color:@brand-info;
}
.rule-name .badge {
padding:6px;
}
@@ -177,10 +168,9 @@
margin-bottom:30px;
border-width:3px;
border-style:solid;
border-radius: 3px;
li {
margin-bottom:30px;
margin-bottom:20px;
&:last-child {
margin-bottom:0;
@@ -208,10 +198,27 @@
/* Task list heading */
.heading {
margin-bottom:10px;
margin-top:12px;
padding:11px;
color: @btn-default-color;
font-weight:bold;
border-radius: 3px;
&.showing {
margin-bottom:0;
border-radius: 3px 3px 0 0;
}
&:first-child, &.first {
margin-top:0;
}
}
.heading-badges {
.expander {
cursor:pointer;
padding:0 5px;
font-weight:bold;
font-size:floor(@font-size-base * @line-height-base); // ~20px
line-height:1;
}
/* Graph */

47
view/task.html
View File

@@ -98,15 +98,12 @@
</div>
</div>
<div class="col-md-9">
{{#if results}}
<p class="heading showing" id="errors">
<span class="heading-badges">
<span class="label label-danger">Errors</span> <span class="badge badge-danger">?</span>
</span>
<a href="#top" data-role="top" class="pull-right default"> <span class="glyphicon glyphicon-arrow-up"></span></a>
</p>
<div class="heading label-danger showing first" id="errors">
Errors ( 13 )
<span data-role="expander" class="pull-right expander"> - </span>
</div>
<ul class="list-unstyled task-danger tasks-list collapse in">
{{#lastResult.messages}}
<li>
@@ -115,12 +112,36 @@
</li>
{{/lastResult.messages}}
</ul>
<p class="heading">
<span class="heading-badges">
<span class="label label-default">Ignored Rules</span>
</span>
<a href="#top" data-role="top" class="pull-right default"> <span class="glyphicon glyphicon-arrow-up"></span></a>
</p>
<div class="heading label-warning" id="warnings">
Warnings ( 142 )
<span data-role="expander" class="pull-right expander"> + </span>
</div>
<ul class="list-unstyled task-warning tasks-list collapse">
{{#lastResult.messages}}
<li>
<p class="crunch rule-name">{{type}} : {{code}} <span class="badge">{{count}}</span></p>
<p>{{message}}</p>
</li>
{{/lastResult.messages}}
</ul>
<div class="heading label-info" id="notifications">
Notifications ( 166 )
<span data-role="expander" class="pull-right expander"> + </span>
</div>
<ul class="list-unstyled task-info tasks-list collapse">
{{#lastResult.messages}}
<li>
<p class="crunch rule-name">{{type}} : {{code}} <span class="badge">{{count}}</span></p>
<p>{{message}}</p>
</li>
{{/lastResult.messages}}
</ul>
<div class="heading label-default">Ignored Rules
<span data-role="expander" class="pull-right expander"> + </span>
</div>
<ul class="list-unstyled task-default tasks-list collapse">
{{#task.ignore}}
<li>