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

refactor(templates): Bootstrap utilities instead of the upstream rules that redid them

Browse source 
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.
This commit is contained in:
catborise 2026-10-27 17:09:52 +03:00
parent c1e30aeb7f
commit faa6e4bb14
32 changed files with 95 additions and 195 deletions
Download patch file Download diff file Expand all files Collapse all files

4
accounts/templates/account.html
View file

@ -44,7 +44,7 @@
<div class="tab-content">
<div class="tab-pane active" id="instances">
<div class="table-responsive">
<table class="table table-striped table-hover">
<table class="table table-striped table-hover align-middle">
<thead>
<tr>
<th scope="col">#</th>
@ -83,7 +83,7 @@
</div>
<div class="tab-pane fade" id="public-keys">
<div class="table-responsive">
<table class="table table-striped table-hover">
<table class="table table-striped table-hover align-middle">
<thead>
<tr>
<th scope="col">{% trans "Key name" %}</th>

2
accounts/templates/api_token_table.html
View file

@ -2,7 +2,7 @@
{% load bootstrap_icons %}
{# the tokens of the signed-in user, or of owner on a superuser's view of a user #}
<div class="table-responsive">
<table class="table table-hover">
<table class="table table-hover align-middle">
<thead>
<tr>
<th scope="col">{% trans "Name" %}</th>

8
accounts/templates/profile.html
View file

@ -27,7 +27,7 @@
</li>
</ul>
<div class="tab-content">
<div class="tab-pane tab-pane-bordered active" id="editprofile">
<div class="tab-pane border border-top-0 p-3 active" id="editprofile">
<div class="card">
<div class="card-body">
<form method="post" action="" role="form" aria-label="Edit user info form">
@ -48,11 +48,11 @@
</div>
</div>
</div>
<div class="tab-pane tab-pane-bordered fade" id="sshkeys">
<div class="tab-pane border border-top-0 p-3 fade" id="sshkeys">
{% if publickeys %}
<div class="col-lg-12">
<div class="table-responsive">
<table class="table table-hover">
<table class="table table-hover align-middle">
<tbody class="text-center">
{% for key in publickeys %}
<tr>
@ -86,7 +86,7 @@
</div>
</div>
</div>
<div class="tab-pane tab-pane-bordered fade" id="apitokens">
<div class="tab-pane border border-top-0 p-3 fade" id="apitokens">
<p class="text-body-secondary">{% blocktrans %}A token lets a script or a tool use the REST API as you, without your password or OTP: send it as <code>Authorization: Token &lt;token&gt;</code>. A password change does not delete tokens: delete a token you no longer use, or one that may have leaked.{% endblocktrans %}</p>
{% if api_tokens %}
{% include "api_token_table.html" %}

4
admin/templates/admin/group_list.html
View file

@ -6,7 +6,7 @@
{% block content %}
<div class="row">
<div class="col-lg-12">
<a href="{% url 'admin:group_create' %}" class="btn btn-success btn-header float-end" title="{% trans "Create Group" %}">
<a href="{% url 'admin:group_create' %}" class="btn btn-success mt-1 float-end" title="{% trans "Create Group" %}">
{% bs_icon 'plus-circle-fill' %}
</a>
{% include 'search_block.html' %}
@ -23,7 +23,7 @@
{% else %}
<div class="col-lg-12">
<div class="table-responsive">
<table class="table table-striped table-hover">
<table class="table table-striped table-hover align-middle">
<thead>
<tr>
<th scope="col">{% trans "Group Name" %}</th>

2
admin/templates/admin/logs.html
View file

@ -32,7 +32,7 @@
</div>
{% else %}
<div class="table-responsive">
<table class="table table-hover">
<table class="table table-hover align-middle">
<thead>
<tr>
<th scope="col">#</th>

2
admin/templates/admin/tombstone_list.html
View file

@ -21,7 +21,7 @@
{% else %}
<div class="col-lg-12">
<div class="table-responsive">
<table class="table table-striped table-hover">
<table class="table table-striped table-hover align-middle">
<thead>
<tr>
<th scope="col">{% trans "Name" %}</th>

4
admin/templates/admin/user_list.html
View file

@ -9,7 +9,7 @@
{% block page_heading %}{{ title }}{% endblock page_heading %}
{% block page_heading_extra %}
<a href="{% url 'admin:user_create' %}" class="btn btn-success btn-header float-end" title="{% trans "Create User" %}">
<a href="{% url 'admin:user_create' %}" class="btn btn-success mt-1 float-end" title="{% trans "Create User" %}">
{% bs_icon 'plus-circle-fill' %}
</a>
{% include 'search_block.html' %}
@ -26,7 +26,7 @@
{% else %}
<div class="col-lg-12">
<div class="table-responsive">
<table class="table table-striped table-hover">
<table class="table table-striped table-hover align-middle">
<thead>
<tr>
<th scope="col">{% trans "Username" %}</th>

4
computes/templates/computes/instances.html
View file

@ -8,7 +8,7 @@
{% block page_heading_extra %}
<a href="{% url 'instances:create_instance_select_type' compute.id %}"
class="btn btn-success btn-header float-end" title="{% trans "New Instance" %}">
class="btn btn-success mt-1 float-end" title="{% trans "New Instance" %}">
{% bs_icon 'plus-circle-fill' %}
</a>
{% if instances %}
@ -39,7 +39,7 @@
{% endif %}
{% else %}
<div class="table-responsive">
<table class="table table-hover" data-sortable>
<table class="table table-hover align-middle" data-sortable>
<thead>
<tr>
<th scope="col">{% trans 'Name' %}<br>{% trans 'Description' %}</th>

4
console/templates/console-base.html
View file

@ -13,10 +13,6 @@
<link href="{% static "css/webvirtcloud.css" %}" rel="stylesheet">
<style>
body {
padding-bottom: 0;
}
#main_container {
padding: 0;
width: 100%;

4
instances/templates/allinstances.html
View file

@ -9,7 +9,7 @@
{% include 'create_inst_block.html' %}
{% endif %}
{# the list's filters (state, text) and the address search, as one control #}
<div class="float-end search">
<div class="float-end m-1">
<div class="input-group">
<select id="state-filter" class="form-select flex-grow-0 w-auto" aria-label="{% trans 'State' %}">
<option value="">{% trans 'All states' %}</option>
@ -74,7 +74,7 @@
</form>
<div class="alert alert-danger d-none" role="alert" id="find-address-error"></div>
<div class="table-responsive">
<table class="table table-sm d-none" id="find-address-results">
<table class="table table-sm d-none align-middle" id="find-address-results">
<thead>
<tr>
<th scope="col">{% trans "Address" %}</th>

2
instances/templates/allinstances_index_grouped.html
View file

@ -1,7 +1,7 @@
{% load i18n %}
{% load bootstrap_icons %}
<div class="table-responsive">
<table class="table table-hover" data-sortable>
<table class="table table-hover align-middle" data-sortable>
<thead>
<tr>
<th scope="col" data-sort-method="none"><a class="link-primary" href="#" id="hide-all-instances" onclick="hide_all_host_instances()">#</a></th>

2
instances/templates/allinstances_index_nongrouped.html
View file

@ -1,6 +1,6 @@
{% load i18n %}
<div class="table-responsive">
<table class="table table-hover" data-sortable>
<table class="table table-hover align-middle" data-sortable>
<thead>
<tr>
<th scope="col">{% trans 'Name' %}<br>{% trans 'Description' %}</th>

2
instances/templates/create_inst_block.html
View file

@ -1,6 +1,6 @@
{% 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">
<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>

28
instances/templates/instance.html
View file

@ -70,48 +70,48 @@
<!-- Nav tabs -->
<ul class="nav nav-pills nav-fill" id="navbtn" role="tablist" aria-label="Instance actions">
<li class="nav-item" role="presentation">
<button class="nav-link action-button active" id="power-tab" aria-controls="power" data-bs-toggle="pill" data-bs-target="#power" type="button" role="tab" aria-selected="true">
<span class="action-block" aria-hidden="true">{% bs_icon 'power' size='2em'%} </span>
<button class="nav-link text-center active" id="power-tab" aria-controls="power" data-bs-toggle="pill" data-bs-target="#power" type="button" role="tab" aria-selected="true">
<span class="d-block py-2" aria-hidden="true">{% bs_icon 'power' size='2em'%} </span>
{% trans "Power" %}
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link action-button" id="access-tab" aria-controls="access" data-bs-toggle="pill" data-bs-target="#access" type="button" role="tab" aria-selected="false">
<span class="action-block" aria-hidden="true">{% bs_icon 'lock' size='2em'%} </span>
<button class="nav-link text-center" id="access-tab" aria-controls="access" data-bs-toggle="pill" data-bs-target="#access" type="button" role="tab" aria-selected="false">
<span class="d-block py-2" aria-hidden="true">{% bs_icon 'lock' size='2em'%} </span>
{% trans "Access" %}
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link action-button" id="resize-tab" aria-controls="resize" data-bs-toggle="pill" data-bs-target="#resize" type="button" role="tab" aria-selected="false">
<span class="action-block" aria-hidden="true">{% bs_icon 'arrows-angle-expand' size='2em'%} </span>
<button class="nav-link text-center" id="resize-tab" aria-controls="resize" data-bs-toggle="pill" data-bs-target="#resize" type="button" role="tab" aria-selected="false">
<span class="d-block py-2" aria-hidden="true">{% bs_icon 'arrows-angle-expand' size='2em'%} </span>
{% trans "Resize" %}
</button>
</li>
{% if can_snapshot %}
<li class="nav-item" role="presentation">
<button class="nav-link action-button" id="snapshots-tab" aria-controls="snapshots" data-bs-toggle="pill" data-bs-target="#snapshots" type="button" role="tab" aria-selected="false">
<span class="action-block" aria-hidden="true">{% bs_icon 'camera' size='2em'%} </span>
<button class="nav-link text-center" id="snapshots-tab" aria-controls="snapshots" data-bs-toggle="pill" data-bs-target="#snapshots" type="button" role="tab" aria-selected="false">
<span class="d-block py-2" aria-hidden="true">{% bs_icon 'camera' size='2em'%} </span>
{% trans "Snapshot" %}
</button>
</li>
{% endif %}
{% if show_settings %}
<li class="nav-item" role="presentation">
<button class="nav-link action-button" id="settings-tab" aria-controls="settings" data-bs-toggle="pill" data-bs-target="#settings" type="button" role="tab" aria-selected="false">
<span class="action-block" aria-hidden="true">{% bs_icon 'gear-wide-connected' size='2em'%} </span>
<button class="nav-link text-center" id="settings-tab" aria-controls="settings" data-bs-toggle="pill" data-bs-target="#settings" type="button" role="tab" aria-selected="false">
<span class="d-block py-2" aria-hidden="true">{% bs_icon 'gear-wide-connected' size='2em'%} </span>
{% trans "Settings" %}
</button>
</li>
{% endif %}
<li class="nav-item" role="presentation">
<button class="nav-link action-button" id="graphics-tab" aria-controls="graphics" data-bs-toggle="pill" data-bs-target="#graphics" type="button" role="tab" aria-selected="false">
<span class="action-block" aria-hidden="true">{% bs_icon 'bar-chart-line' size='2em'%} </span>
<button class="nav-link text-center" id="graphics-tab" aria-controls="graphics" data-bs-toggle="pill" data-bs-target="#graphics" type="button" role="tab" aria-selected="false">
<span class="d-block py-2" aria-hidden="true">{% bs_icon 'bar-chart-line' size='2em'%} </span>
{% trans "Stats" %}
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link action-button" id="undefine-tab" aria-controls="undefine" data-bs-toggle="pill" data-bs-target="#undefine" type="button" role="tab" aria-selected="false">
<span class="action-block" aria-hidden="true">{% bs_icon 'trash' size='2em'%} </span>
<button class="nav-link text-center" id="undefine-tab" aria-controls="undefine" data-bs-toggle="pill" data-bs-target="#undefine" type="button" role="tab" aria-selected="false">
<span class="d-block py-2" aria-hidden="true">{% bs_icon 'trash' size='2em'%} </span>
{% trans "Destroy" %}
</button>
</li>

12
instances/templates/instances/access_tab.html
View file

@ -1,5 +1,5 @@
{% load i18n %}
<div class="tab-pane" id="access" role="tabpanel" aria-label="Instance access options">
<div class="tab-pane mt-3" id="access" role="tabpanel" aria-label="Instance access options">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
@ -31,7 +31,7 @@
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane tab-pane-bordered active" id="vnconsole">
<div role="tabpanel" class="tab-pane border border-top-0 p-3 active" id="vnconsole">
<p>{% blocktrans with type=instance.console_type|upper %} This action opens a new window with a {{ type }} connection to the console of the instance.{% endblocktrans %}
</p>
{% if not can_open_console %}
@ -49,7 +49,7 @@
<div class="clearfix"></div>
</div>
{% if app_settings.SHOW_ACCESS_ROOT_PASSWORD == 'True' and can_change %}
<div role="tabpanel" class="tab-pane tab-pane-bordered" id="rootpasswd">
<div role="tabpanel" class="tab-pane border border-top-0 p-3" id="rootpasswd">
<p>{% trans "Shut the VM down, or run it with its QEMU guest agent, and enter a new root password." %}</p>
<form action="{% url 'instances:rootpasswd' instance.id %}" method="post"
role="form" aria-label="Add root password to instance form">
@ -72,14 +72,14 @@
</div>
{% endif %}
{% if app_settings.SHOW_ACCESS_SSH_KEYS == 'True' and can_change %}
<div role="tabpanel" class="tab-pane tab-pane-bordered" id="sshkeys">
<div role="tabpanel" class="tab-pane border border-top-0 p-3" id="sshkeys">
<p>{% trans "Shut the VM down, or run it with its QEMU guest agent, and choose your public key. The key is added to root's keys." %}</p>
<form action="{% url 'instances:add_public_key' instance.id %}"method="post"
role="form" aria-label="Add public key to instance form">
{% csrf_token %}
<div class="row">
<div class="col-sm-12">
<select name="sshkeyid" class="form-control-lg keyselect">
<select name="sshkeyid" class="form-select form-select-lg">
{% if publickeys %}
{% for key in publickeys %}
<option value="{{ key.id }}">{{ key.keyname }}</option>
@ -101,7 +101,7 @@
</div>
{% endif %}
{% if instance.status == 1 and can_open_console %}
<div role="tabpanel" class="tab-pane tab-pane-bordered" id="vdiconsole">
<div role="tabpanel" class="tab-pane border border-top-0 p-3" id="vdiconsole">
<p>{% trans "This action opens a remote viewer with a connection to the console of the instance." %}</p>
<div class="input-group">
<input type="text" class="input-lg disabled form-control" disabled id="vdi_url_input" />

4
instances/templates/instances/destroy_tab.html
View file

@ -1,5 +1,5 @@
{% load i18n %}
<div class="tab-pane" id="undefine" role="tabpanel">
<div class="tab-pane mt-3" id="undefine" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" aria-label="Instance destroy menu">
<li class="nav-item">
@ -10,7 +10,7 @@
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane tab-pane-bordered active" id="destroy">
<div role="tabpanel" class="tab-pane border border-top-0 p-3 active" id="destroy">
<p>{% trans 'This action starts remove instance process' %}</p>
{% if can_delete %}
<a href="{% url 'instances:destroy' instance.id %}" class="btn btn-lg btn-success float-end">{% trans "Destroy" %}</a>

2
instances/templates/instances/info_tab.html
View file

@ -1,5 +1,5 @@
{% load i18n %}
<div class="tab-pane tab-pane-bordered" id="osinfo" role="tabpanel">
<div class="tab-pane border border-top-0 p-3" id="osinfo" role="tabpanel">
<h3 class="page-header">{% trans "Guest Info" %}</h3>
<div id="osinfo-error" class="alert alert-warning d-none" role="alert"></div>
<dl class="mx-3 row">

20
instances/templates/instances/power_tab.html
View file

@ -1,5 +1,5 @@
{% load i18n %}
<div class="tab-pane active" id="power" role="tabpanel">
<div class="tab-pane active mt-3" id="power" role="tabpanel">
{% if not can_power %}
<p>{% trans "Only the owners of this instance and administrators can change its power state." %}</p>
{% else %}
@ -61,7 +61,7 @@
<!-- Tab panes -->
<div class="tab-content">
{% if instance.status == 1 or instance.status == 2 %}
<div class="tab-pane tab-pane-bordered active" id="poweroff" role="tabpanel" aria-labelledby="poweroff-tab">
<div class="tab-pane border border-top-0 p-3 active" id="poweroff" role="tabpanel" aria-labelledby="poweroff-tab">
<p>{% trans "This action sends an ACPI shutdown signal to the instance." %}</p>
<form action="{% url 'instances:poweroff' instance.id %}" method="post" role="form" aria-label="Power off instance form">
{% csrf_token %}
@ -69,14 +69,14 @@
<div class="clearfix"></div>
</form>
</div>
<div class="tab-pane tab-pane-bordered" id="powercycle" role="tabpanel" aria-labelledby="powercycle-tab">
<div class="tab-pane border border-top-0 p-3" id="powercycle" role="tabpanel" aria-labelledby="powercycle-tab">
<p>{% trans "This action forcibly powers off and start the instance and may cause data corruption." %}</p>
<form action="{% url 'instances:powercycle' instance.id %}" method="post" role="form" aria-label="Power cycle instance form">{% csrf_token %}
<input type="submit" name="powercycle" class="btn btn-lg btn-success float-end" value="{% trans "Power Cycle" %}">
<div class="clearfix"></div>
</form>
</div>
<div class="tab-pane tab-pane-bordered" id="powerforce" role="tabpanel" aria-labelledby="powerforce-tab">
<div class="tab-pane border border-top-0 p-3" id="powerforce" role="tabpanel" aria-labelledby="powerforce-tab">
<p>{% trans "This action forcibly powers off the instance and may cause data corruption." %}</p>
<form action="{% url 'instances:force_off' instance.id %}" method="post" role="form" aria-label="Force to shutdown instance form">
{% csrf_token %}
@ -85,7 +85,7 @@
</form>
</div>
{% if request.user.is_superuser %}
<div class="tab-pane tab-pane-bordered" id="suspend" role="tabpanel" aria-labelledby="suspend-tab">
<div class="tab-pane border border-top-0 p-3" id="suspend" role="tabpanel" aria-labelledby="suspend-tab">
<p>{% trans "This action suspends the instance." %}</p>
<form action="{% url 'instances:suspend' instance.id %}" method="post" role="form" aria-label="Suspend instance form">{% csrf_token %}
<input type="submit" name="suspend" class="btn btn-lg btn-success float-end" value="{% trans "Suspend" %}">
@ -96,14 +96,14 @@
{% endif %}
{% if instance.status == 3 %}
{% if request.user.is_superuser %}
<div class="tab-pane tab-pane-bordered active" id="resume" role="tabpanel" aria-labelledby="resume-tab">
<div class="tab-pane border border-top-0 p-3 active" id="resume" role="tabpanel" aria-labelledby="resume-tab">
<p>{% trans "This action restore the instance after suspend." %}</p>
<form action="{% url 'instances:resume' instance.id %}" method="post" role="form" aria-label="Resume instance from suspension form">{% csrf_token %}
<input type="submit" name="resume" class="btn btn-lg btn-success float-end" value="{% trans "Resume" %}">
<div class="clearfix"></div>
</form>
</div>
<div class="tab-pane tab-pane-bordered" id="powerforce" role="tabpanel" aria-labelledby="powerforce-tab">
<div class="tab-pane border border-top-0 p-3" id="powerforce" role="tabpanel" aria-labelledby="powerforce-tab">
<p>{% trans "This action forcibly powers off the instance and may cause data corruption." %}</p>
<form action="{% url 'instances:force_off' instance.id %}" method="post" role="form" aria-label="Force to shutdown form">{% csrf_token %}
<input type="submit" name="powerforce" class="btn btn-lg btn-success float-end" value="{% trans "Force Off" %}">
@ -111,7 +111,7 @@
</form>
</div>
{% else %}
<div class="tab-pane tab-pane-bordered active" id="resume" role="tabpanel" aria-labelledby="resume-tab">
<div class="tab-pane border border-top-0 p-3 active" id="resume" role="tabpanel" aria-labelledby="resume-tab">
<p>{% trans "Administrator blocked your instance." %}</p>
<form action="{% url 'instances:resume' instance.id %}" method="post" role="form" aria-label="Resume instance form">{% csrf_token %}
<button class="btn btn-lg btn-success disabled float-end">{% trans "Resume" %}</button>
@ -122,7 +122,7 @@
{% endif %}
{% if instance.status == 4 or instance.status == 6 or instance.status == 7 %}
{# shutting down, crashed or suspended by the guest: a forced power off ends it, then it can be started #}
<div class="tab-pane tab-pane-bordered active" id="powerforce" role="tabpanel" aria-labelledby="powerforce-tab">
<div class="tab-pane border border-top-0 p-3 active" id="powerforce" role="tabpanel" aria-labelledby="powerforce-tab">
<p>{% trans "This action forcibly powers off the instance and may cause data corruption." %}</p>
<form action="{% url 'instances:force_off' instance.id %}" method="post" role="form" aria-label="Force to shutdown instance form">
{% csrf_token %}
@ -132,7 +132,7 @@
</div>
{% endif %}
{% if instance.status == 5 %}
<div class="tab-pane tab-pane-bordered active" id="boot" role="tabpanel" aria-labelledby="boot-tab">
<div class="tab-pane border border-top-0 p-3 active" id="boot" role="tabpanel" aria-labelledby="boot-tab">
<p>{% trans "Click on Power On button to start this instance." %}</p>
<form action="{% url 'instances:poweron' instance.id %}" method="post" role="form" aria-label="Start instance form">
{% csrf_token %}

8
instances/templates/instances/resize_tab.html
View file

@ -1,5 +1,5 @@
{% load i18n %}
<div class="tab-pane" id="resize" role="tabpanel">
<div class="tab-pane mt-3" id="resize" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" aria-label="Instance resize options">
<li class="nav-item" role="presentation">
@ -20,7 +20,7 @@
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane tab-pane-bordered active" id="resizevm_cpu">
<div role="tabpanel" class="tab-pane border border-top-0 p-3 active" id="resizevm_cpu">
{% if can_change %}
{% if instance.status == 5 or not instance.vcpus %}
<form action="{% url 'instances:resizevm_cpu' instance.id %}" method="post" role="form" aria-label="Resize instance cpu form">{% csrf_token %}
@ -82,7 +82,7 @@
{% endif %}
<div class="clearfix"></div>
</div>
<div role="tabpanel" class="tab-pane tab-pane-bordered" id="resizevm_mem">
<div role="tabpanel" class="tab-pane border border-top-0 p-3" id="resizevm_mem">
{% if can_change %}
<form action="{% url 'instances:resize_memory' instance.id %}" method="post" role="form" aria-label="Resize instance memory form">
{% csrf_token %}
@ -128,7 +128,7 @@
{% endif %}
<div class="clearfix"></div>
</div>
<div role="tabpanel" class="tab-pane tab-pane-bordered" id="resizevm_disk">
<div role="tabpanel" class="tab-pane border border-top-0 p-3" id="resizevm_disk">
{% if can_change %}
<form action="{% url 'instances:resize_disk' instance.id %}" method="post" role="form" aria-label="Resize instance disk form">
{% csrf_token %}

36
instances/templates/instances/settings_tab.html
View file

@ -2,7 +2,7 @@
{% load django_bootstrap5 %}
{% load bootstrap_icons %}
{% load operations %}
<div class="tab-pane" id="settings" role="tabpanel">
<div class="tab-pane mt-3" id="settings" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" aria-label="Instance settings">
{% if instance.guest_agent_ready %}
@ -81,7 +81,7 @@
{% include 'instances/info_tab.html' %}
{% endif %}
{% if request.user.is_superuser %}
<div role="tabpanel" class="tab-pane tab-pane-bordered active" id="boot_opt">
<div role="tabpanel" class="tab-pane border border-top-0 p-3 active" id="boot_opt">
<p class="fw-bold">{% trans 'Autostart' %}</p>
<div class="row">
<div class="col-sm-12 text-center">
@ -130,15 +130,15 @@
<form action="{% url 'instances:set_bootorder' instance.id %}" method="post" role="form" aria-label="Boot order edit form">{% csrf_token %}
<input id="bootorder" name="bootorder" hidden>
<div class="d-flex justify-content-center">
<div id="b_order" class="multipleselect border-0">
<div id="b_order" class="list-group me-3">
{% for disk in instance.config_disks %}
<label><input type="checkbox" name="disk:{{ disk.dev }}" value="disk:{{ disk.dev }}" onclick="set_orderlist($('#bootorder'))" />{{ disk.dev }} - {{ disk.image }}</label>
<label class="list-group-item"><input class="form-check-input me-2" type="checkbox" name="disk:{{ disk.dev }}" value="disk:{{ disk.dev }}" onclick="set_orderlist($('#bootorder'))">{{ disk.dev }} - {{ disk.image }}</label>
{% endfor %}
{% for cd in instance.config_media %}
<label><input type="checkbox" name="cdrom:{{ cd.dev }}" value="cdrom:{{ cd.dev }}" onclick="set_orderlist($('#bootorder'))"/>{{ cd.dev }} - {{ cd.image }}</label>
<label class="list-group-item"><input class="form-check-input me-2" type="checkbox" name="cdrom:{{ cd.dev }}" value="cdrom:{{ cd.dev }}" onclick="set_orderlist($('#bootorder'))">{{ cd.dev }} - {{ cd.image }}</label>
{% endfor %}
{% for net in instance.config_networks %}
<label><input type="checkbox" name="network:{{ net.mac }}" value="network:{{ net.mac }}" onclick="set_orderlist($('#bootorder'))"/>NIC - {{ net.mac|slice:"9:" }}</label>
<label class="list-group-item"><input class="form-check-input me-2" type="checkbox" name="network:{{ net.mac }}" value="network:{{ net.mac }}" onclick="set_orderlist($('#bootorder'))">NIC - {{ net.mac|slice:"9:" }}</label>
{% endfor %}
</div>
<div>
@ -159,7 +159,7 @@
{% endif %}
<div class="clearfix"></div>
</div>
<div role="tabpanel" class="tab-pane tab-pane-bordered" id="disks">
<div role="tabpanel" class="tab-pane border border-top-0 p-3" id="disks">
<form action="{% url 'instances:add_cdrom' instance.id %}" method="post" role="form" aria-label="Add CD-ROM form">{% csrf_token %}
<p class="fw-bold">
{% trans "Instance Media" %}
@ -249,7 +249,7 @@
{% include 'add_instance_volume.html' %}
</div>
<div class="table-responsive">
<table class="table table-hover">
<table class="table table-hover align-middle">
<thead>
<tr>
<th scope="col">{% trans "Device" %}</th>
@ -345,7 +345,7 @@
</div>
<div class="clearfix"></div>
</div>
<div role="tabpanel" class="tab-pane tab-pane-bordered" id="network">
<div role="tabpanel" class="tab-pane border border-top-0 p-3" id="network">
<div class="mb-3">
{% trans "Add a network device" %}
{% include 'add_instance_network_block.html' %}
@ -355,7 +355,7 @@
<div class="col-lg-12 mt-3">
<h5 class="fw-bold">{% trans "Network Devices" %}</h5>
<div class="table-responsive">
<table class="table">
<table align-middle class="table">
<thead>
<tr>
<th scope="col">{% trans 'Name' %}</th>
@ -525,7 +525,7 @@
</div>
<div class="col-12 col-sm-12">
<div class="table-responsive">
<table class="table table-hover">
<table class="table table-hover align-middle">
<thead>
<tr class="d-flex">
<th scope="col" class="col-2">{% trans "MAC" %}/{% trans "Direction" %}</th>
@ -582,7 +582,7 @@
{% endif %}
<div class="clearfix"></div>
</div>
<div role="tabpanel" class="tab-pane tab-pane-bordered" id="migrate">
<div role="tabpanel" class="tab-pane border border-top-0 p-3" id="migrate">
<p>{% trans "For migration both host servers must have equal settings and OS type" %}</p>
<form action="{% url 'instances:migrate' instance.id %}" class="ms-3 form" method="post" role="form" aria-label="Migrate instance form">
{% csrf_token %}{% submission_key %}
@ -654,7 +654,7 @@
</form>
<div class="clearfix"></div>
</div>
<div role="tabpanel" class="tab-pane tab-pane-bordered" id="xmledit">
<div role="tabpanel" class="tab-pane border border-top-0 p-3" id="xmledit">
{% if instance.status != 5 %}
<p id="xml-next-start">{% trans "This is the definition for the VM's next start; a saved change applies then." %}</p>
{% endif %}
@ -689,7 +689,7 @@
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane tab-pane-bordered" id="users">
<div role="tabpanel" class="tab-pane border border-top-0 p-3" id="users">
<div>
<div class="mb-3">
<span class="fw-bold">{% trans "Instance owners" %}</span>
@ -697,7 +697,7 @@
</div>
</div>
<div class="table-responsive">
<table class="table table-striped mt-3">
<table class="table table-striped mt-3 align-middle">
<tbody class="searchable">
{% for userinstance in userinstances %}
<tr>
@ -716,7 +716,7 @@
</div>
{% endif %}
{% if can_manage_console %}
<div role="tabpanel" class="tab-pane tab-pane-bordered" id="vncsettings">
<div role="tabpanel" class="tab-pane border border-top-0 p-3" id="vncsettings">
<form method="post" action="{% url 'instances:update_console' instance.id %}">
{% csrf_token %}
{% if instance.status != 5 %}
@ -737,7 +737,7 @@
</div>
{% endif %}
{% if can_clone %}
<div role="tabpanel" class="tab-pane tab-pane-bordered" id="clone">
<div role="tabpanel" class="tab-pane border border-top-0 p-3" id="clone">
<p class="fw-bold">{% trans "Create a clone" %}</p>
<form class="form" action="{% url 'instances:clone' instance.id %}" method="post" role="form" aria-label="Create clone form">{% csrf_token %}{% submission_key %}
<div class="row">
@ -833,7 +833,7 @@
</div>
{% endif %}
{% if can_change %}
<div role="tabpanel" class="tab-pane tab-pane-bordered" id="options">
<div role="tabpanel" class="tab-pane border border-top-0 p-3" id="options">
<p>{% trans "To set instance template name description, shutdown the instance." %}</p>
<form action="{% url 'instances:change_options' instance.id %}" method="post" role="form" aria-label="Set instance template name description form">{% csrf_token %}
<div class="row">

12
instances/templates/instances/snapshots_tab.html
View file

@ -3,7 +3,7 @@
{% get_current_timezone as TIME_ZONE %}
{% load bootstrap_icons %}
{% load operations %}
<div class="tab-pane" id="snapshots" role="tabpanel">
<div class="tab-pane mt-3" id="snapshots" role="tabpanel">
{% with busy=instance.snapshot_jobs held=instance.held_by_job %}
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" aria-label="Instance snapshot menu">
@ -30,7 +30,7 @@
{% trans "A disk job is running on this VM; snapshot actions are unavailable until it ends." %}
</div>
{% endif %}
<div role="tabpanel" class="tab-pane tab-pane-bordered active" id="takesnapshot">
<div role="tabpanel" class="tab-pane border border-top-0 p-3 active" id="takesnapshot">
{% if instance.status != 5 %}
<p>{% trans "With running machine, internal snapshots may take more than an hour, depending on how much memory has on your instance and how large the disk is." %} </p>
<p class="text-danger">{% trans "The VM is paused while its memory is saved." %}</p>
@ -52,7 +52,7 @@
</form>
<div class="clearfix"></div>
</div> <!-- Tab pane - takesnapshot -->
<div role="tabpanel" class="tab-pane tab-pane-bordered" id="takeextsnapshot">
<div role="tabpanel" class="tab-pane border border-top-0 p-3" id="takeextsnapshot">
<p>{% trans "Create an external snapshot. Each disk keeps its state in a new file next to it." %}</p>
<form action="{% url 'instances:create_external_snapshot' instance.id %}" method="post" role="form" aria-label="Create external snapshot form">
{% csrf_token %}{% submission_key %}
@ -83,13 +83,13 @@
</form>
<div class="clearfix"></div>
</div> <!--tab pane takeextsnapshot-->
<div role="tabpanel" class="tab-pane tab-pane-bordered" id="managesnapshot">
<div role="tabpanel" class="tab-pane border border-top-0 p-3" id="managesnapshot">
{% if instance.internal_snapshots or instance.external_snapshots %}
<p>{% trans "Choose a snapshot for restore/delete" %}</p>
{% if instance.internal_snapshots %}
<h6>{% trans "Internal" %}</h6>
<div class="table-responsive">
<table class="table" id="internal-snapshots">
<table align-middle class="table" id="internal-snapshots">
<thead>
<tr>
<th scope="col">{% blocktrans %}Date ({{ TIME_ZONE }}){% endblocktrans %}</th>
@ -137,7 +137,7 @@
{% if instance.external_snapshots %}
<h6>{% trans "External" %}</h6>
<div class="table-responsive">
<table class="table" id="external-snapshots">
<table align-middle class="table" id="external-snapshots">
<thead>
<tr>
<th scope="col">{% blocktrans %}Date ({{ TIME_ZONE }}){% endblocktrans %}</th>

8
instances/templates/instances/stats_tab.html
View file

@ -1,6 +1,6 @@
{% load i18n %}
{% load bootstrap_icons %}
<div class="tab-pane" id="graphics" role="tabpanel" >
<div class="tab-pane mt-3" id="graphics" role="tabpanel" >
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" aria-label="Instance graphs and logs menu">
<li class="nav-item" role="presentation">
@ -16,7 +16,7 @@
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane tab-pane-bordered active" id="graphs">
<div role="tabpanel" class="tab-pane border border-top-0 p-3 active" id="graphs">
<div class="mb-1 card border-success">
<div class="card-header">
<h5 class="card-title">{% bs_icon 'arrow-right' %}
@ -63,9 +63,9 @@
{% endfor %}
<div class="clearfix"></div>
</div>
<div role="tabpanel" class="tab-pane tab-pane-bordered" id="logs">
<div role="tabpanel" class="tab-pane border border-top-0 p-3" id="logs">
<div class="table-responsive">
<table class="table table-striped" id="logs_table">
<table class="table table-striped align-middle" id="logs_table">
<thead>
<tr>
<th scope="col">{% trans "Date" %}</th>

2
interfaces/templates/interface.html
View file

@ -55,7 +55,7 @@
<h5>{% trans 'Slaves' %}</h5>
{% if itype == 'bridge' %}
<div class="table-responsive">
<table class="table table-bordered">
<table class="table table-bordered align-middle">
<thead>
<tr>
<th scope="col">{% trans 'MAC' %}</th>

2
networks/templates/network.html
View file

@ -312,7 +312,7 @@
<div class="col-sm-12">
<div class="table-responsive">
<table class="table table-hover">
<table class="table table-hover align-middle">
<thead>
<tr>
<th scope="col">{% trans "Direction" %}</th>

2
nwfilters/templates/create_nwfilter_block.html
View file

@ -1,7 +1,7 @@
{% load i18n %}
{% load bootstrap_icons %}
{% if request.user.is_superuser %}
<button type="button" class="btn btn-success btn-header float-end" title="{% trans "Create New NWFilter" %}" data-bs-toggle="modal" data-bs-target="#AddNWFilter">
<button type="button" class="btn btn-success mt-1 float-end" title="{% trans "Create New NWFilter" %}" data-bs-toggle="modal" data-bs-target="#AddNWFilter">
<span aria-hidden="true">{% bs_icon 'plus' %} </span>
</button>

4
nwfilters/templates/nwfilter.html
View file

@ -66,7 +66,7 @@
<div class="row">
<div class="col-12 col-sm-12">
<div class="table-responsive">
<table class="table table-hover mb-3">
<table class="table table-hover mb-3 align-middle">
<thead>
<tr>
<th scope="col">#</th>
@ -100,7 +100,7 @@
<h5 class="page-header">{% trans "Rules" %}</h5>
<div class="table-responsive">
<table class="table table-hover">
<table class="table table-hover align-middle">
<thead>
<tr>
<th scope="col">{% trans "Rule" %}</th>

2
nwfilters/templates/nwfilters.html
View file

@ -23,7 +23,7 @@
<div class="col-lg-12">
{% if nwfilters %}
<div class="table-responsive">
<table class="table" data-sortable>
<table align-middle class="table" data-sortable>
<thead>
<tr>
<th scope="col" data-sort-method="number">#</th>

96
static/css/webvirtcloud.css
View file

@ -6,10 +6,6 @@
/* Global Styles */
body {
padding-bottom: 50px;
}
.container {
max-width: 900px;
}
@ -66,104 +62,12 @@ th[aria-sort="ascending"]:not([data-sort-method="none"])::after {
display: none;
}
.search {
margin: 5px;
}
.btn-header {
margin-top: 5px;
}
.action-block {
display: block;
padding: 15px 0;
font-weight: 400;
font-size: 14px;
width: 65px;
}
.action-button {
text-align: center;
}
.tab-pane-bordered {
border: 1px solid #eee;
border-top-width: 0;
padding: 20px;
}
p {
display: block;
margin: 10px 10px 10px 10px;
}
#power {
margin-top: 20px;
}
#access {
margin-top: 20px;
}
#resize {
margin-top: 20px;
}
#snapshots {
margin-top: 20px;
}
#settings {
margin-top: 20px;
}
#graphics {
margin-top: 20px;
}
#undefine {
margin-top: 20px;
}
/* a live chart (static/js/charts.js) fills the width of its card at this height */
.chart {
height: 160px;
}
.keyselect {
display: inline;
min-width: 250px;
}
.multipleselect {
width:27em;
height:10em;
border:solid 2px #c0c0c0;
overflow:auto;
padding: 0 1em;
margin: 0.9em;
}
.multipleselect label {
display:block;
}
.multipleselect-on {
color:#ffffff;
background-color:#000099;
}
/* make dropdowns show on hover */
@media only screen and (min-width: 768px) {
.dropdown:hover .dropdown-menu {
display: block;
}
}
.table > tbody > tr > td {
vertical-align: middle;
}
/* remove ugly dotted outline on tabs */
a {
outline: 0;
}

2
storages/templates/storage.html
View file

@ -70,7 +70,7 @@
</div>
{% if volumes %}
<div class="table-responsive">
<table class="table table-hover" data-sortable>
<table class="table table-hover align-middle" data-sortable>
<thead>
<tr>
<th scope="col" data-sort-method="number">#</th>

2
templates/base.html
View file

@ -34,7 +34,7 @@
<link rel="shortcut icon" href="{% static 'favicon.ico' %}">
</head>
<body{% block body_attrs %}{% endblock %}>
<body class="pb-5"{% block body_attrs %}{% endblock %}>
{% if request.user.is_authenticated %}
{% include 'navbar.html' %}

2
templates/search_block.html
View file

@ -1,4 +1,4 @@
{% load i18n %}
<div class="float-end search">
<div class="float-end m-1">
<input id="filter" class="form-control" type="text" placeholder="{% trans 'Search' %}">
</div>

2
virtsecrets/templates/secrets.html
View file

@ -28,7 +28,7 @@
{% else %}
<div class="col-lg-12">
<div class="table-responsive">
<table class="table table-hover" data-sortable>
<table class="table table-hover align-middle" data-sortable>
<thead>
<tr class="active">
<th scope="col">{% trans "UUID" %}</th>