mirror of
https://github.com/pa11y/pa11y-dashboard.git
synced 2025-09-25 14:51:28 +00:00
First draft of layout changes for results page on pa11y dashboard.
This commit is contained in:
Sangita Mane
2
public/css/site.min.css
vendored
2
public/css/site.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -26,7 +26,7 @@ $(document).ready(function(){
|
||||
var zoomResetButton = $('[data-role="zoom-reset"]');
|
||||
var graphContainer = $('[data-role="graph"]');
|
||||
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
|
||||
|
||||
|
||||
|
||||
2
public/js/site.min.js
vendored
2
public/js/site.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -71,6 +71,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
main section {
|
||||
margin: 5em 0;
|
||||
}
|
||||
|
||||
.results-download {
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
|
||||
.supersize-me {
|
||||
text-align: center;
|
||||
font-size: 112px;
|
||||
@@ -585,9 +593,9 @@ ul.date-links {
|
||||
}
|
||||
|
||||
.dashedLegend {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
right: 40px;
|
||||
position: relative;
|
||||
top: 55px;
|
||||
right: 20px;
|
||||
font-size: smaller;
|
||||
color: #545454;
|
||||
background-color: #fff;
|
||||
|
||||
@@ -14,58 +14,61 @@ GNU General Public License for more details.
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
}}
|
||||
<div class="col-md-12 clearfix">
|
||||
<div class="graph-container graph-spacer ruled clearfix">
|
||||
<div class="row">
|
||||
<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>
|
||||
</div>
|
||||
<section class="col-md-12 clearfix">
|
||||
<h2>Results Overview</h2>
|
||||
|
||||
<div class="col-md-5 col-sm-6 col-xs-9 pull-right">
|
||||
<ul class="list-unstyled floated-list series-checkboxes clearfix" data-role="series-checkboxes"></ul>
|
||||
<div class="col-md-12 graph-container graph-spacer ruled clearfix">
|
||||
<div class="col-md-10">
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-4 col-xs-3">
|
||||
<button class="btn btn-sm btn-default btn-full-width btn_action_export">Export graph</button>
|
||||
</div>
|
||||
|
||||
<div class="col-md-5 col-sm-6 col-xs-9 pull-right">
|
||||
<ul class="list-unstyled floated-list series-checkboxes clearfix" data-role="series-checkboxes"></ul>
|
||||
</div>
|
||||
</div>
|
||||
<div data-role="graph" class="graph"></div>
|
||||
</div>
|
||||
<div data-role="graph" class="graph"></div>
|
||||
<div class="dashedLegend">
|
||||
<div class="col-md-2 dashedLegend">
|
||||
<div class="dashedContainer">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="legendColorBox">
|
||||
<div class="clearfix legendIcon legendErrors">
|
||||
<div></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="legendLabel">Errors</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="legendColorBox">
|
||||
<div class="clearfix legendIcon legendWarnings">
|
||||
<div></div><div></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="legendLabel">Warnings</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="legendColorBox">
|
||||
<div class="clearfix legendIcon legendNotices">
|
||||
<div></div><div></div><div></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="legendLabel">Notices</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="legendColorBox">
|
||||
<div class="clearfix legendIcon legendErrors">
|
||||
<div></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="legendLabel">Errors</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="legendColorBox">
|
||||
<div class="clearfix legendIcon legendWarnings">
|
||||
<div></div><div></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="legendLabel">Warnings</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="legendColorBox">
|
||||
<div class="clearfix legendIcon legendNotices">
|
||||
<div></div><div></div><div></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="legendLabel">Notices</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
</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">
|
||||
<caption>Pa11y results for this URL</caption>
|
||||
<caption>Results for {{simplify-url task.url}}</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
@@ -77,7 +80,7 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
<tbody>
|
||||
{{#results}}
|
||||
<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="warning">{{count.warning}}</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>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -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/>.
|
||||
}}
|
||||
|
||||
<div class="col-md-3 aside">
|
||||
<div class="row">
|
||||
<div class="action-buttons col-md-12 col-sm-6">
|
||||
<div class="row">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="col-md-12">
|
||||
<h2 id="tabSectionHeading" class="crunch-top">Results for {{date-format task.lastResult.date format="DD MMM YYYY"}}</h2>
|
||||
<div class="results-download">
|
||||
<a href="{{mainResult.hrefCsv}}" class="btn btn-default" data-test="download-csv">
|
||||
Download CSV <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
|
||||
</a>
|
||||
<a href="{{mainResult.hrefJson}}" class="btn btn-default" data-test="download-json">
|
||||
Download JSON <span class="glyphicon glyphicon-download" aria-hidden="true"></span>
|
||||
</a>
|
||||
</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> {{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 class="nav nav-tabs category-list" role="tablist">
|
||||
<ul id="top" class="nav nav-tabs category-list">
|
||||
<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">
|
||||
Errors ( {{mainResult.count.error}} )
|
||||
@@ -323,4 +285,8 @@ along with Pa11y Dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
{{/if}}
|
||||
</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>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user