mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-08 19:26:48 +00:00
ca3b5c8d1c
After a refused submission the focus stayed on the page body: a keyboard or screen reader user had to find the error. base.html now focuses the first visible invalid field (the inline errors of the page forms), else the first error message at the top of the page (the modal forms, and pages whose host does not answer). The messages sit in a #messages container so the script finds only them.
83 lines
3 KiB
HTML
83 lines
3 KiB
HTML
{% load static %}
|
|
{% load django_bootstrap5 %}
|
|
{% load i18n %}
|
|
<!DOCTYPE html>
|
|
{% get_current_language as LANGUAGE_CODE %}<html lang="{{ LANGUAGE_CODE }}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="description" content="WebVirtCloud panel for manage virtual machine">
|
|
<meta name="author" content="anatoliy.guskov@gmail.com">
|
|
|
|
<title>{% block title %}{% endblock %}</title>
|
|
|
|
<!-- Bootstrap Core CSS -->
|
|
{# error pages render without app_settings: they get zephyr #}
|
|
{% with theme=app_settings.BOOTSTRAP_THEME|default:"zephyr" %}<link href="{% static "css/themes/"|add:theme|add:".min.css" %}" rel="stylesheet" id="wvc_css">{% endwith %}
|
|
|
|
<!-- WebVirtCloud CSS -->
|
|
<link href="{% static "css/webvirtcloud.css" %}" rel="stylesheet">
|
|
|
|
<!-- Aditional CSS -->
|
|
{% block style %}{% endblock %}
|
|
|
|
<!-- Custom Fonts -->
|
|
<link href="{% static "css/bootstrap-icons.min.css" %}" rel="stylesheet" type="text/css">
|
|
|
|
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
|
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
<link rel="shortcut icon" href="{% static 'favicon.ico' %}">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
{% if request.user.is_authenticated %}
|
|
{% include 'navbar.html' %}
|
|
{% endif %}
|
|
|
|
<div role="main" class="container">
|
|
<div>
|
|
<div>
|
|
<div class="float-end">
|
|
{% block page_heading_extra %}
|
|
{% endblock page_heading_extra %}
|
|
</div>
|
|
<h3 class="ms-0 page-header">
|
|
{% block page_heading %}
|
|
{% endblock page_heading %}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<div id="messages">{% bootstrap_messages %}</div>
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<!-- jQuery -->
|
|
<script src="{% static 'js/jquery.js' %}"></script>
|
|
<!-- Bootstrap Core JavaScript -->
|
|
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
|
|
<!-- JavaScript Cookie -->
|
|
<script src="{% static 'js/js.cookie.js' %}"></script>
|
|
<script>
|
|
// after a refused submission, start at the error: the first visible
|
|
// invalid field, else the error message
|
|
(function () {
|
|
const field = [...document.querySelectorAll(".is-invalid")].find(e => e.offsetParent !== null);
|
|
const target = field || document.querySelector("#messages .alert-danger");
|
|
if (target) {
|
|
if (!field) target.tabIndex = -1;
|
|
target.focus();
|
|
}
|
|
})();
|
|
</script>
|
|
{% block script %}{% endblock %}
|
|
</body>
|
|
</html>
|