1
0
Fork 0
mirror of https://github.com/retspen/webvirtcloud synced 2026-11-08 19:26:48 +00:00
webvirtcloud/console/templates/console-base.html
catborise faa6e4bb14 refactor(templates): Bootstrap utilities instead of the upstream rules that redid them
webvirtcloud.css still carried the upstream panel's rules for what
Bootstrap 5.3 has as utilities and components:
- the page's bottom space (body padding) is pb-5 on base.html's body,
  and the console page no longer has to undo it;
- the VM page's action tabs (.action-button, .action-block with a
  fixed 65px width) are text-center with a d-block icon; its tab panes
  (#power ... #undefine, one rule each) mt-3;
- the bordered sub-tab panes (.tab-pane-bordered, a fixed #eee border
  that dark themes could not change) border border-top-0 p-3;
- the search box and header buttons (.search, .btn-header) m-1 and
  mt-1; the SSH key select (.keyselect) a form-select;
- the boot order list (.multipleselect, fixed size, #c0c0c0 border) a
  list-group of form-check-input items; its unused .multipleselect-on
  goes;
- table cells centred by a global rule are align-middle on each table.
Two rules against Bootstrap's behaviour go: menus opened on hover on
wide screens (Bootstrap opens them on a click, and keyboard and touch
users had no hover), and "a { outline: 0 }", which hid the keyboard
focus ring.

The paragraph and page-header margins and the 900px container stay
for a separate change: they set every page's layout.
2026-10-27 19:05:48 +03:00

68 lines
No EOL
2.4 KiB
HTML

{% load static %}
{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="{% static "favicon.ico" %}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% if instance %}{{ instance.name }} - {% endif %}{% trans "Console" %}</title>
{# error pages render without app_settings: they get zephyr #}
{% with theme=app_settings.BOOTSTRAP_THEME|default:"zephyr" %}<link rel="stylesheet" href="{% static "css/themes/"|add:theme|add:".min.css" %}" id="wvc_css">{% endwith %}
<link href="{% static "css/webvirtcloud.css" %}" rel="stylesheet">
<style>
#main_container {
padding: 0;
width: 100%;
max-width: none;
height: 100dvh;
display: flex;
flex-direction: column;
background-color: #494949;
}
#main_container canvas {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
}
</style>
{% block head %}{% endblock %}
</head>
<body>
<div id="main_container">
<nav class="navbar navbar-expand-md navbar-dark bg-primary py-1" aria-label="{% trans "Console" %}">
<div class="container-fluid">
<span class="navbar-brand py-0">{{ instance.name }}</span>
{% block navbarstatus %}{% endblock %}
{% block navbar %}
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav me-auto">
{% block navbarmenu %}{% endblock %}
</ul>
{% block navbarend %}{% endblock %}
</div>
{% endblock %}
</div>
</nav>
{% block content %}{% endblock %}
</div>
<script src="{% static "js/jquery.js" %}"></script>
<script src="{% static "js/bootstrap.bundle.min.js" %}"></script>
{% block foot %}{% endblock %}
</body>
</html>