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): the last inline styles that Bootstrap covers

Browse source 
- The VM list's power forms (style="display:inline") are d-inline.
- The fields scripts show and hide are d-none, and the scripts add and
  remove that class instead of calling jQuery's show() and hide(),
  which could not undo it: the custom memory boxes of the Resize tab,
  the ISO upload's error message and the clone dialog's metadata row.
- The please-wait dialog's full bar is w-100.
- The create-VM pages' own 56rem width (.create-vm) goes: pages stop
  at 960px now, about the same.
- static/css/font-awesome.min.css goes: no page loaded it, no element
  used its classes and its fonts were never in the repository.
This commit is contained in:
catborise 2026-10-27 20:16:49 +03:00
parent 1cb1f8ac6a
commit 3a4554bcbf
9 changed files with 18 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

6
instances/templates/create_instance_w1.html
View file

@ -5,17 +5,13 @@
{% block title %}{% trans "Create new instance" %} - {% trans "Machine" %}{% endblock %}
{% block style %}
<style>.create-vm { max-width: 56rem; }</style>
{% endblock %}
{% block page_heading%}
{% blocktrans with host=compute.name %}New instance on {{ host }} {% endblocktrans %}
{% endblock page_heading %}
{% block content %}
{% include 'pleasewaitdialog.html' %}
<div class="create-vm mx-auto">
<div>
{% include "create_steps.html" with step=2 %}
<section class="card mb-3" aria-labelledby="machine-heading">

3
instances/templates/create_instance_w2.html
View file

@ -13,7 +13,6 @@
<style>
/* the chosen images and networks are listed below the pickers, not in them */
#image-control + .ts-wrapper .ts-control > .item, #network-control + .ts-wrapper .ts-control > .item { display: none; }
.create-vm { max-width: 56rem; }
.source-option { cursor: pointer; }
/* the chosen card by its border only: the Bootswatch dark themes keep light "subtle" backgrounds */
.source-option:has(input:checked) { border-color: var(--bs-primary) !important; box-shadow: inset 0 0 0 1px var(--bs-primary); }
@ -27,7 +26,7 @@
{% block content %}
{% include 'pleasewaitdialog.html' %}
<div class="create-vm mx-auto">
<div>
{% include "create_steps.html" with step=3 %}
{% if vm_form %}

2
instances/templates/instance.html
View file

@ -316,7 +316,7 @@
$('.js-custom__checkbox').change(function () {
var container = $(this).closest('.js-custom__container');
var toggles = container.find('.js-custom__toggle');
toggles.toggle();
toggles.toggleClass("d-none");
// a custom value is sent only while its box is ticked
container.find('input.js-custom__toggle').prop('disabled', !this.checked);
});

12
instances/templates/instance_actions.html
View file

@ -9,12 +9,12 @@
{% bs_icon 'copy' %}
</a>
{% elif "poweron" in actions %}
<form action="{% url 'instances:poweron' instance.id %}" method="post" style="display:inline;" onsubmit="showPleaseWaitDialog()">
<form action="{% url 'instances:poweron' instance.id %}" method="post" class="d-inline" onsubmit="showPleaseWaitDialog()">
{% csrf_token %}
<button type="submit" class="btn btn-sm btn-secondary" title="{% trans "Power On" %}">{% bs_icon 'play-fill' %}</button>
</form>
{% elif "resume" in actions %}
<form action="{% url 'instances:resume' instance.id %}" method="post" style="display:inline;">
<form action="{% url 'instances:resume' instance.id %}" method="post" class="d-inline">
{% csrf_token %}
<button type="submit" class="btn btn-sm btn-secondary" title="{% trans "Resume" %}">{% bs_icon 'play-fill' %}</button>
</form>
@ -23,7 +23,7 @@
{% endif %}
{% if "suspend" in actions %}
<form action="{% url 'instances:suspend' instance.id %}" method="post" style="display:inline;">
<form action="{% url 'instances:suspend' instance.id %}" method="post" class="d-inline">
{% csrf_token %}
<button type="submit" class="btn btn-sm btn-secondary" title="{% trans "Suspend" %}">{% bs_icon 'pause-fill' %}</button>
</form>
@ -32,12 +32,12 @@
{% endif %}
{% if "poweroff" in actions %}
<form action="{% url 'instances:poweroff' instance.id %}" method="post" style="display:inline;">
<form action="{% url 'instances:poweroff' instance.id %}" method="post" class="d-inline">
{% csrf_token %}
<button type="submit" class="btn btn-sm btn-secondary" title="{% trans "Power Off" %}">{% bs_icon 'power' %}</button>
</form>
{% elif "force_off" in actions %}
<form action="{% url 'instances:force_off' instance.id %}" method="post" style="display:inline;">
<form action="{% url 'instances:force_off' instance.id %}" method="post" class="d-inline">
{% csrf_token %}
<button type="submit" class="btn btn-sm btn-secondary" title="{% trans "Force Off" %}"
data-confirm="{% blocktrans with name=instance.name %}Force off {{ name }}? It stops at once, as after a power cut; what the guest has not written to disk is lost.{% endblocktrans %}"
@ -48,7 +48,7 @@
{% endif %}
{% if "powercycle" in actions %}
<form action="{% url 'instances:powercycle' instance.id %}" method="post" style="display:inline;">
<form action="{% url 'instances:powercycle' instance.id %}" method="post" class="d-inline">
{% csrf_token %}
<button type="submit" class="btn btn-sm btn-secondary" title="{% trans "Power Cycle" %}"
data-confirm="{% blocktrans with name=instance.name %}Power cycle {{ name }}? It stops at once, as after a power cut, and starts again; what the guest has not written to disk is lost.{% endblocktrans %}"

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

@ -97,7 +97,7 @@
<option value="{{ mem }}" {% if mem == instance.cur_memory %}selected{% endif %}>{{ mem }}</option>
{% endfor %}
</select>
<input type="text" name="cur_memory_custom" class="form-select js-custom__toggle" style="display: none" disabled />
<input type="text" name="cur_memory_custom" class="form-select js-custom__toggle d-none" disabled />
<small><input type="checkbox" class="js-custom__checkbox" /> {% trans "Custom value" %}</small>
</div>
</div>
@ -113,7 +113,7 @@
{% endfor %}
</select>
{% if instance.status == 5 %}
<input type="text" name="memory_custom" class="form-select js-custom__toggle" style="display: none" disabled />
<input type="text" name="memory_custom" class="form-select js-custom__toggle d-none" disabled />
<small><input type="checkbox" class="js-custom__checkbox" /> {% trans "Custom value" %}</small>
{% else %}
<small class="text-body-secondary">{% trans "Shut off the VM to change the maximum" %}</small>

4
static/css/font-awesome.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
storages/templates/create_stg_vol_block.html
View file

@ -28,7 +28,7 @@
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span id="upload-status-text">{% trans "Starting upload..." %}</span>
</div>
<div id="upload-error-message" class="alert alert-danger mt-3" style="display: none;"></div>
<div id="upload-error-message" class="alert alert-danger mt-3 d-none"></div>
</div>
<div class="modal-footer">
<input type="hidden" name="iso_upload" value="true">

10
storages/templates/storage.html
View file

@ -124,7 +124,7 @@
</select>
</div>
</div>
<div class="row meta-prealloc" style="display: none;">
<div class="row meta-prealloc d-none">
<label class="col-sm-3 col-form-label">{% trans "Metadata" %}</label>
<div class="col-sm-6">
<input type="checkbox" name="meta_prealloc" value="true">
@ -184,7 +184,7 @@
var form = $(this).closest('form');
var convert = form.find('.volume-convert').prop('checked');
form.find('.format-convert').toggle(convert);
form.find('.meta-prealloc').toggle(convert && form.find('.image-format').val() == 'qcow2');
form.find('.meta-prealloc').toggleClass('d-none', !(convert && form.find('.image-format').val() == 'qcow2'));
});
$(document).ready(function() {
@ -208,7 +208,7 @@
var fileName = file.name;
var errorMessage = $('#upload-error-message');
if (!/\.iso$/i.test(fileName) || fileName.length <= 4) {
errorMessage.text("{% trans 'Only .iso files can be uploaded.'|escapejs %}").show();
errorMessage.text("{% trans 'Only .iso files can be uploaded.'|escapejs %}").removeClass("d-none");
return;
}
if (file.size === 0) {
@ -235,7 +235,7 @@
var uploadStatusText = $('#upload-status-text');
var uploadButton = $('#isoUploadForm button[type="submit"]');
errorMessage.hide();
errorMessage.addClass("d-none");
uploadStatusText.text("{% trans 'Starting upload...'|escapejs %}");
uploadStatus.removeClass('d-none').addClass('d-flex');
uploadButton.prop('disabled', true);
@ -299,7 +299,7 @@
pendingUpload = null;
}
var errorText = jqXHR.responseJSON && jqXHR.responseJSON.error ? jqXHR.responseJSON.error : "{% trans 'An error occurred during upload.'|escapejs %}";
errorMessage.text(errorText).show();
errorMessage.text(errorText).removeClass("d-none");
uploadDialog.show();
}
});

2
templates/pleasewaitdialog.html
View file

@ -8,7 +8,7 @@
</div>
<div class="modal-body">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-label="{% trans "Processing" %}" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%">
<div class="progress-bar progress-bar-striped progress-bar-animated w-100" role="progressbar" aria-label="{% trans "Processing" %}" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>