1
0
Fork 0
mirror of https://github.com/retspen/webvirtcloud synced 2026-11-11 04:36:48 +00:00

refactor(templates): Bootstrap's components instead of the panel's own CSS for capacity, steps and disclosures

The fork's own rules in webvirtcloud.css redid what Bootstrap 5.3 has:
- the capacity bars (.cap-*) are Bootstrap progress bars: the memory a
  .progress-stacked of running VMs' memory and shut-off VMs' (at half
  opacity), each segment a progressbar with its amount as its value
  text; the pool bars a thin .progress. The line where the host's
  memory ends goes: the share above the bar says it, red when over;
- the status dot (.compute-dot) is a rounded-circle, the big figures
  (.compute-ratio) fs-4, the Computes table's cell padding py-3;
- the steps of creating a VM (.create-steps) are a breadcrumb with "›"
  as its divider;
- the XML and Advanced disclosures (.disclosure with a turning chevron)
  are Bootstrap accordions;
- the chosen volumes and networks (.row-list) are list-unstyled, their
  names text-break;
- a chart's container is position-relative by utility; its height stays.
Dead rules go too: .netIN, .netOUT, .diskRD, .diskWR, .input-xs and
.bottom-bar-margin had no users.
This commit is contained in:
catborise 2026-10-27 16:50:47 +03:00
parent 2f5e3ccf62
commit c1e30aeb7f
11 changed files with 75 additions and 180 deletions

View file

@ -44,16 +44,16 @@
<button class="btn btn-primary" type="button" id="next" disabled>{% trans "Next" %}</button>
</div>
<section class="card mb-3" aria-labelledby="xml-heading">
<div class="card-body">
<h2 class="h5 card-title mb-0" id="xml-heading">
<button class="btn p-0 border-0 text-body fw-medium w-100 text-start focus-ring disclosure" type="button" data-bs-toggle="collapse" data-bs-target="#from-xml"
<section class="accordion mb-3" aria-labelledby="xml-heading">
<div class="accordion-item">
<h2 class="accordion-header" id="xml-heading">
<button class="accordion-button{% if not xml_error %} collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#from-xml"
aria-expanded="{% if xml_error %}true{% else %}false{% endif %}" aria-controls="from-xml">
{% bs_icon 'chevron-down' %} {% trans "Or define it from XML" %}
{% trans "Or define it from XML" %}
</button>
</h2>
<div class="collapse{% if xml_error %} show{% endif %}" id="from-xml">
<form method="post" class="pt-3" aria-label="{% trans "Create instance from XML" %}">{% csrf_token %}
<div class="accordion-collapse collapse{% if xml_error %} show{% endif %}" id="from-xml">
<form method="post" class="accordion-body" aria-label="{% trans "Create instance from XML" %}">{% csrf_token %}
{% if xml_error %}<div class="alert alert-danger form-errors" role="alert">{{ xml_error }}</div>{% endif %}
<input type="hidden" name="dom_xml" value="{{ xml }}">
<div class="xmlheight mb-3"><textarea id="editor" aria-label="{% trans "Domain XML" %}">{{ xml }}</textarea></div>