refactor(templates): the last inline styles that Bootstrap covers

- 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.

instances/templates/create_instance_w1.html

@@ -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">

instances/templates/create_instance_w2.html

@@ -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 %}

instances/templates/instance.html

@@ -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);
         });

instances/templates/instance_actions.html

@@ -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 %}"

instances/templates/instances/resize_tab.html

@@ -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>

storages/templates/create_stg_vol_block.html

@@ -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">

storages/templates/storage.html

@@ -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();
                         }
                     });

templates/pleasewaitdialog.html

@@ -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>