mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-09 03:36:48 +00:00
e324e79fcb
Twenty tables had no .table-responsive wrapper, so on a phone the user list, compute list, VM lists, network and network filter pages scrolled sideways as a whole. Each table now scrolls inside its box, as the other ten already did. The page test walks the network page too, and checks that every table on every page has the wrapper. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
68 lines
4.3 KiB
HTML
68 lines
4.3 KiB
HTML
{% load i18n %}
|
|
{% load bootstrap_icons %}
|
|
<a href="#AddInstance" type="button" class="btn btn-success btn-header float-end" title="{% trans "New Instance" %}" data-bs-toggle="modal">
|
|
<span aria-hidden="true">{% bs_icon 'plus-circle-fill'%} </span>
|
|
</a>
|
|
|
|
<!-- Modal pool -->
|
|
<div class="modal fade" id="AddInstance" tabindex="-1" role="dialog" aria-labelledby="AddInstanceModal" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-scrollable modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{% trans "Choose a compute for new instance" %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form method="post" aria-label="Select compute for instance create form">{% csrf_token %}
|
|
<div class="row">
|
|
<div class="table-responsive">
|
|
<table class="table">
|
|
<thead>
|
|
<tr style="cursor:default;pointer-events:none">
|
|
<th>{% trans "Name" %}</th>
|
|
<th>{% trans "VCPU" %}
|
|
<th>{% trans "CPU Usage" %}</th>
|
|
<th>{% trans "Memory" %}</th>
|
|
<th>{% trans "Mem Usage" %}</th>
|
|
<th>{% trans "Action" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for compute in computes %}
|
|
{% if compute.status is True %}
|
|
<tr style="text-decoration: none">
|
|
<td>{{ compute.name }}</td>
|
|
<td>{{ compute.cpu_count }}</td>
|
|
<td class="cpu-usage" data-url="{% url 'compute_graph' compute.id %}">
|
|
<div class="progress">
|
|
<div class="progress-bar bg-primary" role="progressbar" aria-label="{% trans "Mem Usage" %}" style="width: 0%"
|
|
aria-valuemin="0" aria-valuemax="100" aria-label="{% trans "CPU Usage" %}">
|
|
</div>
|
|
</div>
|
|
<small class="cpu-usage-value"></small>
|
|
</td>
|
|
<td>{{ compute.ram_size|filesizeformat }}</td>
|
|
<td>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-primary" role="progressbar" aria-label="{% trans "Mem Usage" %}" style="width: {{ compute.ram_usage }}%"
|
|
aria-valuenow="{{ compute.ram_usage }}" aria-valuemin="0" aria-valuemax="100">{{ compute.ram_usage }}%
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="col-1">
|
|
<button class="btn btn-success btn-sm" type="button" onclick="goto_compute('{{ compute.id }}');">
|
|
{% trans "Choose" %}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div> <!-- /.modal-content -->
|
|
</div> <!-- /.modal-dialog -->
|
|
</div> <!-- /.modal -->
|