mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-09 19:56:48 +00:00
faa6e4bb14
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.
53 lines
3.6 KiB
HTML
53 lines
3.6 KiB
HTML
{% load i18n %}
|
|
{% load bootstrap_icons %}
|
|
<a href="#AddInstance" type="button" class="btn btn-success mt-1 float-end" title="{% trans "New Instance" %}" data-bs-toggle="modal">
|
|
<span aria-hidden="true">{% bs_icon 'plus-circle-fill'%} </span>
|
|
</a>
|
|
|
|
<div class="modal fade" id="AddInstance" tabindex="-1" aria-labelledby="AddInstanceTitle" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-scrollable modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title h5" id="AddInstanceTitle">{% trans "New instance" %}</h2>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans "Close" %}"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
{% include "create_steps.html" with step=1 %}
|
|
<div class="text-body-secondary mb-3">{% trans "Choose the host the VM runs on." %}</div>
|
|
<div class="list-group">
|
|
{% for compute in reachable_computes %}
|
|
<a class="list-group-item list-group-item-action py-3" href="{% url 'instances:create_instance_select_type' compute.id %}">
|
|
<div class="row g-2 align-items-center">
|
|
<div class="col-12 col-md-3 fw-semibold">{{ compute.name }}</div>
|
|
<div class="col-6 col-md-4">
|
|
<div class="small text-body-secondary">{% trans "CPU" %} · {{ compute.cpu_count }} vCPU</div>
|
|
<div class="cpu-usage d-flex align-items-center gap-2" data-url="{% url 'compute_graph' compute.id %}">
|
|
<div class="progress flex-grow-1" role="progressbar" aria-label="{% blocktrans with name=compute.name %}CPU usage of {{ name }}{% endblocktrans %}"
|
|
aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar" style="width: 0%"></div>
|
|
</div>
|
|
<small class="cpu-usage-value"></small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-4">
|
|
<div class="small text-body-secondary">{% trans "Memory" %} · {{ compute.ram_size|filesizeformat }}</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<div class="progress flex-grow-1" role="progressbar" aria-label="{% blocktrans with name=compute.name %}Memory usage of {{ name }}{% endblocktrans %}"
|
|
aria-valuenow="{{ compute.ram_usage }}" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar" style="width: {{ compute.ram_usage }}%"></div>
|
|
</div>
|
|
<small>{{ compute.ram_usage }}%</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-1 d-none d-md-block text-end" aria-hidden="true">{% bs_icon 'chevron-right' %}</div>
|
|
<div class="col-12 col-md-8 offset-md-3 small text-body-secondary compute-capacity" data-url="{% url 'compute_capacity' compute.id %}"></div>
|
|
</div>
|
|
</a>
|
|
{% empty %}
|
|
<p>{% trans "No compute is reachable." %}</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|