mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-08 19:26:48 +00:00
935a0e9bdc
The top of a VM's page was one line of values between pipes, an icon for the guest agent and a hidden snapshot count, then a row of big action icons; the host links sat in a bar fixed to the bottom of the window, over the content. One card now holds it all (design chosen by the owner from four): - the name with the state badge, the title under it, and where the VM is: its host and the host's VM list for administrators, the VM list for owners; - OS details (with a connected guest agent) and Refresh; - the guest agent's state in words and the snapshot count; - CPU, memory, each disk with its device name and size, and the IPv4 addresses, labelled; - the page's sections as small labelled pills in the card's footer: one row from 992 px, wrapping below. The page has no other heading: base.html's heading area is a block it leaves out. Each section below it (Power, Access, Resize, Snapshot, Settings, Stats, Destroy) is a card of the same kind, so the page reads as one design (owner's choice of two): its sub-tabs as a small underlined nav in the card's header, its panes in the card's body without their own borders. Buttons are of normal size in the theme's primary colour, and those that cannot be undone (Power Cycle, Force Off, Destroy) in the danger colour. The Stats charts lose their coloured borders. instance_tabs.js finds the Settings tabs by their tablist role. The bottom bar and its setting (VIEW_INSTANCE_DETAIL_BOTTOM_BAR) are removed, and with it the CSS that kept the old Settings tabs on one line.
99 lines
4 KiB
HTML
99 lines
4 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 class="pb-5"{% block body_attrs %}{% endblock %}>
|
|
|
|
{% if request.user.is_authenticated %}
|
|
{% include 'navbar.html' %}
|
|
{% endif %}
|
|
|
|
<div role="main" class="container">
|
|
{% block page_header %}{# a page with a heading of its own leaves it out #}
|
|
<div>
|
|
<div>
|
|
<div class="float-end">
|
|
{% block page_heading_extra %}
|
|
{% endblock page_heading_extra %}
|
|
</div>
|
|
<h3 class="mb-3">
|
|
{% block page_heading %}
|
|
{% endblock page_heading %}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
{% endblock page_header %}
|
|
<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>
|
|
<!-- Table sorting -->
|
|
<script src="{% static 'js/tablesort.min.js' %}"></script>
|
|
<script src="{% static 'js/tablesort.number.min.js' %}"></script>
|
|
<script src="{% static 'js/sort_tables.js' %}"></script>
|
|
<script>
|
|
// After a refused submission, start at the error. The places an error
|
|
// can be, most specific first: a refused field, its form's summary, an
|
|
// open dialog's copy of the messages (the page's are behind it), the
|
|
// page's messages. A page that sets itself up first has
|
|
// data-error-focus="manual" and calls this when it is ready.
|
|
const ERROR_PLACES = [".is-invalid", ".form-errors", ".modal.show .modal-messages .alert-danger",
|
|
"#messages .alert-danger"];
|
|
|
|
function focusFirstError() {
|
|
for (const selector of ERROR_PLACES) {
|
|
const target = [...document.querySelectorAll(selector)].find(e => e.offsetParent !== null);
|
|
if (target) {
|
|
if (!target.matches("input, select, textarea")) target.tabIndex = -1;
|
|
target.focus();
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
window.focusFirstError = focusFirstError;
|
|
if (document.body.dataset.errorFocus !== "manual") focusFirstError();
|
|
</script>
|
|
{% block script %}{% endblock %}
|
|
</body>
|
|
</html>
|