mirror of
https://github.com/pa11y/pa11y-dashboard.git
synced 2025-09-24 14:21:13 +00:00
Make the date selector properly keyboard accessible
This commit is contained in:
Alex Kilgour
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
@@ -252,7 +252,7 @@
|
||||
word-wrap:break-word;
|
||||
}
|
||||
.h4 {
|
||||
margin-bottom:22px;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
}
|
||||
.date {
|
||||
@@ -347,18 +347,31 @@ ul.date-links {
|
||||
z-index:10;
|
||||
}
|
||||
.date-selector {
|
||||
margin-top:-125px;
|
||||
margin-bottom:5px;
|
||||
|
||||
.btn-group > .btn {
|
||||
float:none;
|
||||
.show-stats {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&.single-result {
|
||||
margin-top:-52px;
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.show-stats {
|
||||
display:none;
|
||||
}
|
||||
.dates-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.dates-list > li {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dates-list a {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -368,11 +381,11 @@ ul.date-links {
|
||||
width:100%;
|
||||
}
|
||||
.graph-spacer {
|
||||
margin-bottom:60px;
|
||||
padding-bottom:60px;
|
||||
margin-bottom:30px;
|
||||
padding-bottom:30px;
|
||||
}
|
||||
.graph-table {
|
||||
margin-bottom:50px;
|
||||
margin-bottom:0;
|
||||
|
||||
td {
|
||||
width:25%;
|
||||
|
||||
@@ -545,6 +545,7 @@
|
||||
// Wells
|
||||
// -------------------------
|
||||
@well-bg: #f5f5f5;
|
||||
@well-bg-drk: #2c3e50;
|
||||
|
||||
|
||||
// Badges
|
||||
|
||||
@@ -27,3 +27,11 @@
|
||||
padding: 9px;
|
||||
border-radius: @border-radius-small;
|
||||
}
|
||||
|
||||
// Dark well
|
||||
|
||||
.dark-well {
|
||||
background-color: @well-bg-drk;
|
||||
border-color: darken(@well-bg-drk, 7%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{{!
|
||||
{{!
|
||||
This file is part of pa11y-dashboard.
|
||||
|
||||
pa11y-dashboard is free software: you can redistribute it and/or modify
|
||||
@@ -18,7 +18,7 @@ along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
<div class="graph-container graph-spacer ruled">
|
||||
<div data-role="graph" class="graph"></div>
|
||||
<div class="row">
|
||||
<ul class="list-unstyled floated-list series-checkboxes clearfix crunch-bottom col-md-3 col-sm-6 col-xs-12" data-role="series-checkboxes"></ul>
|
||||
<ul class="list-unstyled floated-list series-checkboxes clearfix crunch-bottom col-md-3 col-sm-6 col-xs-12 pull-right" data-role="series-checkboxes"></ul>
|
||||
</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>
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
{{!
|
||||
This file is part of pa11y-dashboard.
|
||||
|
||||
pa11y-dashboard is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
pa11y-dashboard is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
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 zfix">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
|
||||
<div class="date-selector{{#if hasOneResult}} single-result{{/if}}">
|
||||
<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"}}</a></li>
|
||||
{{/results}}
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -17,7 +17,7 @@ along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
<div class="col-md-3 aside">
|
||||
<div class="row">
|
||||
<div id="top" class="col-md-12 col-sm-6 col-xs-12">
|
||||
<div 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}}<span class="stat-type">Errors</span></a></li>
|
||||
@@ -41,6 +41,25 @@ along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="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"></span> {{date-format task.lastResult.date format="DD MMM YYYY"}}
|
||||
</h2>
|
||||
<h3 class="h5 show-stats">Select a date to show stats for:</h3>
|
||||
<ul role="navigation" class="dates-list">
|
||||
{{#results}}
|
||||
<li><a class="" href="{{href}}">{{date-format date format="DD MMM YYYY"}}</a></li>
|
||||
{{/results}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-sm-12 clearfix">
|
||||
<div class="well">
|
||||
@@ -51,7 +70,7 @@ along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9" data-role="expandable-results">
|
||||
<div class="col-md-9" data-role="expandable-results" role="main">
|
||||
{{#if mainResult.count.error}}
|
||||
<div class="heading label-danger pointer showing first" id="errors" data-test="task-errors" data-role="expander" role="button" tabindex="0" aria-expanded="true" aria-controls="errors-list">
|
||||
<span class="pull-right expander"> - <span class="hide">(close panel)</span></span>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{{!
|
||||
{{!
|
||||
This file is part of pa11y-dashboard.
|
||||
|
||||
pa11y-dashboard is free software: you can redistribute it and/or modify
|
||||
@@ -76,8 +76,6 @@ along with pa11y-dashboard. If not, see <http://www.gnu.org/licenses/>.
|
||||
{{> graph}}
|
||||
{{/unless}}
|
||||
|
||||
{{> result-selector}}
|
||||
|
||||
{{/if}}
|
||||
|
||||
{{#if mainResult}}
|
||||
|
||||
Reference in New Issue
Block a user