j3d1/webvirtcloud
1
0
Fork 0
mirror of https://github.com/retspen/webvirtcloud synced 2026-11-11 12:46:49 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

20
instances/templates/create_steps.html
View file

@ -1,19 +1,23 @@
{% load i18n %}
{# The steps of creating a VM; step is the current one (1-3), a done step links back to it. #}
<nav aria-label="{% trans "Create a VM" %}">
<ol class="create-steps list-unstyled d-flex flex-wrap gap-2 small mb-3">
<nav aria-label="{% trans "Create a VM" %}" style="--bs-breadcrumb-divider: '›';">
<ol class="breadcrumb small mb-3">
{% if step == 1 %}
<li class="fw-semibold" aria-current="step">1. {% trans "Host" %}</li>
<li class="breadcrumb-item fw-semibold" aria-current="step">1. {% trans "Host" %}</li>
{% else %}
<li><a class="text-decoration-underline" href="{% url 'instances:index' %}">1. {% trans "Host" %}</a>: {{ compute.name }}</li>
<li class="breadcrumb-item"><a class="text-decoration-underline" href="{% url 'instances:index' %}">1. {% trans "Host" %}</a>: {{ compute.name }}</li>
{% endif %}
{% if step == 2 %}
<li class="fw-semibold" aria-current="step">2. {% trans "Machine" %}</li>
<li class="breadcrumb-item fw-semibold" aria-current="step">2. {% trans "Machine" %}</li>
{% elif step == 3 %}
<li><a class="text-decoration-underline" href="{% url 'instances:create_instance_select_type' compute.id %}">2. {% trans "Machine" %}</a>: {{ arch }}, {{ machine }}</li>
<li class="breadcrumb-item"><a class="text-decoration-underline" href="{% url 'instances:create_instance_select_type' compute.id %}">2. {% trans "Machine" %}</a>: {{ arch }}, {{ machine }}</li>
{% else %}
<li class="text-body-secondary">2. {% trans "Machine" %}</li>
<li class="breadcrumb-item text-body-secondary">2. {% trans "Machine" %}</li>
{% endif %}
{% if step == 3 %}
<li class="breadcrumb-item fw-semibold" aria-current="step">3. {% trans "Details" %}</li>
{% else %}
<li class="breadcrumb-item text-body-secondary">3. {% trans "Details" %}</li>
{% endif %}
<li{% if step == 3 %} class="fw-semibold" aria-current="step"{% else %} class="text-body-secondary"{% endif %}>3. {% trans "Details" %}</li>
</ol>
</nav>