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

First draft of layout changes for results page on pa11y dashboard.

Browse Source
This commit is contained in:
Sangita Mane
2021-10-28 18:01:23 +02:00
parent 4c0bd924ab
commit bb0491858b
6 changed files with 77 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/site.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
public/js/site.js
View File

@@ -26,7 +26,7 @@ $(document).ready(function(){
var zoomResetButton = $('[data-role="zoom-reset"]'); var zoomResetButton = $('[data-role="zoom-reset"]');
var graphContainer = $('[data-role="graph"]'); var graphContainer = $('[data-role="graph"]');
var dateSelectDropdownMenu = $('[data-role="date-select-dropdown-menu"]'); var dateSelectDropdownMenu = $('[data-role="date-select-dropdown-menu"]');
var legend = graphContainer.parent('.graph-container').find('.dashedLegend'); var legend = graphContainer.parents('.graph-container').find('.dashedLegend');
var list = localStorage.getItem("listview") || ""; // get choice or nothing var list = localStorage.getItem("listview") || ""; // get choice or nothing

2
public/js/site.min.js vendored
View File

File diff suppressed because one or more lines are too long

14
public/less/site.less
View File

@@ -71,6 +71,14 @@
} }
} }
main section {
margin: 5em 0;
}
.results-download {
margin: 1.5em 0;
}
.supersize-me { .supersize-me {
text-align: center; text-align: center;
font-size: 112px; font-size: 112px;
@@ -585,9 +593,9 @@ ul.date-links {
} }
.dashedLegend { .dashedLegend {
position: absolute; position: relative;
top: 70px; top: 55px;
right: 40px; right: 20px;
font-size: smaller; font-size: smaller;
color: #545454; color: #545454;
background-color: #fff; background-color: #fff;

23
view/partial/graph.html
View File

@@ -14,11 +14,14 @@ GNU General Public License for more details.
You should have received a copy of the GNU General Public License You should have received a copy of the GNU General Public License
along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>. along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
}} }}
<div class="col-md-12 clearfix"> <section class="col-md-12 clearfix">
<div class="graph-container graph-spacer ruled clearfix"> <h2>Results Overview</h2>
<div class="col-md-12 graph-container graph-spacer ruled clearfix">
<div class="col-md-10">
<div class="row"> <div class="row">
<div class="col-md-3 col-sm-4 col-xs-3"> <div class="col-md-3 col-sm-4 col-xs-3">
<span class="btn btn-sm btn-default btn-full-width btn_action_export">Export graph</span> <button class="btn btn-sm btn-default btn-full-width btn_action_export">Export graph</button>
</div> </div>
<div class="col-md-5 col-sm-6 col-xs-9 pull-right"> <div class="col-md-5 col-sm-6 col-xs-9 pull-right">
@@ -26,7 +29,8 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
</div> </div>
</div> </div>
<div data-role="graph" class="graph"></div> <div data-role="graph" class="graph"></div>
<div class="dashedLegend"> </div>
<div class="col-md-2 dashedLegend">
<div class="dashedContainer"> <div class="dashedContainer">
<table> <table>
<tbody> <tbody>
@@ -60,12 +64,11 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
</div> </div>
<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> <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>
</div> </div>
</div>
<div class="col-md-12 hidden">
<div class="graph-spacer ruled"> <div class="ruled col-md-12">
<table id="graph-data" class="table graph-table" summary="Accessibility results from Pa11y for this page"> <table id="graph-data" class="table graph-table" summary="Accessibility results from Pa11y for this page">
<caption>Pa11y results for this URL</caption> <caption>Results for {{simplify-url task.url}}</caption>
<thead> <thead>
<tr> <tr>
<th>Date</th> <th>Date</th>
@@ -77,7 +80,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
<tbody> <tbody>
{{#results}} {{#results}}
<tr data-role="url-stats"> <tr data-role="url-stats">
<td data-value="{{date-timestamp date}}" data-role="date">{{date-format date format="DD MMM YYYY"}}</td> <td data-value="{{date-timestamp date}}" data-role="date"><a href="{{href}}">{{date-format date format="DD MMM YYYY"}}</a></td>
<td class="text-center" data-label="error">{{count.error}}</td> <td class="text-center" data-label="error">{{count.error}}</td>
<td class="text-center" data-label="warning">{{count.warning}}</td> <td class="text-center" data-label="warning">{{count.warning}}</td>
<td class="text-center" data-label="notice">{{count.notice}}</td> <td class="text-center" data-label="notice">{{count.notice}}</td>
@@ -86,4 +89,4 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </section>

54
view/partial/result.html
View File

@@ -15,56 +15,18 @@ You should have received a copy of the GNU General Public License
along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>. along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
}} }}
<div class="col-md-3 aside"> <section class="col-md-12">
<div class="row"> <h2 id="tabSectionHeading" class="crunch-top">Results for {{date-format task.lastResult.date format="DD MMM YYYY"}}</h2>
<div class="action-buttons col-md-12 col-sm-6"> <div class="results-download">
<div class="row"> <a href="{{mainResult.hrefCsv}}" class="btn btn-default" data-test="download-csv">
<div class="col-md-12 col-sm-6 col-xs-12">
<a href="{{mainResult.hrefCsv}}" class="btn-full-width btn btn-default" data-test="download-csv">
Download CSV <span class="glyphicon glyphicon-download" aria-hidden="true"></span> Download CSV <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
</a> </a>
</div> <a href="{{mainResult.hrefJson}}" class="btn btn-default" data-test="download-json">
<div class="col-md-12 col-sm-6 col-xs-12">
<a href="{{mainResult.hrefJson}}" class="btn-full-width btn btn-default" data-test="download-json">
Download JSON <span class="glyphicon glyphicon-download" aria-hidden="true"></span> Download JSON <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
</a> </a>
</div> </div>
</div>
</div>
</div>
<div class="row date-selector-row">
<div id="top" class="col-md-12 col-sm-12 clearfix">
<div class="well dark-well">
<div class="date-selector">
<div class="btn-group block-level clearfix">
<h2 class="h4">
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>&nbsp;&nbsp;{{date-format task.lastResult.date format="DD MMM YYYY"}}
</h2>
<h3 class="h5 show-stats" id="dates-navigation">Select a date to show stats for:</h3>
<nav aria-labelledby="dates-navigation">
<ul class="dates-list">
{{#results}}
<li><a class="" href="{{href}}">{{date-format date format="DD MMM YYYY"}}</a></li>
{{/results}}
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 clearfix">
<div class="well">
<h4 class="crunch-top">View results in browser</h4>
<p class="crunch-bottom">Pa11y uses HTML_CodeSniffer to find accessibility issues. <a href="http://squizlabs.github.io/HTML_CodeSniffer/">Use their bookmarklet</a> to view results on the page you are testing.</p>
</div>
</div>
</div>
</div>
<div class="col-md-9"> <ul id="top" class="nav nav-tabs category-list">
<ul class="nav nav-tabs category-list" role="tablist">
<li class="category-list__item category-list__item_type_error active" role="presentation"> <li class="category-list__item category-list__item_type_error active" role="presentation">
<a class="category-list__link" id="errors" href="#errors-list" aria-controls="errors-list" role="tab" data-toggle="tab" data-test="task-errors"> <a class="category-list__link" id="errors" href="#errors-list" aria-controls="errors-list" role="tab" data-toggle="tab" data-test="task-errors">
Errors ( {{mainResult.count.error}} ) Errors ( {{mainResult.count.error}} )
@@ -323,4 +285,8 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
{{/if}} {{/if}}
</div> </div>
</div> </div>
<div class="well">
<h3 class="crunch-top h3">View results in browser</h3>
<p class="crunch-bottom">Pa11y uses HTML_CodeSniffer to find accessibility issues. <a href="http://squizlabs.github.io/HTML_CodeSniffer/">Use their bookmarklet</a> to view results on the page you are testing.</p>
</div> </div>
</section>