Add a skip link for keyboard users

Someone might use it...
This commit is contained in:
2020-03-18 15:07:29 +00:00
parent e42989637e
commit 264b306b2f
7 changed files with 56 additions and 42 deletions

File diff suppressed because one or more lines are too long

View File

@@ -78,6 +78,22 @@ ins {
color: $gray-400 !important;
}
.skip-link {
background: $info;
color: $white;
outline: unset;
height: 30px;
left: 50%;
padding: 8px;
position: absolute;
transform: translateY(-100%);
transition: transform 0.3s;
}
.skip-link:focus {
transform: translateY(0%);
}
html.embedded {
display: flex;
flex-direction: column;

View File

@@ -92,8 +92,8 @@
.attr({type : 'text/css', rel : 'stylesheet'})
.attr('href', '{% static "css/bootstrap-datetimepicker.min.css" %}');
$.when(
$.getScript( "{% static "js/moment.min.js" %}" ),
$.getScript( "{% static "js/bootstrap-datetimepicker.min.js" %}" ),
$.getScript( "{% static "js/moment.js" %}" ),
$.getScript( "{% static "js/bootstrap-datetimepicker.js" %}" ),
$.Deferred(function( deferred ){
$( deferred.resolve );
})

View File

@@ -10,7 +10,7 @@
{% block js %}
<script src="{% static "js/tooltip.js" %}"></script>
<script src="{% static "js/popover.js" %}"></script>
<script src="{% static "js/moment.min.js" %}"></script>
<script src="{% static "js/moment.js" %}"></script>
<script>
$(function () {
$('[data-toggle="popover"]').popover().click(function(){
@@ -18,28 +18,12 @@
window.location.href = $(this).attr('href');
}
});
// This keeps timeago values correct, but uses an insane amount of resources
// $(function () {
// setInterval(function() {
// $('.date').each(function (index, dateElem) {
// var $dateElem = $(dateElem);
// var formatted = moment($dateElem.attr('data-date')).fromNow();
// $dateElem.text(formatted);
// })
// });
// }, 10000);
$('.date').each(function (index, dateElem) {
var $dateElem = $(dateElem);
var formatted = moment($dateElem.attr('data-date')).fromNow();
$dateElem.text(formatted);
});
})
</script>
{% endblock %}

View File

@@ -31,6 +31,7 @@
</head>
<body>
<a class="skip-link" href='#main'>Skip to content</a>
{% include "analytics.html" %}
{% block navbar %}
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark" role="navigation">
@@ -49,8 +50,7 @@
</div>
</nav>
{% endblock %}
<div class="container py-4">
<div class="container py-4" id="main">
{% block content-header %}
{% if error %}
<div class="error">{{ error }}</div>{% endif %}