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; 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 { html.embedded {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

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

View File

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

View File

@@ -31,26 +31,26 @@
</head> </head>
<body> <body>
<a class="skip-link" href='#main'>Skip to content</a>
{% include "analytics.html" %} {% include "analytics.html" %}
{% block navbar %} {% block navbar %}
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark" role="navigation"> <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark" role="navigation">
<div class="container"> <div class="container">
{% block titleheader %} {% block titleheader %}
{% endblock %} {% endblock %}
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
{% block titleelements %} {% block titleelements %}
{% endblock %} {% endblock %}
</ul> </ul>
</div>
</div> </div>
</nav> </div>
</nav>
{% endblock %} {% endblock %}
<div class="container py-4" id="main">
<div class="container py-4">
{% block content-header %} {% block content-header %}
{% if error %} {% if error %}
<div class="error">{{ error }}</div>{% endif %} <div class="error">{{ error }}</div>{% endif %}